Redesign attachment picker buttons

This commit is contained in:
Naveen 2022-11-06 23:09:45 +05:30
parent b6407dc49b
commit 69c4d62e42
4 changed files with 275 additions and 124 deletions

View File

@ -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()
}

View File

@ -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>

View File

@ -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>

View File

@ -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>