chatview: implement image layout new design

GitLab: #1499
Change-Id: I0384b4f1c06b3bcef3647ab2dc5456cf86f85527

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

@@ -1158,7 +1158,14 @@ class ConversationAdapter(
 
         val isMessageSeparationNeeded = isMessageSeparationNeeded(isDateShown, position)
         when (type) {
-            MessageType.TransferType.IMAGE -> { configureImage(viewHolder, path, file.body) }
+            MessageType.TransferType.IMAGE -> {
+                // Add margin if message need to be separated.
+                viewHolder.mAnswerLayout?.updateLayoutParams<MarginLayoutParams> {
+                    topMargin = if (!isMessageSeparationNeeded) 0 else context.resources
+                        .getDimensionPixelSize(R.dimen.conversation_message_separation)
+                }
+                configureImage(viewHolder, path, file.body)
+            }
             MessageType.TransferType.VIDEO -> { configureVideo(viewHolder, path) }
             MessageType.TransferType.AUDIO -> {
                 // Add margin if message need to be separated.

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

@@ -88,6 +88,8 @@ class ConversationViewHolder(v: ViewGroup, val type: MessageType) : RecyclerView
         MessageType.OUTGOING_AUDIO,
         MessageType.INCOMING_AUDIO,
         MessageType.INCOMING_FILE,
+        MessageType.OUTGOING_IMAGE,
+        MessageType.INCOMING_IMAGE,
         MessageType.OUTGOING_FILE -> v.findViewById(R.id.file_time)
         else -> null
     }

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

@@ -2,4 +2,4 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <corners android:radius="@dimen/conversation_message_radius" />
-</shape>
+</shape>
\ No newline at end of file

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

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners
+        android:bottomLeftRadius="@dimen/conversation_message_radius"
+        android:bottomRightRadius="@dimen/conversation_message_radius"/>
+    <gradient
+        android:type="linear"
+        android:angle="90"
+        android:endColor="#00000000"
+        android:centerColor="#83000000"
+        android:startColor="#83000000"
+        android:centerY=".65"
+        android:height="20dp"/>
+</shape>
\ No newline at end of file

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

@@ -31,7 +31,7 @@
         android:id="@+id/msg_details_txt_perm"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:paddingBottom="@dimen/padding_small"
+        android:paddingVertical="@dimen/conversation_date_padding"
         android:textColor="@color/textColorSecondary"
         android:textSize="@dimen/conversation_timestamp_textsize"
         android:visibility="gone"
@@ -58,12 +58,13 @@
 
                 <ImageView
                     android:id="@+id/image"
-                    android:layout_width="wrap_content"
-                    android:layout_height="180dp"
+                    android:layout_width="200dp"
+                    android:layout_height="wrap_content"
                     android:layout_alignParentEnd="true"
                     android:layout_marginEnd="24dp"
                     android:adjustViewBounds="true"
                     android:background="@drawable/background_item_conv_image"
+                    android:contentDescription="@null"
                     android:padding="0dp"
                     android:transitionName="picture"
                     tools:scaleType="centerCrop"
@@ -79,20 +80,23 @@
                     app:tint="@color/grey_500" />
 
                 <TextView
-                    android:id="@+id/msg_details_txt"
+                    android:id="@+id/file_time"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:layout_below="@id/image"
+                    android:layout_alignStart="@id/image"
                     android:layout_alignEnd="@id/image"
-                    android:layout_marginEnd="@dimen/message_details_margin"
-                    android:singleLine="true"
-                    android:textColor="@color/textColorSecondary"
+                    android:layout_alignBottom="@id/image"
+                    android:background="@drawable/background_item_conv_image_time"
+                    android:gravity="end"
+                    android:paddingHorizontal="8dp"
+                    android:paddingTop="8dp"
+                    android:paddingBottom="4dp"
+                    android:textColor="@color/white"
                     android:textSize="@dimen/conversation_timestamp_textsize"
-                    tools:text="Tue" />
+                    tools:text="11:36am" />
 
                 <TextView
                     android:id="@+id/reaction_chip"
-                    style="@style/Widget.Material3.Chip.Suggestion"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_below="@id/image"

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

@@ -30,7 +30,7 @@
         android:id="@+id/msg_details_txt_perm"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:paddingBottom="@dimen/padding_small"
+        android:paddingVertical="@dimen/conversation_date_padding"
         android:textColor="@color/textColorSecondary"
         android:textSize="@dimen/conversation_timestamp_textsize"
         android:visibility="gone"
@@ -47,53 +47,69 @@
             android:id="@+id/photo"
             android:layout_width="@dimen/conversation_avatar_size"
             android:layout_height="@dimen/conversation_avatar_size"
-            android:layout_alignBottom="@id/imgLayout"
+            android:layout_alignBottom="@id/image"
             android:layout_alignParentStart="true"
             android:layout_marginEnd="@dimen/conditional_left_conversation_margin"
             android:background="@null"
+            android:contentDescription="@null"
             android:gravity="start"
-            android:scaleType="centerCrop" />
+            android:scaleType="centerCrop"
+            tools:background="@color/teal_700" />
 
-        <LinearLayout
-            android:id="@+id/imgLayout"
+        <TextView
+            android:id="@+id/peer_name"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_alignStart="@id/image"
+            android:ellipsize="end"
+            android:maxEms="8"
+            android:maxLines="1"
+            android:padding="4dp"
+            android:textColor="@color/msg_display_name"
+            android:textSize="@dimen/message_display_name_textsize"
+            android:visibility="gone"
+            tools:text="Bob"
+            tools:visibility="visible" />
+
+        <ImageView
+            android:id="@+id/image"
+            android:layout_width="200dp"
+            android:layout_height="wrap_content"
+            android:layout_below="@id/peer_name"
             android:layout_marginEnd="20dp"
             android:layout_toEndOf="@+id/photo"
+            android:adjustViewBounds="true"
+            android:background="@drawable/background_item_conv_image"
+            android:contentDescription="@null"
             android:gravity="bottom"
-            android:minHeight="@dimen/conversation_avatar_size">
-
-            <ImageView
-                android:id="@+id/image"
-                android:layout_width="wrap_content"
-                android:layout_height="180dp"
-                android:adjustViewBounds="true"
-                android:background="@drawable/background_item_conv_image"
-                android:transitionName="picture"
-                tools:src="@drawable/ic_jami" />
-
-        </LinearLayout>
+            android:minHeight="@dimen/conversation_avatar_size"
+            android:transitionName="picture"
+            tools:src="@drawable/ic_jami" />
 
         <TextView
-            android:id="@+id/msg_details_txt"
+            android:id="@+id/file_time"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_below="@+id/imgLayout"
-            android:layout_alignEnd="@+id/imgLayout"
-            android:layout_marginEnd="@dimen/message_details_margin"
-            android:textColor="@color/textColorSecondary"
+            android:layout_alignStart="@id/image"
+            android:layout_alignEnd="@id/image"
+            android:layout_alignBottom="@id/image"
+            android:background="@drawable/background_item_conv_image_time"
+            android:gravity="end"
+            android:paddingHorizontal="8dp"
+            android:paddingTop="8dp"
+            android:paddingBottom="4dp"
+            android:textColor="@color/white"
             android:textSize="@dimen/conversation_timestamp_textsize"
-            tools:text="@string/time_just_now" />
+            tools:text="11:36am" />
 
         <TextView
             android:id="@+id/reaction_chip"
-            style="@style/Widget.Material3.Chip.Suggestion"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_below="@id/imgLayout"
-            android:layout_alignStart="@id/imgLayout"
-            android:layout_marginTop="-6dp"
+            android:layout_below="@id/image"
+            android:layout_alignStart="@id/image"
             android:layout_marginStart="8dp"
+            android:layout_marginTop="-6dp"
             android:background="@drawable/background_reaction_chip"
             android:lines="1"
             android:maxLines="1"