chatView: refactor bubble border

- Remove unecessary constraint layout
- Use drawable instead

GitLab: #1563
GitLab: #1561
GitLab: #1562
GitLab: #1581

Change-Id: I7cfbed057a4ff3ca5d0bcf6d9315f39981d5ca79

jami-android/app/src/main/java/cx/ring/adapters/ConversationAdapter.kt

@@ -28,6 +28,7 @@ import android.graphics.Color
 import android.graphics.SurfaceTexture
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.GradientDrawable
+import android.graphics.drawable.LayerDrawable
 import android.media.MediaPlayer
 import android.net.Uri
 import android.text.format.DateUtils
@@ -1250,11 +1251,11 @@ class ConversationAdapter(
      * ResIndex indicates how is considered the message (first, single, last, etc.).
      */
     private fun updateMessageBackground(
-        context: Context, messageBubble: View, messageBubbleBorder: View,
+        context: Context, messageBubble: View,
         messageSequenceType: SequenceType,
         isOnlyEmoji: Boolean, isReplying: Boolean, isDeleted: Boolean, isIncoming: Boolean,
     ) {
-        if (isOnlyEmoji) messageBubble.background = null
+        if (isOnlyEmoji && !isReplying) messageBubble.background = null
         else {
             // Manage layout for standard message. Index refers to msgBGLayouts array.
             val resIndex =
@@ -1268,10 +1269,14 @@ class ConversationAdapter(
                 else messageSequenceType.ordinal + (if (isIncoming) 1 else 0) * 4
 
             messageBubble.background = ContextCompat.getDrawable(context, msgBGLayouts[resIndex])
-            if (isReplying && !isDeleted) messageBubbleBorder.background =
-                ContextCompat.getDrawable(context, msgBGLayouts[resIndex])
 
-            if (convColor != 0 && !isIncoming) messageBubble.background?.setTint(convColor)
+            if (isReplying && convColor != 0 && !isDeleted && !isIncoming) {
+                // Drawable is a layer list. Only need to change the color of the main bubble.
+                (messageBubble.background as LayerDrawable).apply {
+                    (findDrawableByLayerId(R.id.main_bubble) as GradientDrawable)
+                        .setColor(convColor)
+                }
+            } else if (convColor != 0 && !isIncoming) messageBubble.background?.setTint(convColor)
         }
     }
 
@@ -1281,12 +1286,12 @@ class ConversationAdapter(
      */
     private fun updateMessageLeftMargin(
         context: Context,
-        messageBubbleBorder: View, replyBubble: View?,
+        messageBubble: View, replyBubble: View?,
         isGroup: Boolean, isIncoming: Boolean
     ) {
         if (isGroup && isIncoming) {
             context.resources.getDimensionPixelSize(R.dimen.conditional_left_conversation_margin).let {
-                (messageBubbleBorder.layoutParams as MarginLayoutParams)
+                (messageBubble.layoutParams as MarginLayoutParams)
                     .apply { leftMargin = it }
                 replyBubble?.let { replyBubble ->
                     (replyBubble.layoutParams as MarginLayoutParams)
@@ -1295,7 +1300,7 @@ class ConversationAdapter(
             }
         } else {
             context.resources.getDimensionPixelSize(R.dimen.base_left_conversation_margin).let {
-                (messageBubbleBorder.layoutParams as MarginLayoutParams)
+                (messageBubble.layoutParams as MarginLayoutParams)
                     .apply { leftMargin = it }
                 replyBubble?.let { replyBubble ->
                     (replyBubble.layoutParams as MarginLayoutParams)
@@ -1324,10 +1329,10 @@ class ConversationAdapter(
         val contact = textMessage.contact ?: return
         val isDeleted = textMessage.body.isNullOrEmpty()
         val isEdited = interaction.history.size > 1
+        val isReplying = interaction.replyToId != null
 
         val messageContent = convViewHolder.mMessageContent ?: return
         val messageBubble = convViewHolder.mMessageBubble ?: return
-        val messageBubbleBorder = convViewHolder.mMessageBubbleBorder ?: return
         val replyBubble = convViewHolder.mReplyBubble
         val answerLayout = convViewHolder.mAnswerLayout
         val peerDisplayName = convViewHolder.mPeerDisplayName
@@ -1359,28 +1364,24 @@ class ConversationAdapter(
 
         // If in a replying bubble, we need to overlap the message bubble
         // with the answered message bubble.
-        if (textMessage.replyToId != null) {
-            val paddingInDp = (1.5 * context.resources.displayMetrics.density).toInt()
-            messageBubbleBorder.setPadding(paddingInDp, paddingInDp, 0, 0)
-            messageBubbleBorder.updateLayoutParams<MarginLayoutParams> {
+        if (textMessage.replyToId != null)
+            messageBubble.updateLayoutParams<MarginLayoutParams> {
                 topMargin = context.resources
                     .getDimensionPixelSize(R.dimen.conversation_reply_overlap)
             }
-        } else {
-            messageBubbleBorder.setPadding(0, 0, 0, 0)
-            messageBubbleBorder.updateLayoutParams<MarginLayoutParams> { topMargin = 0 }
-        }
+        else messageBubble.updateLayoutParams<MarginLayoutParams> { topMargin = 0 }
+
         // Manage the background of the message bubble.
         updateMessageBackground(
-            context, messageBubble, messageBubbleBorder, msgSequenceType,
+            context, messageBubble, msgSequenceType,
             isOnlyEmoji = StringUtils.isOnlyEmoji(message),
-            isReplying = interaction.replyTo != null,
+            isReplying = isReplying,
             isDeleted = isDeleted,
             isIncoming = textMessage.isIncoming
         )
         // Manage the left margin of the message bubble.
         updateMessageLeftMargin(
-            context, messageBubbleBorder, replyBubble,
+            context, messageBubble, replyBubble,
             isGroup = presenter.isGroup(),
             isIncoming = textMessage.isIncoming
         )
@@ -1403,7 +1404,7 @@ class ConversationAdapter(
 
         // Manage the message content.
         answerLayout?.visibility = View.GONE
-        if (StringUtils.isOnlyEmoji(message)) {
+        if (StringUtils.isOnlyEmoji(message) && !isReplying) {
             messageContent.updateEmoji(message, messageTime, isEdited)
         } else {
             messageContent.updateStandard(

jami-android/app/src/main/java/cx/ring/viewholders/ConversationViewHolder.kt

@@ -100,7 +100,6 @@ class ConversationViewHolder(v: ViewGroup, val type: MessageType) : RecyclerView
     }
     var mMessageBubble: ConstraintLayout? = null
     var mMessageLayout: ConstraintLayout? = null
-    var mMessageBubbleBorder: FrameLayout? = null
     var mMessageContent: CustomMessageBubble? = null
     var mReplyBubble: LinearLayout? = null
     var mReplyName: TextView? = null
@@ -204,7 +203,6 @@ class ConversationViewHolder(v: ViewGroup, val type: MessageType) : RecyclerView
                 mReplyTxt = v.findViewById(R.id.reply_text)
                 mMsgTxt = v.findViewById(R.id.msg_txt)
                 mMessageBubble = v.findViewById(R.id.message_bubble)
-                mMessageBubbleBorder = v.findViewById(R.id.message_bubble_border)
                 mMessageLayout = v.findViewById(R.id.message_layout)
                 mMessageContent = v.findViewById(R.id.message_content)
                 mMsgDetailTxt = v.findViewById(R.id.msg_details_txt)

jami-android/app/src/main/res/drawable/textmsg_bg_in_reply.xml

 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <solid android:color="@color/conversation_secondary_background" />
-
-    <corners android:radius="@dimen/conversation_message_radius"
-        android:topRightRadius="@dimen/conversation_message_minor_radius"
-        />
+    <item>
+        <shape>
+            <solid android:color="@color/background" />
+            <corners
+                android:radius="@dimen/conversation_message_radius"
+                android:topRightRadius="@dimen/conversation_message_minor_radius" />
+        </shape>
+    </item>
 
+    <item
+        android:id="@+id/main_bubble"
+        android:end="1.5dp"
+        android:top="1.5dp">
+        <shape>
+            <solid android:color="@color/conversation_secondary_background" />
+            <corners
+                android:radius="@dimen/conversation_message_radius"
+                android:topRightRadius="@dimen/conversation_message_minor_radius" />
         </shape>
+    </item>
+
+</layer-list>
\ No newline at end of file

jami-android/app/src/main/res/drawable/textmsg_bg_in_reply_first.xml

 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <solid android:color="@color/conversation_secondary_background" />
-
-    <corners android:radius="@dimen/conversation_message_radius"
-        android:topRightRadius="@dimen/conversation_message_minor_radius"
+    <item>
+        <shape>
+            <solid android:color="@color/background" />
+            <corners
                 android:bottomLeftRadius="@dimen/conversation_message_minor_radius"
-        />
+                android:radius="@dimen/conversation_message_radius"
+                android:topRightRadius="@dimen/conversation_message_minor_radius" />
+        </shape>
+    </item>
 
+    <item
+        android:id="@+id/main_bubble"
+        android:end="1.5dp"
+        android:top="1.5dp">
+        <shape>
+            <solid android:color="@color/conversation_secondary_background" />
+            <corners
+                android:bottomLeftRadius="@dimen/conversation_message_minor_radius"
+                android:radius="@dimen/conversation_message_radius"
+                android:topRightRadius="@dimen/conversation_message_minor_radius" />
         </shape>
+    </item>
+
+</layer-list>
\ No newline at end of file

jami-android/app/src/main/res/drawable/textmsg_bg_out_reply.xml

 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <solid android:color="@color/conversation_primary_background" />
-
-    <corners android:radius="@dimen/conversation_message_radius"
-        android:topLeftRadius="@dimen/conversation_message_minor_radius"
-        />
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
+    <item>
+        <shape>
+            <solid android:color="@color/background" />
+            <corners
+                android:radius="@dimen/conversation_message_radius"
+                android:topLeftRadius="@dimen/conversation_message_minor_radius" />
+        </shape>
+    </item>
 
+    <item
+        android:id="@+id/main_bubble"
+        android:start="1.5dp"
+        android:top="1.5dp">
+        <shape>
+            <solid android:color="@color/conversation_primary_background" />
+            <corners
+                android:radius="@dimen/conversation_message_radius"
+                android:topLeftRadius="@dimen/conversation_message_minor_radius" />
         </shape>
+    </item>
+
+</layer-list>
\ No newline at end of file

jami-android/app/src/main/res/drawable/textmsg_bg_out_reply_first.xml

 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <solid android:color="@color/conversation_primary_background" />
-
-    <corners android:radius="@dimen/conversation_message_radius"
-        android:topLeftRadius="@dimen/conversation_message_minor_radius"
+    <item>
+        <shape>
+            <solid android:color="@color/background" />
+            <corners
                 android:bottomRightRadius="@dimen/conversation_message_minor_radius"
-        />
-
+                android:radius="@dimen/conversation_message_radius"
+                android:topLeftRadius="@dimen/conversation_message_minor_radius" />
+        </shape>
+    </item>
 
+    <item
+        android:id="@+id/main_bubble"
+        android:start="1.5dp"
+        android:top="1.5dp">
+        <shape>
+            <solid android:color="@color/conversation_primary_background" />
+            <corners
+                android:bottomRightRadius="@dimen/conversation_message_minor_radius"
+                android:radius="@dimen/conversation_message_radius"
+                android:topLeftRadius="@dimen/conversation_message_minor_radius" />
         </shape>
+    </item>
+
+</layer-list>
\ No newline at end of file

jami-android/app/src/main/res/layout/item_conv_msg_me.xml

@@ -105,17 +105,14 @@ along with this program; if not, write to the Free Software
 
         </LinearLayout>
 
-        <FrameLayout
-            android:id="@+id/message_bubble_border"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/message_bubble"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="-8dp"
+            android:layout_gravity="end"
+            android:layout_marginTop="-6.5dp"
             android:layout_marginEnd="@dimen/conversation_me_margin_end"
-            android:background="@drawable/textmsg_bg_out"
-            android:backgroundTint="@color/background"
-            android:paddingStart="1.5dp"
-            android:paddingTop="1.5dp"
-            android:paddingEnd="0dp"
+            android:background="@drawable/textmsg_bg_out_reply"
             android:paddingBottom="0dp"
             app:layout_constrainedWidth="true"
             app:layout_constraintEnd_toEndOf="parent"
@@ -123,13 +120,6 @@ along with this program; if not, write to the Free Software
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/reply_bubble">
 
-            <androidx.constraintlayout.widget.ConstraintLayout
-                android:id="@+id/message_bubble"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="end"
-                android:background="@drawable/textmsg_bg_out">
-
             <cx.ring.views.CustomMessageBubble
                 android:id="@+id/message_content"
                 android:layout_width="wrap_content"
@@ -154,14 +144,12 @@ along with this program; if not, write to the Free Software
 
         </androidx.constraintlayout.widget.ConstraintLayout>
 
-        </FrameLayout>
-
         <cx.ring.views.MessageStatusView
             android:id="@+id/status_icon"
             android:layout_width="@dimen/conversation_status_icon_size"
             android:layout_height="@dimen/conversation_status_icon_size"
             android:layout_marginHorizontal="5dp"
-            app:layout_constraintBottom_toBottomOf="@id/message_bubble_border"
+            app:layout_constraintBottom_toBottomOf="@id/message_bubble"
             app:layout_constraintEnd_toEndOf="parent"
             tools:background="@color/purple_300"
             tools:layout_height="@dimen/conversation_status_icon_size"
@@ -171,7 +159,7 @@ along with this program; if not, write to the Free Software
             android:id="@+id/reaction_chip"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="-6dp"
+            android:layout_marginTop="-4dp"
             android:layout_marginEnd="8dp"
             android:background="@drawable/background_reaction_chip"
             android:lines="1"
@@ -179,8 +167,8 @@ along with this program; if not, write to the Free Software
             android:outlineProvider="none"
             android:padding="5dp"
             android:singleLine="true"
-            app:layout_constraintEnd_toEndOf="@id/message_bubble_border"
-            app:layout_constraintTop_toBottomOf="@id/message_bubble_border"
+            app:layout_constraintEnd_toEndOf="@id/message_bubble"
+            app:layout_constraintTop_toBottomOf="@id/message_bubble"
             tools:text="👍 😍 3" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>

jami-android/app/src/main/res/layout/item_conv_msg_peer.xml

@@ -79,7 +79,7 @@ along with this program; if not, write to the Free Software
             android:id="@+id/reply_bubble"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/conditional_left_conversation_margin"
+            android:layout_marginStart="@dimen/base_left_conversation_margin"
             android:layout_marginEnd="70dp"
             android:background="@drawable/textmsg_bg_in"
             android:backgroundTint="@color/conversation_secondary_background"
@@ -124,32 +124,20 @@ along with this program; if not, write to the Free Software
 
         </LinearLayout>
 
-        <FrameLayout
-            android:id="@+id/message_bubble_border"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/message_bubble"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_gravity="start"
             android:layout_marginStart="@dimen/base_left_conversation_margin"
-            android:layout_marginTop="-8dp"
-            android:background="@drawable/textmsg_bg_in"
-            android:backgroundTint="@color/background"
-            android:gravity="start"
-            android:paddingStart="0dp"
-            android:paddingTop="1.5dp"
-            android:paddingEnd="1.5dp"
-            android:paddingBottom="0dp"
+            android:layout_marginTop="-6.5dp"
+            android:background="@drawable/textmsg_bg_in_reply"
             app:layout_constrainedWidth="true"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0"
             app:layout_constraintStart_toEndOf="@id/photo"
             app:layout_constraintTop_toBottomOf="@id/reply_bubble">
 
-            <androidx.constraintlayout.widget.ConstraintLayout
-                android:id="@+id/message_bubble"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="start"
-                android:background="@drawable/textmsg_bg_in">
-
             <cx.ring.views.CustomMessageBubble
                 android:id="@+id/message_content"
                 android:layout_width="wrap_content"
@@ -174,22 +162,20 @@ along with this program; if not, write to the Free Software
 
         </androidx.constraintlayout.widget.ConstraintLayout>
 
-        </FrameLayout>
-
         <TextView
             android:id="@+id/reaction_chip"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="8dp"
-            android:layout_marginTop="-6dp"
+            android:layout_marginTop="-4dp"
             android:background="@drawable/background_reaction_chip"
             android:lines="1"
             android:maxLines="1"
             android:outlineProvider="none"
             android:padding="5dp"
             android:singleLine="true"
-            app:layout_constraintStart_toStartOf="@id/message_bubble_border"
-            app:layout_constraintTop_toBottomOf="@id/message_bubble_border"
+            app:layout_constraintStart_toStartOf="@id/message_bubble"
+            app:layout_constraintTop_toBottomOf="@id/message_bubble"
             tools:text="🤕🤒3" />
 
         <ImageView
@@ -198,7 +184,7 @@ along with this program; if not, write to the Free Software
             android:layout_height="@dimen/conversation_avatar_size"
             android:layout_marginStart="@dimen/base_left_conversation_margin"
             android:contentDescription="@null"
-            app:layout_constraintBottom_toBottomOf="@id/message_bubble_border"
+            app:layout_constraintBottom_toBottomOf="@id/message_bubble"
             app:layout_constraintStart_toStartOf="parent"
             tools:srcCompat="@color/blue_200"
             tools:visibility="gone" />

jami-android/app/src/main/res/values/dimens.xml

@@ -142,7 +142,7 @@ along with this program; if not, write to the Free Software
     <dimen name="reaction_chip_background_radius">5dp</dimen>
     <dimen name="message_reaction_stroke">2dp</dimen>
     <dimen name="conversation_text_size_small">12sp</dimen>
-    <dimen name="conversation_reply_overlap">-8dp</dimen>
+    <dimen name="conversation_reply_overlap">-6.5dp</dimen>
 
     <!--Text size-->
     <dimen name="text_size_small">13sp</dimen>