New attachment picker implemented.

changelog.d/3444.bugfix

@@ -0,0 +1 @@
+Attachment picker UI improvements

vector/src/main/java/im/vector/app/features/attachments/AttachmentTypeSelectorView.kt

@@ -26,24 +26,18 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewAnimationUtils
 import android.view.animation.Animation
-import android.view.animation.AnimationSet
-import android.view.animation.OvershootInterpolator
-import android.view.animation.ScaleAnimation
 import android.view.animation.TranslateAnimation
 import android.widget.ImageButton
 import android.widget.LinearLayout
 import android.widget.PopupWindow
 import androidx.core.view.doOnNextLayout
 import androidx.core.view.isVisible
-import com.amulyakhare.textdrawable.TextDrawable
-import com.amulyakhare.textdrawable.util.ColorGenerator
 import im.vector.app.R
-import im.vector.app.core.extensions.getMeasurements
+import im.vector.app.core.epoxy.onClick
 import im.vector.app.core.utils.PERMISSIONS_EMPTY
 import im.vector.app.core.utils.PERMISSIONS_FOR_PICKING_CONTACT
 import im.vector.app.core.utils.PERMISSIONS_FOR_TAKING_PHOTO
 import im.vector.app.databinding.ViewAttachmentTypeSelectorBinding
-import im.vector.app.features.attachments.AttachmentTypeSelectorView.Callback
 import kotlin.math.max
 
 private const val ANIMATION_DURATION = 250
@@ -52,17 +46,16 @@ private const val ANIMATION_DURATION = 250
  * This class is the view presenting choices for picking attachments.
  * It will return result through [Callback].
  */
+
 class AttachmentTypeSelectorView(context: Context,
                                  inflater: LayoutInflater,
-                                 var callback: Callback?) :
-    PopupWindow(context) {
+                                 var callback: Callback?
+) : PopupWindow(context) {
 
     interface Callback {
         fun onTypeSelected(type: Type)
     }
 
-    private val iconColorGenerator = ColorGenerator.MATERIAL
-
     private val views: ViewAttachmentTypeSelectorBinding
 
     private var anchor: View? = null
@@ -85,32 +78,21 @@ class AttachmentTypeSelectorView(context: Context,
         inputMethodMode = INPUT_METHOD_NOT_NEEDED
         isFocusable = true
         isTouchable = true
+
+        views.attachmentCloseButton.onClick {
+            dismiss()
+        }
     }
 
-    fun show(anchor: View, isKeyboardOpen: Boolean) {
+    fun show(anchor: View) {
         this.anchor = anchor
         val anchorCoordinates = IntArray(2)
         anchor.getLocationOnScreen(anchorCoordinates)
-        if (isKeyboardOpen) {
-            showAtLocation(anchor, Gravity.NO_GRAVITY, 0, anchorCoordinates[1] + anchor.height)
-        } else {
-            val contentViewHeight = if (contentView.height == 0) {
-                contentView.getMeasurements().second
-            } else {
-                contentView.height
-            }
-            showAtLocation(anchor, Gravity.NO_GRAVITY, 0, anchorCoordinates[1] - contentViewHeight)
-        }
+        showAtLocation(anchor, Gravity.NO_GRAVITY, 0, anchorCoordinates[1])
+
         contentView.doOnNextLayout {
             animateWindowInCircular(anchor, contentView)
         }
-        animateButtonIn(views.attachmentGalleryButton, ANIMATION_DURATION / 2)
-        animateButtonIn(views.attachmentCameraButton, ANIMATION_DURATION / 4)
-        animateButtonIn(views.attachmentFileButton, ANIMATION_DURATION / 2)
-        animateButtonIn(views.attachmentAudioButton, 0)
-        animateButtonIn(views.attachmentContactButton, ANIMATION_DURATION / 4)
-        animateButtonIn(views.attachmentStickersButton, ANIMATION_DURATION / 2)
-        animateButtonIn(views.attachmentPollButton, ANIMATION_DURATION / 4)
     }
 
     override fun dismiss() {
@@ -124,28 +106,18 @@ class AttachmentTypeSelectorView(context: Context,
 
     fun setAttachmentVisibility(type: Type, isVisible: Boolean) {
         when (type) {
-            Type.CAMERA  -> views.attachmentCameraButtonContainer
-            Type.GALLERY -> views.attachmentGalleryButtonContainer
-            Type.FILE    -> views.attachmentFileButtonContainer
-            Type.STICKER -> views.attachmentStickersButtonContainer
-            Type.AUDIO   -> views.attachmentAudioButtonContainer
-            Type.CONTACT -> views.attachmentContactButtonContainer
-            Type.POLL    -> views.attachmentPollButtonContainer
+            Type.CAMERA  -> views.attachmentCameraButton
+            Type.GALLERY -> views.attachmentGalleryButton
+            Type.FILE    -> views.attachmentFileButton
+            Type.STICKER -> views.attachmentStickersButton
+            Type.AUDIO   -> views.attachmentAudioButton
+            Type.CONTACT -> views.attachmentContactButton
+            Type.POLL    -> views.attachmentPollButton
         }.let {
             it.isVisible = isVisible
         }
     }
 
-    private fun animateButtonIn(button: View, delay: Int) {
-        val animation = AnimationSet(true)
-        val scale = ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.0f)
-        animation.addAnimation(scale)
-        animation.interpolator = OvershootInterpolator(1f)
-        animation.duration = ANIMATION_DURATION.toLong()
-        animation.startOffset = delay.toLong()
-        button.startAnimation(animation)
-    }
-
     private fun animateWindowInCircular(anchor: View, contentView: View) {
         val coordinates = getClickCoordinates(anchor, contentView)
         val animator = ViewAnimationUtils.createCircularReveal(contentView,
@@ -157,12 +129,6 @@ class AttachmentTypeSelectorView(context: Context,
         animator.start()
     }
 
-    private fun animateWindowInTranslate(contentView: View) {
-        val animation = TranslateAnimation(0f, 0f, contentView.height.toFloat(), 0f)
-        animation.duration = ANIMATION_DURATION.toLong()
-        getContentView().startAnimation(animation)
-    }
-
     private fun animateWindowOutCircular(anchor: View, contentView: View) {
         val coordinates = getClickCoordinates(anchor, contentView)
         val animator = ViewAnimationUtils.createCircularReveal(getContentView(),
@@ -207,7 +173,6 @@ class AttachmentTypeSelectorView(context: Context,
     }
 
     private fun ImageButton.configure(type: Type): ImageButton {
-        this.background = TextDrawable.builder().buildRound("", iconColorGenerator.getColor(type.ordinal))
         this.setOnClickListener(TypeClickListener(type))
         return this
     }

vector/src/main/java/im/vector/app/features/home/room/detail/RoomDetailFragment.kt

@@ -1367,7 +1367,7 @@ class RoomDetailFragment @Inject constructor(
                     attachmentTypeSelector = AttachmentTypeSelectorView(vectorBaseActivity, vectorBaseActivity.layoutInflater, this@RoomDetailFragment)
                     attachmentTypeSelector.setAttachmentVisibility(AttachmentTypeSelectorView.Type.POLL, vectorPreferences.labsEnablePolls())
                 }
-                attachmentTypeSelector.show(views.composerLayout.views.attachmentButton, keyboardStateUtils.isKeyboardShowing)
+                attachmentTypeSelector.show(views.composerLayout.views.attachmentButton)
             }
 
             override fun onSendMessage(text: CharSequence) {

vector/src/main/res/drawable/ic_attachment_camera.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M9.928,3.2917C8.6063,3.2917 7.4872,4.2283 7.2322,5.4975C7.194,5.6876 7.1204,5.8713 6.9925,6.0171L6.4405,6.6463C6.2665,6.8447 6.0153,6.9584 5.7514,6.9584H2.8333C1.8208,6.9584 1,7.7792 1,8.7917V18.8751C1,19.8876 1.8208,20.7084 2.8333,20.7084H21.1667C22.1792,20.7084 23,19.8876 23,18.8751V8.7917C23,7.7792 22.1792,6.9584 21.1667,6.9584H18.2486C17.9846,6.9584 17.7335,6.8447 17.5595,6.6463L17.0075,6.0171C16.8796,5.8713 16.806,5.6876 16.7678,5.4975C16.5128,4.2283 15.3937,3.2917 14.072,3.2917H9.928ZM15.6667,13.375C15.6667,15.4 14.025,17.0417 12,17.0417C9.975,17.0417 8.3333,15.4 8.3333,13.375C8.3333,11.35 9.975,9.7083 12,9.7083C14.025,9.7083 15.6667,11.35 15.6667,13.375Z"
+      android:fillColor="#0DBD8B"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M3.2917,5.5833C3.0385,5.5833 2.8333,5.7885 2.8333,6.0417C2.8333,6.2948 3.0385,6.5 3.2917,6.5H5.125C5.3781,6.5 5.5833,6.2948 5.5833,6.0417C5.5833,5.7885 5.3781,5.5833 5.125,5.5833H3.2917Z"
+      android:fillColor="#0DBD8B"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_camera_white_24dp.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
-    <path android:fillColor="#FFFFFF" android:pathData="M9.4,10.5l4.77,-8.26C13.47,2.09 12.75,2 12,2c-2.4,0 -4.6,0.85 -6.32,2.25l3.66,6.35 0.06,-0.1zM21.54,9c-0.92,-2.92 -3.15,-5.26 -6,-6.34L11.88,9h9.66zM21.8,10h-7.49l0.29,0.5 4.76,8.25C21,16.97 22,14.61 22,12c0,-0.69 -0.07,-1.35 -0.2,-2zM8.54,12l-3.9,-6.75C3.01,7.03 2,9.39 2,12c0,0.69 0.07,1.35 0.2,2h7.49l-1.15,-2zM2.46,15c0.92,2.92 3.15,5.26 6,6.34L12.12,15L2.46,15zM13.73,15l-3.9,6.76c0.7,0.15 1.42,0.24 2.17,0.24 2.4,0 4.6,-0.85 6.32,-2.25l-3.66,-6.35 -0.93,1.6z"/>
-</vector>

vector/src/main/res/drawable/ic_attachment_close.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="36"
+    android:viewportHeight="36">
+  <path
+      android:pathData="M18,18m-0,-18a18,18 0,1 1,-0 36a18,18 0,1 1,-0 -36"
+      android:fillColor="?vctr_content_quinary"/>
+  <path
+      android:pathData="M13.521,23.4807L23.067,13.9348M13.521,13.9348L23.067,23.4807"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="?vctr_content_secondary"
+      android:strokeLineCap="round"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_file.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17.8155,15.0336L13.2282,19.4193C11.082,21.45 7.5301,21.6024 5.4562,19.4193C3.4888,17.3484 3.4841,14.0136 5.6303,11.9829L13.8691,4.106C15.2999,2.7522 17.5435,2.535 18.984,4.0515C20.5968,5.7491 20.1298,7.9906 18.699,9.3443L10.6284,16.9682C9.913,17.645 8.7551,17.7233 8.0377,16.9682C7.3484,16.2426 7.4597,15.0625 8.1751,14.3856L12.9045,9.864"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#0DBD8B"
+      android:strokeLineCap="round"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_file_white_24dp.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
-    <path android:fillColor="#FFFFFF" android:pathData="M6,2c-1.1,0 -1.99,0.9 -1.99,2L4,20c0,1.1 0.89,2 1.99,2L18,22c1.1,0 2,-0.9 2,-2L20,8l-6,-6L6,2zM13,9L13,3.5L18.5,9L13,9z"/>
-</vector>

vector/src/main/res/drawable/ic_attachment_gallery.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M20.5034,20.0373L20.8729,19.5428L20.383,19.1672L8.7444,10.2443C8.2017,9.8282 7.4428,9.8451 6.9192,10.285L3.2647,13.3548L3.0417,13.5421V13.8333V18.6667C3.0417,19.9323 4.0677,20.9583 5.3333,20.9583H18.6667C19.419,20.9583 20.0866,20.5952 20.5034,20.0373ZM2.625,5.3333C2.625,3.8376 3.8376,2.625 5.3333,2.625H18.6667C20.1624,2.625 21.375,3.8376 21.375,5.3333V18.6667C21.375,20.1624 20.1624,21.375 18.6667,21.375H5.3333C3.8376,21.375 2.625,20.1624 2.625,18.6667V5.3333ZM13.875,8.25C13.875,9.7458 15.0876,10.9583 16.5833,10.9583C16.9896,10.9583 17.3765,10.8685 17.724,10.707C18.6485,10.2772 19.2917,9.3393 19.2917,8.25C19.2917,6.7542 18.0791,5.5417 16.5833,5.5417C15.0876,5.5417 13.875,6.7542 13.875,8.25Z"
+      android:strokeWidth="1.25"
+      android:fillColor="#0DBD8B"
+      android:strokeColor="#0DBD8B"
+      android:strokeLineCap="round"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_gallery_white_24dp.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
-    <path android:fillColor="#FFFFFF" android:pathData="M21,19V5c0,-1.1 -0.9,-2 -2,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2zM8.5,13.5l2.5,3.01L14.5,12l4.5,6H5l3.5,-4.5z"/>
-</vector>

vector/src/main/res/drawable/ic_attachment_location.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,2C8.13,2 5,5.2152 5,9.1905C5,13.4741 9.42,19.3806 11.24,21.6302C11.64,22.1233 12.37,22.1233 12.77,21.6302C14.58,19.3806 19,13.4741 19,9.1905C19,5.2152 15.87,2 12,2ZM12,11.7586C10.62,11.7586 9.5,10.6081 9.5,9.1905C9.5,7.773 10.62,6.6225 12,6.6225C13.38,6.6225 14.5,7.773 14.5,9.1905C14.5,10.6081 13.38,11.7586 12,11.7586Z"
+      android:fillColor="#0DBD8B"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_poll.xml

@@ -5,6 +5,6 @@
     android:viewportHeight="24">
   <path
       android:pathData="M10.5,2C10.2239,2 10,2.2239 10,2.5V22H14V2.5C14,2.2239 13.7761,2 13.5,2H10.5ZM3,9.5C3,9.2239 3.2239,9 3.5,9H6.5C6.7761,9 7,9.2239 7,9.5V22H3V9.5ZM17,13.5C17,13.2239 17.2239,13 17.5,13H20.5C20.7761,13 21,13.2239 21,13.5V22H17V13.5Z"
-      android:fillColor="#FFFFFF"
+      android:fillColor="#0DBD8B"
       android:fillType="evenOdd"/>
 </vector>

vector/src/main/res/drawable/ic_attachment_sticker.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M10.1479,21.321C5.7873,20.4596 2.4987,16.6135 2.4987,12C2.4987,6.7526 6.7526,2.4987 12,2.4987C16.6316,2.4987 20.4897,5.8131 21.331,10.1992C18.2322,9.4198 14.864,10.147 12.4944,12.5383C10.1572,14.8967 9.4261,18.2332 10.1479,21.321ZM20.2524,13.0424L12.9933,20.3015C12.6064,18.222 13.1681,16.1257 14.6151,14.6655C16.0754,13.1918 18.176,12.6299 20.2524,13.0424Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="0.997378"
+      android:fillColor="#0DBD8B"
+      android:strokeColor="#0DBD8B"
+      android:strokeLineCap="round"/>
+</vector>

vector/src/main/res/layout/view_attachment_type_selector.xml

@@ -1,199 +1,109 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:paddingStart="8dp"
-    android:paddingEnd="8dp">
+    android:background="?android:colorBackground"
+    android:paddingTop="12dp"
+    android:paddingBottom="12dp">
 
-    <LinearLayout
-        android:layout_width="match_parent"
+    <ImageButton
+        android:id="@+id/attachmentCloseButton"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:background="@drawable/bg_attachment_type_selector"
-        android:orientation="vertical"
-        android:paddingTop="16dp"
-        android:paddingBottom="16dp"
-        tools:ignore="UselessParent">
+        android:layout_marginStart="12dp"
+        android:background="@drawable/circle"
+        android:contentDescription="@string/action_close"
+        android:src="@drawable/ic_attachment_close"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <HorizontalScrollView
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="24dp"
+        android:scrollbars="none"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/attachmentCloseButton"
+        app:layout_constraintTop_toTopOf="parent">
 
         <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_margin="16dp"
-            android:baselineAligned="false"
-            android:orientation="horizontal"
-            android:weightSum="3">
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"
+            android:gravity="center_vertical"
+            android:orientation="horizontal">
 
-            <LinearLayout
-                android:id="@+id/attachmentCameraButtonContainer"
-                android:layout_width="match_parent"
+            <ImageButton
+                android:id="@+id/attachmentGalleryButton"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:gravity="center"
-                android:orientation="vertical">
+                android:background="?android:attr/selectableItemBackground"
+                android:contentDescription="@string/attachment_type_gallery"
+                android:src="@drawable/ic_attachment_gallery" />
 
-                <ImageButton
-                    android:id="@+id/attachmentCameraButton"
-                    style="@style/AttachmentTypeSelectorButton"
-                    android:contentDescription="@string/attachment_type_camera"
-                    android:src="@drawable/ic_attachment_camera_white_24dp"
-                    tools:background="?colorPrimary" />
-
-                <TextView
-                    style="@style/AttachmentTypeSelectorLabel"
-                    android:importantForAccessibility="no"
-                    android:text="@string/attachment_type_camera" />
-
-            </LinearLayout>
-
-            <LinearLayout
-                android:id="@+id/attachmentGalleryButtonContainer"
-                android:layout_width="match_parent"
+            <ImageButton
+                android:id="@+id/attachmentStickersButton"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:gravity="center"
-                android:orientation="vertical">
+                android:layout_marginStart="24dp"
+                android:background="?android:attr/selectableItemBackground"
+                android:contentDescription="@string/attachment_type_sticker"
+                android:src="@drawable/ic_attachment_sticker" />
 
-                <ImageButton
-                    android:id="@+id/attachmentGalleryButton"
-                    style="@style/AttachmentTypeSelectorButton"
-                    android:contentDescription="@string/attachment_type_gallery"
-                    android:src="@drawable/ic_attachment_gallery_white_24dp"
-                    tools:background="?colorPrimary" />
-
-                <TextView
-                    style="@style/AttachmentTypeSelectorLabel"
-                    android:importantForAccessibility="no"
-                    android:text="@string/attachment_type_gallery" />
-
-            </LinearLayout>
-
-            <LinearLayout
-                android:id="@+id/attachmentFileButtonContainer"
-                android:layout_width="match_parent"
+            <ImageButton
+                android:id="@+id/attachmentFileButton"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:gravity="center"
-                android:orientation="vertical">
+                android:layout_marginStart="24dp"
+                android:background="?android:attr/selectableItemBackground"
+                android:contentDescription="@string/attachment_type_file"
+                android:src="@drawable/ic_attachment_file" />
 
-                <ImageButton
-                    android:id="@+id/attachmentFileButton"
-                    style="@style/AttachmentTypeSelectorButton"
-                    android:contentDescription="@string/attachment_type_file"
-                    android:src="@drawable/ic_attachment_file_white_24dp"
-                    tools:background="?colorPrimary" />
+            <ImageButton
+                android:id="@+id/attachmentPollButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="24dp"
+                android:background="?android:attr/selectableItemBackground"
+                android:contentDescription="@string/attachment_type_poll"
+                android:src="@drawable/ic_attachment_poll" />
 
-                <TextView
-                    style="@style/AttachmentTypeSelectorLabel"
-                    android:importantForAccessibility="no"
-                    android:text="@string/attachment_type_file" />
+            <ImageButton
+                android:id="@+id/attachmentCameraButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="24dp"
+                android:background="?android:attr/selectableItemBackground"
+                android:contentDescription="@string/attachment_type_camera"
+                android:src="@drawable/ic_attachment_camera" />
 
-            </LinearLayout>
+            <!-- TODO. Request for new icon and remove tint color later -->
+            <ImageButton
+                android:id="@+id/attachmentAudioButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="24dp"
+                android:background="?android:attr/selectableItemBackground"
+                android:contentDescription="@string/attachment_type_audio"
+                android:src="@drawable/ic_attachment_audio_white_24dp"
+                app:tint="?colorPrimary" />
+
+            <!-- TODO. Request for new icon and remove tint color later -->
+            <ImageButton
+                android:id="@+id/attachmentContactButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="24dp"
+                android:background="?android:attr/selectableItemBackground"
+                android:contentDescription="@string/attachment_type_contact"
+                android:src="@drawable/ic_attachment_contact_white_24dp"
+                app:tint="?colorPrimary" />
 
         </LinearLayout>
+    </HorizontalScrollView>
 
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_margin="16dp"
-            android:baselineAligned="false"
-            android:orientation="horizontal"
-            android:weightSum="3">
 
-            <LinearLayout
-                android:id="@+id/attachmentAudioButtonContainer"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:gravity="center"
-                android:orientation="vertical">
-
-                <ImageButton
-                    android:id="@+id/attachmentAudioButton"
-                    style="@style/AttachmentTypeSelectorButton"
-                    android:contentDescription="@string/attachment_type_audio"
-                    android:src="@drawable/ic_attachment_audio_white_24dp"
-                    tools:background="?colorPrimary" />
-
-                <TextView
-                    style="@style/AttachmentTypeSelectorLabel"
-                    android:importantForAccessibility="no"
-                    android:text="@string/attachment_type_audio" />
-
-            </LinearLayout>
-
-            <LinearLayout
-                android:id="@+id/attachmentContactButtonContainer"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:gravity="center"
-                android:orientation="vertical">
-
-                <ImageButton
-                    android:id="@+id/attachmentContactButton"
-                    style="@style/AttachmentTypeSelectorButton"
-                    android:contentDescription="@string/attachment_type_contact"
-                    android:src="@drawable/ic_attachment_contact_white_24dp"
-                    tools:background="?colorPrimary" />
-
-                <TextView
-                    style="@style/AttachmentTypeSelectorLabel"
-                    android:importantForAccessibility="no"
-                    android:text="@string/attachment_type_contact" />
-
-            </LinearLayout>
-
-            <LinearLayout
-                android:id="@+id/attachmentStickersButtonContainer"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:gravity="center"
-                android:orientation="vertical">
-
-                <ImageButton
-                    android:id="@+id/attachmentStickersButton"
-                    style="@style/AttachmentTypeSelectorButton"
-                    android:contentDescription="@string/attachment_type_sticker"
-                    android:src="@drawable/ic_attachment_stickers_white_24dp"
-                    tools:background="?colorPrimary" />
-
-                <TextView
-                    style="@style/AttachmentTypeSelectorLabel"
-                    android:importantForAccessibility="no"
-                    android:text="@string/attachment_type_sticker" />
-
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_margin="16dp"
-            android:baselineAligned="false"
-            android:orientation="horizontal"
-            android:weightSum="3">
-
-            <LinearLayout
-                android:id="@+id/attachmentPollButtonContainer"
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:gravity="center"
-                android:orientation="vertical">
-
-                <ImageButton
-                    android:id="@+id/attachmentPollButton"
-                    style="@style/AttachmentTypeSelectorButton"
-                    android:contentDescription="@string/attachment_type_poll"
-                    android:src="@drawable/ic_attachment_poll_white_24dp"
-                    tools:background="?colorPrimary" />
-
-                <TextView
-                    style="@style/AttachmentTypeSelectorLabel"
-                    android:importantForAccessibility="no"
-                    android:text="@string/attachment_type_poll" />
-            </LinearLayout>
-        </LinearLayout>
-    </LinearLayout>
-</FrameLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>