Redesign attachment picker buttons
This commit is contained in:
parent
b6407dc49b
commit
69c4d62e42
|
@ -32,11 +32,9 @@ import android.widget.LinearLayout
|
|||
import android.widget.LinearLayout.LayoutParams
|
||||
import android.widget.RelativeLayout
|
||||
import androidx.annotation.StringRes
|
||||
import androidx.appcompat.widget.AppCompatButton
|
||||
import androidx.constraintlayout.widget.ConstraintLayout
|
||||
import androidx.core.content.res.ResourcesCompat
|
||||
import androidx.core.view.WindowInsetsCompat
|
||||
import androidx.core.view.children
|
||||
import androidx.core.view.updateLayoutParams
|
||||
import com.google.gson.Gson
|
||||
import com.google.gson.reflect.TypeToken
|
||||
|
@ -1362,20 +1360,26 @@ class ThreadActivity : SimpleActivity() {
|
|||
.toArrayList()
|
||||
|
||||
private fun setupAttachmentPickerView() {
|
||||
val colors = arrayOf(
|
||||
val buttonColors = arrayOf(
|
||||
R.color.md_red_500,
|
||||
R.color.md_pink_500,
|
||||
R.color.md_purple_500,
|
||||
R.color.md_teal_500,
|
||||
R.color.md_green_500,
|
||||
R.color.md_light_green_500,
|
||||
R.color.md_indigo_500,
|
||||
R.color.md_blue_500
|
||||
)
|
||||
attachment_picker_holder.children.filterIsInstance<AppCompatButton>().forEachIndexed { index, button ->
|
||||
button.setTextColor(getProperTextColor())
|
||||
val color = resources.getColor(colors[index])
|
||||
button.compoundDrawables.forEach { it?.applyColorFilter(color) }
|
||||
).map { ResourcesCompat.getColor(resources, it, theme) }
|
||||
arrayOf(choose_photo_icon, take_photo_icon, record_video_icon, record_audio_icon, pick_file_icon, pick_contact_icon, schedule_message_icon)
|
||||
.forEachIndexed { index, icon ->
|
||||
val iconColor = buttonColors[index]
|
||||
icon.background.applyColorFilter(iconColor)
|
||||
icon.applyColorFilter(iconColor.getContrastColor())
|
||||
}
|
||||
|
||||
val textColor = getProperTextColor()
|
||||
arrayOf(choose_photo_text, take_photo_text, record_video_text, record_audio_text, pick_file_text, pick_contact_text, schedule_message_text)
|
||||
.forEach { it.setTextColor(textColor) }
|
||||
|
||||
pick_from_gallery.setOnClickListener {
|
||||
launchPickPhotoVideoIntent()
|
||||
}
|
||||
|
|
|
@ -307,125 +307,16 @@
|
|||
android:importantForAccessibility="no"
|
||||
app:layout_constraintBottom_toTopOf="@id/attachment_picker_holder" />
|
||||
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/attachment_picker_holder"
|
||||
<include
|
||||
layout="@layout/layout_attachment_picker"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="horizontal"
|
||||
android:paddingVertical="@dimen/normal_margin"
|
||||
android:layout_marginHorizontal="@dimen/small_margin"
|
||||
android:visibility="gone"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
tools:visibility="visible">
|
||||
|
||||
<androidx.appcompat.widget.AppCompatButton
|
||||
android:id="@+id/pick_from_gallery"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="@dimen/attachment_button_height"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:drawableTop="@drawable/ic_image_vector"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingTop="@dimen/medium_margin"
|
||||
android:text="@string/gallery_short"
|
||||
android:textAllCaps="false"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintEnd_toStartOf="@id/camera"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatButton
|
||||
android:id="@+id/camera"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="@dimen/attachment_button_height"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:drawableTop="@drawable/ic_camera_vector"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingTop="@dimen/medium_margin"
|
||||
android:text="@string/take_photo"
|
||||
android:textAllCaps="false"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintEnd_toStartOf="@id/record_video"
|
||||
app:layout_constraintStart_toEndOf="@id/pick_from_gallery"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatButton
|
||||
android:id="@+id/record_video"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="@dimen/attachment_button_height"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:drawableTop="@drawable/ic_videocam_vector"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingTop="@dimen/medium_margin"
|
||||
android:text="Record Video"
|
||||
android:textAllCaps="false"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintEnd_toStartOf="@id/record_audio"
|
||||
app:layout_constraintStart_toEndOf="@id/camera"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatButton
|
||||
android:id="@+id/record_audio"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="@dimen/attachment_button_height"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:drawableTop="@drawable/ic_microphone_vector"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingTop="@dimen/medium_margin"
|
||||
android:text="Record Audio"
|
||||
android:textAllCaps="false"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@+id/record_video"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatButton
|
||||
android:id="@+id/pick_file"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="@dimen/attachment_button_height"
|
||||
android:layout_marginTop="@dimen/normal_margin"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:drawableTop="@drawable/ic_document_vector"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingTop="@dimen/medium_margin"
|
||||
android:text="Files"
|
||||
android:textAllCaps="false"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintStart_toStartOf="@id/pick_from_gallery"
|
||||
app:layout_constraintTop_toBottomOf="@id/pick_from_gallery" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatButton
|
||||
android:id="@+id/pick_contact"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="@dimen/attachment_button_height"
|
||||
android:layout_marginTop="@dimen/normal_margin"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:drawableTop="@drawable/ic_person_vector"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingTop="@dimen/medium_margin"
|
||||
android:text="@string/contacts_short"
|
||||
android:textAllCaps="false"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintStart_toStartOf="@id/camera"
|
||||
app:layout_constraintTop_toBottomOf="@id/camera" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatButton
|
||||
android:id="@+id/schedule_message"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="@dimen/attachment_button_height"
|
||||
android:layout_marginTop="@dimen/normal_margin"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:drawableTop="@drawable/ic_clock_vector"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingTop="@dimen/medium_margin"
|
||||
android:text="@string/schedule_message"
|
||||
android:textAllCaps="false"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintStart_toEndOf="@id/pick_contact"
|
||||
app:layout_constraintStart_toStartOf="@id/record_video"
|
||||
app:layout_constraintTop_toBottomOf="@id/record_video" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
tools:visibility="visible" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
</androidx.coordinatorlayout.widget.CoordinatorLayout>
|
||||
|
|
|
@ -0,0 +1,256 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
android:id="@+id/attachment_picker_holder"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:paddingVertical="@dimen/normal_margin">
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/pick_from_gallery"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:minHeight="@dimen/attachment_button_height"
|
||||
android:orientation="vertical"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingVertical="@dimen/medium_margin"
|
||||
app:layout_constraintEnd_toStartOf="@id/camera"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent">
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageView
|
||||
android:id="@+id/choose_photo_icon"
|
||||
android:layout_width="@dimen/medium_icon_size"
|
||||
android:layout_height="@dimen/medium_icon_size"
|
||||
android:layout_gravity="center"
|
||||
android:background="@drawable/circle_background"
|
||||
android:backgroundTint="@color/colorPrimary"
|
||||
android:padding="@dimen/medium_margin"
|
||||
android:src="@drawable/ic_image_vector" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatTextView
|
||||
android:id="@+id/choose_photo_text"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center"
|
||||
android:layout_marginTop="@dimen/medium_margin"
|
||||
android:text="@string/choose_photo"
|
||||
android:textAlignment="center"
|
||||
android:textColor="@color/default_text_color"
|
||||
android:textSize="@dimen/normal_text_size" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/camera"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:minHeight="@dimen/attachment_button_height"
|
||||
android:orientation="vertical"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingVertical="@dimen/medium_margin"
|
||||
app:layout_constraintEnd_toStartOf="@id/record_video"
|
||||
app:layout_constraintStart_toEndOf="@id/pick_from_gallery"
|
||||
app:layout_constraintTop_toTopOf="parent">
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageView
|
||||
android:id="@+id/take_photo_icon"
|
||||
android:layout_width="@dimen/medium_icon_size"
|
||||
android:layout_height="@dimen/medium_icon_size"
|
||||
android:layout_gravity="center"
|
||||
android:background="@drawable/circle_background"
|
||||
android:backgroundTint="@color/colorPrimary"
|
||||
android:padding="@dimen/medium_margin"
|
||||
android:src="@drawable/ic_camera_vector" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatTextView
|
||||
android:id="@+id/take_photo_text"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center"
|
||||
android:layout_marginTop="@dimen/medium_margin"
|
||||
android:text="@string/take_photo"
|
||||
android:textAlignment="center"
|
||||
android:textColor="@color/default_text_color"
|
||||
android:textSize="@dimen/normal_text_size" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/record_video"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:minHeight="@dimen/attachment_button_height"
|
||||
android:orientation="vertical"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingVertical="@dimen/medium_margin"
|
||||
app:layout_constraintEnd_toStartOf="@id/record_audio"
|
||||
app:layout_constraintStart_toEndOf="@id/camera"
|
||||
app:layout_constraintTop_toTopOf="parent">
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageView
|
||||
android:id="@+id/record_video_icon"
|
||||
android:layout_width="@dimen/medium_icon_size"
|
||||
android:layout_height="@dimen/medium_icon_size"
|
||||
android:layout_gravity="center"
|
||||
android:background="@drawable/circle_background"
|
||||
android:backgroundTint="@color/colorPrimary"
|
||||
android:padding="@dimen/medium_margin"
|
||||
android:src="@drawable/ic_videocam_vector" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatTextView
|
||||
android:id="@+id/record_video_text"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center"
|
||||
android:layout_marginTop="@dimen/medium_margin"
|
||||
android:text="@string/record_video"
|
||||
android:textAlignment="center"
|
||||
android:textColor="@color/default_text_color"
|
||||
android:textSize="@dimen/normal_text_size" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/record_audio"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:minHeight="@dimen/attachment_button_height"
|
||||
android:orientation="vertical"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingVertical="@dimen/medium_margin"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@+id/record_video"
|
||||
app:layout_constraintTop_toTopOf="parent">
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageView
|
||||
android:id="@+id/record_audio_icon"
|
||||
android:layout_width="@dimen/medium_icon_size"
|
||||
android:layout_height="@dimen/medium_icon_size"
|
||||
android:layout_gravity="center"
|
||||
android:background="@drawable/circle_background"
|
||||
android:backgroundTint="@color/colorPrimary"
|
||||
android:padding="@dimen/medium_margin"
|
||||
android:src="@drawable/ic_microphone_vector" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatTextView
|
||||
android:id="@+id/record_audio_text"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center"
|
||||
android:layout_marginTop="@dimen/medium_margin"
|
||||
android:text="@string/record_audio"
|
||||
android:textAlignment="center"
|
||||
android:textColor="@color/default_text_color"
|
||||
android:textSize="@dimen/normal_text_size" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/pick_file"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="@dimen/small_margin"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:minHeight="@dimen/attachment_button_height"
|
||||
android:orientation="vertical"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingVertical="@dimen/medium_margin"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintStart_toStartOf="@id/pick_from_gallery"
|
||||
app:layout_constraintTop_toBottomOf="@id/pick_from_gallery">
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageView
|
||||
android:id="@+id/pick_file_icon"
|
||||
android:layout_width="@dimen/medium_icon_size"
|
||||
android:layout_height="@dimen/medium_icon_size"
|
||||
android:layout_gravity="center"
|
||||
android:background="@drawable/circle_background"
|
||||
android:backgroundTint="@color/colorPrimary"
|
||||
android:padding="@dimen/medium_margin"
|
||||
android:src="@drawable/ic_document_vector" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatTextView
|
||||
android:id="@+id/pick_file_text"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center"
|
||||
android:layout_marginTop="@dimen/medium_margin"
|
||||
android:text="@string/files"
|
||||
android:textAlignment="center"
|
||||
android:textColor="@color/default_text_color"
|
||||
android:textSize="@dimen/normal_text_size" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/pick_contact"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="@dimen/small_margin"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:minHeight="@dimen/attachment_button_height"
|
||||
android:orientation="vertical"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingVertical="@dimen/medium_margin"
|
||||
android:textColor="@color/default_text_color"
|
||||
app:layout_constraintStart_toStartOf="@id/camera"
|
||||
app:layout_constraintTop_toBottomOf="@id/camera">
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageView
|
||||
android:id="@+id/pick_contact_icon"
|
||||
android:layout_width="@dimen/medium_icon_size"
|
||||
android:layout_height="@dimen/medium_icon_size"
|
||||
android:layout_gravity="center"
|
||||
android:background="@drawable/circle_background"
|
||||
android:backgroundTint="@color/colorPrimary"
|
||||
android:padding="@dimen/medium_margin"
|
||||
android:src="@drawable/ic_person_vector" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatTextView
|
||||
android:id="@+id/pick_contact_text"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center"
|
||||
android:layout_marginTop="@dimen/medium_margin"
|
||||
android:text="@string/contacts_short"
|
||||
android:textAlignment="center"
|
||||
android:textColor="@color/default_text_color"
|
||||
android:textSize="@dimen/normal_text_size" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/schedule_message"
|
||||
android:layout_width="@dimen/attachment_button_width"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="@dimen/small_margin"
|
||||
android:background="?selectableItemBackgroundBorderless"
|
||||
android:minHeight="@dimen/attachment_button_height"
|
||||
android:orientation="vertical"
|
||||
android:paddingHorizontal="@dimen/medium_margin"
|
||||
android:paddingVertical="@dimen/medium_margin"
|
||||
app:layout_constraintStart_toEndOf="@id/pick_contact"
|
||||
app:layout_constraintStart_toStartOf="@id/record_video"
|
||||
app:layout_constraintTop_toBottomOf="@id/record_video">
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageView
|
||||
android:id="@+id/schedule_message_icon"
|
||||
android:layout_width="@dimen/medium_icon_size"
|
||||
android:layout_height="@dimen/medium_icon_size"
|
||||
android:layout_gravity="center"
|
||||
android:background="@drawable/circle_background"
|
||||
android:backgroundTint="@color/colorPrimary"
|
||||
android:padding="@dimen/medium_margin"
|
||||
android:src="@drawable/ic_clock_vector" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatTextView
|
||||
android:id="@+id/schedule_message_text"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center"
|
||||
android:layout_marginTop="@dimen/medium_margin"
|
||||
android:text="@string/schedule_message"
|
||||
android:textAlignment="center"
|
||||
android:textColor="@color/default_text_color"
|
||||
android:textSize="@dimen/normal_text_size" />
|
||||
</LinearLayout>
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
|
@ -11,6 +11,6 @@
|
|||
<dimen name="vcard_property_start_margin">64dp</dimen>
|
||||
<dimen name="small_icon_size">20dp</dimen>
|
||||
<dimen name="medium_icon_size">36dp</dimen>
|
||||
<dimen name="attachment_button_height">80dp</dimen>
|
||||
<dimen name="attachment_button_height">96dp</dimen>
|
||||
<dimen name="attachment_button_width">90dp</dimen>
|
||||
</resources>
|
||||
|
|
Loading…
Reference in New Issue