Added the updated delivery status UI

app/src/main/java/org/thoughtcrime/securesms/conversation/v2/messages/VisibleMessageView.kt

@@ -190,7 +190,14 @@ class VisibleMessageView : LinearLayout {
         binding.dateBreakTextView.text = if (showDateBreak) DateUtils.getDisplayFormattedTimeSpanString(context, Locale.getDefault(), message.timestamp) else null
         binding.dateBreakTextView.isVisible = showDateBreak
         // Message status indicator
-        val (iconID, iconColor) = getMessageStatusImage(message)
+        val (iconID, iconColor, textId) = getMessageStatusImage(message)
+        if (textId != null) {
+            binding.messageStatusTextView.setText(textId)
+
+            if (iconColor != null) {
+                binding.messageStatusTextView.setTextColor(iconColor)
+            }
+        }
         if (iconID != null) {
             val drawable = ContextCompat.getDrawable(context, iconID)?.mutate()
             if (iconColor != null) {
@@ -200,9 +207,12 @@ class VisibleMessageView : LinearLayout {
         }
         if (message.isOutgoing) {
             val lastMessageID = mmsSmsDb.getLastMessageID(message.threadId)
+            binding.messageStatusTextView.isVisible =
+                !message.isSent || message.id == lastMessageID
             binding.messageStatusImageView.isVisible =
                 !message.isSent || message.id == lastMessageID
         } else {
+            binding.messageStatusTextView.isVisible = false
             binding.messageStatusImageView.isVisible = false
         }
         // Expiration timer
@@ -256,13 +266,17 @@ class VisibleMessageView : LinearLayout {
         }
     }
 
-    private fun getMessageStatusImage(message: MessageRecord): Pair<Int?,Int?> {
+    private fun getMessageStatusImage(message: MessageRecord): Triple<Int?,Int?,Int?> {
         return when {
-            !message.isOutgoing -> null to null
-            message.isFailed -> R.drawable.ic_error to resources.getColor(R.color.destructive, context.theme)
-            message.isPending -> R.drawable.ic_circle_dot_dot_dot to null
-            message.isRead -> R.drawable.ic_filled_circle_check to null
-            else -> R.drawable.ic_circle_check to null
+            !message.isOutgoing -> Triple(null, null, null)
+            message.isFailed ->
+                Triple(R.drawable.ic_delivery_status_failed, resources.getColor(R.color.destructive, context.theme), R.string.delivery_status_failed)
+            message.isPending ->
+                Triple(R.drawable.ic_delivery_status_sending, context.getColorFromAttr(R.attr.message_status_color), R.string.delivery_status_sending)
+            message.isRead ->
+                Triple(R.drawable.ic_delivery_status_read, context.getColorFromAttr(R.attr.message_status_color), R.string.delivery_status_read)
+            else ->
+                Triple(R.drawable.ic_delivery_status_sent, context.getColorFromAttr(R.attr.message_status_color), R.string.delivery_status_sent)
         }
     }
 

app/src/main/res/layout/view_visible_message.xml

@@ -21,16 +21,11 @@
         android:id="@+id/mainContainer"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/small_spacing"
+        android:layout_marginEnd="@dimen/small_spacing"
         android:gravity="bottom"
         android:paddingBottom="@dimen/small_spacing">
 
-        <View
-            android:id="@+id/startSpacing"
-            android:layout_width="8dp"
-            android:layout_height="1dp"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintStart_toStartOf="parent" />
-
         <include
             android:id="@+id/profilePictureView"
             layout="@layout/view_profile_picture"
@@ -41,7 +36,7 @@
             android:layout_gravity="center"
             app:layout_constraintEnd_toStartOf="@+id/messageInnerContainer"
             app:layout_constraintBottom_toBottomOf="@id/messageInnerContainer"
-            app:layout_constraintStart_toEndOf="@+id/startSpacing"
+            app:layout_constraintStart_toStartOf="parent"
             tools:visibility="visible" />
 
         <ImageView
@@ -77,8 +72,8 @@
             android:layout_height="wrap_content"
             android:orientation="horizontal"
             app:layout_constraintBottom_toBottomOf="@+id/profilePictureView"
-            app:layout_constraintEnd_toStartOf="@+id/messageTimestampContainer"
             app:layout_constraintStart_toEndOf="@+id/profilePictureView"
+            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/senderNameTextView">
 
             <org.thoughtcrime.securesms.conversation.v2.messages.VisibleMessageContentView
@@ -109,27 +104,32 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:visibility="gone"
-            app:layout_constraintEnd_toStartOf="@+id/messageTimestampContainer"
+            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="@+id/messageInnerContainer"
             app:layout_constraintTop_toBottomOf="@id/messageInnerContainer" />
 
-        <RelativeLayout
-            android:id="@+id/messageTimestampContainer"
-            android:layout_width="@dimen/medium_spacing"
+        <TextView
+            android:id="@+id/messageStatusTextView"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintBottom_toBottomOf="@+id/messageInnerContainer">
-
-            <ImageView
-                android:id="@+id/messageStatusImageView"
-                android:layout_width="16dp"
-                android:layout_height="16dp"
-                android:layout_alignParentEnd="true"
-                android:layout_centerVertical="true"
-                android:padding="2dp"
-                android:src="@drawable/ic_delivery_status_sent" />
+            android:layout_marginEnd="2dp"
+            android:layout_marginBottom="1dp"
+            app:layout_constraintTop_toTopOf="@id/messageStatusImageView"
+            app:layout_constraintBottom_toBottomOf="@id/messageStatusImageView"
+            app:layout_constraintEnd_toStartOf="@id/messageStatusImageView"
+            android:textSize="@dimen/very_small_font_size"
+            android:textColor="@color/classic_dark_1"
+            tools:text="Sent" />
 
-        </RelativeLayout>
+        <ImageView
+            android:id="@+id/messageStatusImageView"
+            android:layout_width="12dp"
+            android:layout_height="12dp"
+            android:layout_marginTop="5dp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/emojiReactionsView"
+            tools:tint="@color/classic_dark_1"
+            android:src="@drawable/ic_delivery_status_sent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 

app/src/main/res/values/attrs.xml

@@ -164,6 +164,7 @@
     <attr name="message_received_text_color" format="color|reference" />
     <attr name="message_sent_background_color" format="color|reference" />
     <attr name="message_sent_text_color" format="color|reference" />
+    <attr name="message_status_color" format="color|reference" />
     <attr name="input_bar_background" format="color|reference"/>
     <attr name="input_bar_text_hint" format="color|reference"/>
     <attr name="input_bar_text_user" format="color|reference"/>

app/src/main/res/values/strings.xml

@@ -864,4 +864,8 @@
     <string name="fragment_enter_community_url_join_button_title">Join</string>
     <string name="new_conversation_dialog_back_button_content_description">Navigate Back</string>
     <string name="new_conversation_dialog_close_button_content_description">Close Dialog</string>
+    <string name="delivery_status_sending">Sending</string>
+    <string name="delivery_status_read">Read</string>
+    <string name="delivery_status_sent">Sent</string>
+    <string name="delivery_status_failed">Failed to send</string>
 </resources>

app/src/main/res/values/themes.xml

@@ -370,6 +370,7 @@
         <item name="message_received_text_color">@color/classic_dark_6</item>
         <item name="message_sent_background_color">?colorAccent</item>
         <item name="message_sent_text_color">@color/classic_dark_0</item>
+        <item name="message_status_color">@color/classic_dark_5</item>
         <item name="input_bar_background">@color/classic_dark_1</item>
         <item name="input_bar_text_hint">@color/classic_dark_5</item>
         <item name="input_bar_text_user">@color/classic_dark_6</item>
@@ -454,6 +455,7 @@
         <item name="message_received_text_color">@color/classic_light_0</item>
         <item name="message_sent_background_color">?colorAccent</item>
         <item name="message_sent_text_color">@color/classic_light_0</item>
+        <item name="message_status_color">@color/classic_light_1</item>
         <item name="input_bar_background">@color/classic_light_6</item>
         <item name="input_bar_text_hint">@color/classic_light_1</item>
         <item name="input_bar_text_user">@color/classic_light_0</item>
@@ -535,6 +537,7 @@
         <item name="message_received_text_color">@color/ocean_dark_6</item>
         <item name="message_sent_background_color">?colorAccent</item>
         <item name="message_sent_text_color">@color/ocean_dark_0</item>
+        <item name="message_status_color">@color/ocean_dark_5</item>
         <item name="input_bar_background">@color/ocean_dark_1</item>
         <item name="input_bar_text_hint">@color/ocean_dark_5</item>
         <item name="input_bar_text_user">@color/ocean_dark_6</item>
@@ -618,6 +621,7 @@
         <item name="message_received_text_color">@color/ocean_light_0</item>
         <item name="message_sent_background_color">?colorAccent</item>
         <item name="message_sent_text_color">@color/ocean_light_0</item>
+        <item name="message_status_color">@color/ocean_light_2</item>
         <item name="input_bar_background">@color/ocean_light_6</item>
         <item name="input_bar_text_hint">@color/ocean_light_1</item>
         <item name="input_bar_text_user">@color/ocean_light_0</item>