From 115ce8148abe95aac8c9b3466048c282a0ea3cf3 Mon Sep 17 00:00:00 2001
From: Sylvain Berfini <sylvain.berfini@belledonne-communications.com>
Date: Tue, 7 Nov 2023 21:19:23 +0100
Subject: [PATCH] More performance improvements

---
 .../org/linphone/utils/DataBindingUtils.kt    |  30 +++-
 .../main/res/layout/chat_bubble_content.xml   |  76 --------
 .../layout/chat_bubble_content_grid_cell.xml  |   6 +-
 .../main/res/layout/chat_bubble_incoming.xml  | 168 +++++++++--------
 .../main/res/layout/chat_bubble_outgoing.xml  | 169 ++++++++++--------
 app/src/main/res/values/dimen.xml             |   4 +-
 6 files changed, 213 insertions(+), 240 deletions(-)
 delete mode 100644 app/src/main/res/layout/chat_bubble_content.xml

diff --git a/app/src/main/java/org/linphone/utils/DataBindingUtils.kt b/app/src/main/java/org/linphone/utils/DataBindingUtils.kt
index 6137289ec..1aa348258 100644
--- a/app/src/main/java/org/linphone/utils/DataBindingUtils.kt
+++ b/app/src/main/java/org/linphone/utils/DataBindingUtils.kt
@@ -52,6 +52,7 @@ import androidx.lifecycle.lifecycleScope
 import coil.dispose
 import coil.load
 import coil.request.videoFrameMillis
+import coil.size.Dimension
 import coil.transform.RoundedCornersTransformation
 import com.google.android.material.imageview.ShapeableImageView
 import kotlinx.coroutines.Dispatchers
@@ -218,20 +219,38 @@ fun ImageView.loadFileImage(file: String?) {
 @UiThread
 @BindingAdapter("coilBubble")
 fun ImageView.loadImageForChatBubble(file: String?) {
+    loadImageForChatBubble(this, file, false)
+}
+
+@UiThread
+@BindingAdapter("coilBubbleGrid")
+fun ImageView.loadImageForChatBubbleGrid(file: String?) {
+    loadImageForChatBubble(this, file, true)
+}
+
+private fun loadImageForChatBubble(imageView: ImageView, file: String?, grid: Boolean) {
     if (!file.isNullOrEmpty()) {
-        val radius = context.resources.getDimension(
+        val dimen = if (grid) {
+            imageView.resources.getDimension(R.dimen.chat_bubble_grid_image_size).toInt()
+        } else {
+            imageView.resources.getDimension(R.dimen.chat_bubble_big_image_max_size).toInt()
+        }
+        val width = if (grid) Dimension(dimen) else Dimension.Undefined
+        val height = Dimension(dimen)
+        val radius = imageView.resources.getDimension(
             R.dimen.chat_bubble_images_rounded_corner_radius
         )
         if (FileUtils.isExtensionVideo(file)) {
-            load(file) {
+            imageView.load(file) {
                 videoFrameMillis(0)
                 transformations(RoundedCornersTransformation(radius))
+                size(width, height)
                 listener(
                     onError = { _, result ->
                         Log.e(
                             "[Data Binding] [Coil] Error getting preview picture from video? [$file]: ${result.throwable}"
                         )
-                        visibility = View.GONE
+                        imageView.visibility = View.GONE
                     },
                     onSuccess = { _, _ ->
                         // TODO: Display "play" button above video preview
@@ -239,14 +258,15 @@ fun ImageView.loadImageForChatBubble(file: String?) {
                 )
             }
         } else {
-            load(file) {
+            imageView.load(file) {
                 transformations(RoundedCornersTransformation(radius))
+                size(width, height)
                 listener(
                     onError = { _, result ->
                         Log.e(
                             "[Data Binding] [Coil] Error getting picture from file [$file]: ${result.throwable}"
                         )
-                        visibility = View.GONE
+                        imageView.visibility = View.GONE
                     }
                 )
             }
diff --git a/app/src/main/res/layout/chat_bubble_content.xml b/app/src/main/res/layout/chat_bubble_content.xml
deleted file mode 100644
index ede048154..000000000
--- a/app/src/main/res/layout/chat_bubble_content.xml
+++ /dev/null
@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:bind="http://schemas.android.com/tools">
-
-    <data>
-        <import type="android.view.View" />
-        <import type="com.google.android.flexbox.JustifyContent" />
-        <variable
-            name="onLongClickListener"
-            type="View.OnLongClickListener" />
-        <variable
-            name="model"
-            type="org.linphone.ui.main.chat.model.ChatMessageModel" />
-    </data>
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content">
-
-        <com.google.android.flexbox.FlexboxLayout
-            android:id="@+id/images_grid"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="@{model.imagesList.size() >= 2 ? View.VISIBLE : View.GONE, default=gone}"
-            app:layout_constraintWidth_max="271dp"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintBottom_toTopOf="@id/single_image"
-            app:alignItems="center"
-            app:flexWrap="wrap"
-            app:justifyContent="@{model.outgoing ? JustifyContent.FLEX_END : JustifyContent.FLEX_START}"
-            entries="@{model.imagesList}"
-            layout="@{@layout/chat_bubble_content_grid_cell}"/>
-
-        <ImageView
-            android:id="@+id/single_image"
-            android:onClick="@{() -> model.firstImage.onClick()}"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:adjustViewBounds="true"
-            android:scaleType="fitCenter"
-            android:visibility="@{model.imagesList.size() > 1 || model.firstImage.path.length() == 0 ? View.GONE : View.VISIBLE}"
-            app:layout_constraintTop_toBottomOf="@id/images_grid"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintBottom_toTopOf="@id/text_content"
-            app:layout_constraintHeight_max="@dimen/chat_bubble_big_image_max_size"
-            coilBubble="@{model.firstImage.path}"/>
-
-        <org.linphone.ui.main.chat.view.ChatBubbleTextView
-            style="@style/default_text_style"
-            android:id="@+id/text_content"
-            android:onLongClick="@{onLongClickListener}"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="@{model.text, default=`Lorem ipsum dolor sit amet`}"
-            android:textSize="14sp"
-            android:textColor="@color/gray_main2_700"
-            android:gravity="center_vertical|start"
-            android:visibility="@{model.text.length() > 0 ? View.VISIBLE : View.GONE}"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/single_image"/>
-
-        <include
-            android:id="@+id/meeting_info"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="@{model.meetingFound ? View.VISIBLE : View.GONE, default=gone}"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            layout="@layout/chat_bubble_meeting_invite_content"
-            bind:model="@{model}"/>
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
-</layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/chat_bubble_content_grid_cell.xml b/app/src/main/res/layout/chat_bubble_content_grid_cell.xml
index 5024fef85..abf8b2f52 100644
--- a/app/src/main/res/layout/chat_bubble_content_grid_cell.xml
+++ b/app/src/main/res/layout/chat_bubble_content_grid_cell.xml
@@ -10,11 +10,11 @@
 
     <ImageView
         android:onClick="@{() -> model.onClick()}"
-        android:layout_width="88dp"
-        android:layout_height="88dp"
+        android:layout_width="@dimen/chat_bubble_grid_image_size"
+        android:layout_height="@dimen/chat_bubble_grid_image_size"
         android:layout_margin="1dp"
         android:adjustViewBounds="true"
         android:scaleType="centerCrop"
-        coilBubble="@{model.path}"/>
+        coilBubbleGrid="@{model.path}"/>
 
 </layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/chat_bubble_incoming.xml b/app/src/main/res/layout/chat_bubble_incoming.xml
index dc3004551..bb9d01de3 100644
--- a/app/src/main/res/layout/chat_bubble_incoming.xml
+++ b/app/src/main/res/layout/chat_bubble_incoming.xml
@@ -5,6 +5,7 @@
 
     <data>
         <import type="android.view.View" />
+        <import type="com.google.android.flexbox.JustifyContent" />
         <import type="org.linphone.core.ConsolidatedPresence" />
         <import type="org.linphone.core.ChatMessage.State" />
         <variable
@@ -67,20 +68,7 @@
             android:visibility="@{!model.isFromGroup ? View.GONE: model.isGroupedWithPreviousOne ? View.GONE : View.VISIBLE}"
             app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintBottom_toTopOf="@id/reply"
-            app:layout_constraintStart_toStartOf="@id/background" />
-
-        <View
-            android:id="@+id/reply_background"
-            android:onClick="@{scrollToRepliedMessageClickListener}"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:layout_marginBottom="20dp"
-            android:background="@drawable/shape_chat_bubble_reply"
-            android:visibility="@{model.isReply ? View.VISIBLE : View.GONE, default=gone}"
-            app:layout_constraintTop_toTopOf="@id/reply"
-            app:layout_constraintStart_toStartOf="@id/reply"
-            app:layout_constraintEnd_toEndOf="@id/reply"
-            app:layout_constraintBottom_toBottomOf="@id/background" />
+            app:layout_constraintStart_toStartOf="@id/bubble" />
 
         <ImageView
             android:id="@+id/reply_icon"
@@ -89,13 +77,14 @@
             android:src="@drawable/reply"
             android:visibility="@{model.isReply ? View.VISIBLE : View.GONE, default=gone}"
             app:tint="@color/gray_main2_500"
-            app:layout_constraintStart_toEndOf="@id/reply_background"
-            app:layout_constraintBottom_toTopOf="@id/background" />
+            app:layout_constraintStart_toEndOf="@id/reply"
+            app:layout_constraintBottom_toTopOf="@id/bubble" />
 
         <androidx.appcompat.widget.AppCompatTextView
             style="@style/default_text_style"
             android:id="@+id/reply"
             android:onClick="@{scrollToRepliedMessageClickListener}"
+            android:background="@drawable/shape_chat_bubble_reply"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginEnd="16dp"
@@ -107,74 +96,99 @@
             android:padding="10dp"
             android:visibility="@{model.isReply ? View.VISIBLE : View.GONE, default=gone}"
             app:layout_constraintHorizontal_bias="0"
-            app:layout_constraintStart_toStartOf="@id/background"
-            app:layout_constraintEnd_toEndOf="@id/background"
-            app:layout_constraintTop_toBottomOf="@id/name"
-            app:layout_constraintBottom_toTopOf="@id/background"/>
+            app:layout_constraintStart_toStartOf="@id/bubble"
+            app:layout_constraintEnd_toEndOf="@id/bubble"
+            app:layout_constraintTop_toBottomOf="@id/name" />
 
-        <androidx.constraintlayout.widget.Barrier
-            android:id="@+id/background_end_barrier"
+        <LinearLayout
+            android:id="@+id/bubble"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            app:barrierDirection="end"
-            app:barrierMargin="10dp"
-            app:constraint_referenced_ids="delivery_status, contents" />
-
-        <ImageView
-            android:id="@+id/background"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
             android:layout_marginStart="@{model.isFromGroup ? @dimen/chat_bubble_start_margin_when_avatar_displayed : @dimen/zero, default=@dimen/chat_bubble_start_margin_when_avatar_displayed}"
-            android:src="@{model.isGroupedWithPreviousOne ? @drawable/shape_chat_bubble_incoming_full : @drawable/shape_chat_bubble_incoming_first, default=@drawable/shape_chat_bubble_incoming_first}"
-            app:layout_constraintStart_toEndOf="@id/avatar"
-            app:layout_constraintEnd_toEndOf="@id/background_end_barrier"
-            app:layout_constraintTop_toBottomOf="@id/reply"
-            app:layout_constraintBottom_toBottomOf="@id/date_time"/>
-
-        <include
-            android:id="@+id/contents"
-            layout="@layout/chat_bubble_content"
-            model="@{model}"
-            onLongClickListener="@{onLongClickListener}"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="20dp"
-            android:layout_marginTop="@dimen/chat_bubble_text_padding_with_bubble"
             android:layout_marginEnd="16dp"
-            android:paddingBottom="@{model.groupedWithNextOne ? @dimen/chat_bubble_text_padding_with_status : @dimen/chat_bubble_text_padding_with_bubble, default=@dimen/chat_bubble_text_padding_with_status}"
-            app:layout_constrainedWidth="true"
+            android:padding="10dp"
+            android:orientation="vertical"
+            android:background="@{model.isGroupedWithPreviousOne ? @drawable/shape_chat_bubble_incoming_full : @drawable/shape_chat_bubble_incoming_first, default=@drawable/shape_chat_bubble_incoming_first}"
             app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintWidth_max="@dimen/chat_bubble_max_width"
             app:layout_constraintTop_toBottomOf="@id/reply"
-            app:layout_constraintStart_toEndOf="@id/avatar"
-            app:layout_constraintEnd_toEndOf="parent" />
+            app:layout_constraintStart_toEndOf="@id/avatar">
 
-        <androidx.appcompat.widget.AppCompatTextView
-            style="@style/default_text_style_300"
-            android:id="@+id/date_time"
-            android:onClick="@{showDeliveryInfoClickListener}"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="5dp"
-            android:paddingBottom="5dp"
-            android:text="@{model.time, default=`13:40`}"
-            android:textSize="12sp"
-            android:visibility="@{model.isGroupedWithNextOne ? View.VISIBLE : View.GONE}"
-            app:layout_constraintTop_toBottomOf="@id/contents"
-            app:layout_constraintStart_toStartOf="@id/contents"/>
+            <com.google.android.flexbox.FlexboxLayout
+                android:id="@+id/images_grid"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:onLongClick="@{onLongClickListener}"
+                android:visibility="@{model.imagesList.size() >= 2 ? View.VISIBLE : View.GONE, default=gone}"
+                app:alignItems="center"
+                app:flexWrap="wrap"
+                app:justifyContent="@{model.outgoing ? JustifyContent.FLEX_END : JustifyContent.FLEX_START}"
+                entries="@{model.imagesList}"
+                layout="@{@layout/chat_bubble_content_grid_cell}"/>
 
-        <ImageView
-            style="@style/default_text_style_300"
-            android:id="@+id/delivery_status"
-            android:onClick="@{showDeliveryInfoClickListener}"
-            android:layout_width="@dimen/small_icon_size"
-            android:layout_height="@dimen/small_icon_size"
-            android:layout_marginStart="5dp"
-            android:src="@{model.statusIcon, default=@drawable/checks}"
-            android:visibility="@{model.isGroupedWithNextOne ? View.VISIBLE : View.GONE}"
-            app:layout_constraintTop_toTopOf="@id/date_time"
-            app:layout_constraintStart_toEndOf="@id/date_time"
-            app:layout_constraintBottom_toBottomOf="@id/date_time"
-            app:tint="@color/orange_main_500" />
+            <ImageView
+                android:id="@+id/single_image"
+                android:onClick="@{() -> model.firstImage.onClick()}"
+                android:onLongClick="@{onLongClickListener}"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:maxHeight="@dimen/chat_bubble_big_image_max_size"
+                android:adjustViewBounds="true"
+                android:scaleType="fitCenter"
+                android:visibility="@{model.imagesList.size() > 1 || model.firstImage.path.length() == 0 ? View.GONE : View.VISIBLE}"
+                coilBubble="@{model.firstImage.path}"/>
+
+            <ViewStub
+                android:id="@+id/meeting_info"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:visibility="@{model.meetingFound ? View.VISIBLE : View.GONE, default=gone}"
+                android:layout="@layout/chat_bubble_meeting_invite_content"
+                model="@{model}"/>
+
+            <org.linphone.ui.main.chat.view.ChatBubbleTextView
+                style="@style/default_text_style"
+                android:id="@+id/text_content"
+                android:onLongClick="@{onLongClickListener}"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@{model.text, default=`Lorem ipsum dolor sit amet`}"
+                android:textSize="14sp"
+                android:textColor="@color/gray_main2_700"
+                android:gravity="center_vertical|start"
+                android:visibility="@{model.text.length() > 0 ? View.VISIBLE : View.GONE}"/>
+
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="5dp"
+                android:gravity="center_vertical|start"
+                android:orientation="horizontal">
+
+                <androidx.appcompat.widget.AppCompatTextView
+                    style="@style/default_text_style_300"
+                    android:id="@+id/date_time"
+                    android:onClick="@{showDeliveryInfoClickListener}"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@{model.time, default=`13:40`}"
+                    android:textSize="12sp"
+                    android:visibility="@{model.isGroupedWithNextOne ? View.VISIBLE : View.GONE}"/>
+
+                <ImageView
+                    style="@style/default_text_style_300"
+                    android:id="@+id/delivery_status"
+                    android:onClick="@{showDeliveryInfoClickListener}"
+                    android:layout_width="@dimen/small_icon_size"
+                    android:layout_height="@dimen/small_icon_size"
+                    android:layout_marginStart="5dp"
+                    android:src="@{model.statusIcon, default=@drawable/checks}"
+                    android:visibility="@{model.isGroupedWithNextOne ? View.VISIBLE : View.GONE}"
+                    app:tint="@color/orange_main_500" />
+
+            </LinearLayout>
+
+        </LinearLayout>
 
         <androidx.appcompat.widget.AppCompatTextView
             android:id="@+id/reactions"
@@ -193,8 +207,8 @@
             android:paddingTop="12dp"
             android:paddingBottom="12dp"
             android:visibility="@{model.reactions.length() > 0 ? View.VISIBLE : View.GONE, default=gone}"
-            app:layout_constraintEnd_toEndOf="@id/background"
-            app:layout_constraintTop_toBottomOf="@id/background"
+            app:layout_constraintEnd_toEndOf="@id/bubble"
+            app:layout_constraintTop_toBottomOf="@id/bubble"
             app:layout_constraintBottom_toBottomOf="parent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/chat_bubble_outgoing.xml b/app/src/main/res/layout/chat_bubble_outgoing.xml
index e6509c1bc..cf0b750d8 100644
--- a/app/src/main/res/layout/chat_bubble_outgoing.xml
+++ b/app/src/main/res/layout/chat_bubble_outgoing.xml
@@ -5,6 +5,7 @@
 
     <data>
         <import type="android.view.View" />
+        <import type="com.google.android.flexbox.JustifyContent" />
         <import type="org.linphone.core.ConsolidatedPresence" />
         <import type="org.linphone.core.ChatMessage.State" />
         <variable
@@ -32,27 +33,6 @@
         android:layout_marginEnd="8dp"
         android:layout_marginTop="@{model.isGroupedWithPreviousOne ? @dimen/chat_bubble_grouped_top_margin : @dimen/chat_bubble_top_margin, default=@dimen/chat_bubble_top_margin}">
 
-        <androidx.constraintlayout.widget.Barrier
-            android:id="@+id/background_start_barrier"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:barrierDirection="start"
-            app:barrierMargin="-10dp"
-            app:constraint_referenced_ids="date_time, contents" />
-
-        <View
-            android:id="@+id/reply_background"
-            android:onClick="@{scrollToRepliedMessageClickListener}"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:layout_marginBottom="20dp"
-            android:background="@drawable/shape_chat_bubble_reply"
-            android:visibility="@{model.isReply ? View.VISIBLE : View.GONE, default=gone}"
-            app:layout_constraintTop_toTopOf="@id/reply"
-            app:layout_constraintStart_toStartOf="@id/reply"
-            app:layout_constraintEnd_toEndOf="@id/reply"
-            app:layout_constraintBottom_toBottomOf="@id/background" />
-
         <ImageView
             android:id="@+id/reply_icon"
             android:layout_width="@dimen/small_icon_size"
@@ -60,8 +40,8 @@
             android:src="@drawable/reply"
             android:visibility="@{model.isReply ? View.VISIBLE : View.GONE, default=gone}"
             app:tint="@color/gray_main2_500"
-            app:layout_constraintStart_toEndOf="@id/reply_background"
-            app:layout_constraintBottom_toTopOf="@id/background" />
+            app:layout_constraintStart_toEndOf="@id/reply"
+            app:layout_constraintBottom_toTopOf="@id/bubble" />
 
         <androidx.appcompat.widget.AppCompatTextView
             style="@style/default_text_style"
@@ -70,6 +50,7 @@
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginEnd="16dp"
+            android:background="@drawable/shape_chat_bubble_reply"
             android:text="@{model.replyText, default=`Reply`}"
             android:textColor="@color/gray_main2_500"
             android:textSize="14sp"
@@ -78,65 +59,97 @@
             android:padding="10dp"
             android:visibility="@{model.isReply ? View.VISIBLE : View.GONE, default=gone}"
             app:layout_constraintHorizontal_bias="0"
-            app:layout_constraintStart_toStartOf="@id/background"
-            app:layout_constraintEnd_toEndOf="@id/background"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintBottom_toTopOf="@id/background"/>
+            app:layout_constraintStart_toStartOf="@id/bubble"
+            app:layout_constraintEnd_toEndOf="@id/bubble"
+            app:layout_constraintTop_toTopOf="parent" />
 
-        <ImageView
-            android:id="@+id/background"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:src="@{model.isGroupedWithPreviousOne ? @drawable/shape_chat_bubble_outgoing_full : @drawable/shape_chat_bubble_outgoing_first, default=@drawable/shape_chat_bubble_outgoing_first}"
-            app:layout_constraintStart_toStartOf="@id/background_start_barrier"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/reply"
-            app:layout_constraintBottom_toBottomOf="@id/date_time"/>
-
-        <include
-            android:id="@+id/contents"
-            layout="@layout/chat_bubble_content"
-            model="@{model}"
-            onLongClickListener="@{onLongClickListener}"
+        <LinearLayout
+            android:id="@+id/bubble"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="@dimen/chat_bubble_text_padding_with_bubble"
-            android:layout_marginEnd="@dimen/chat_bubble_text_padding_with_bubble"
-            android:paddingBottom="@{model.groupedWithNextOne ? @dimen/chat_bubble_text_padding_with_status : @dimen/chat_bubble_text_padding_with_bubble, default=@dimen/chat_bubble_text_padding_with_status}"
-            app:layout_constrainedWidth="true"
-            app:layout_constraintHorizontal_bias="1"
-            app:layout_constraintStart_toStartOf="parent"
+            android:padding="10dp"
+            android:orientation="vertical"
+            android:background="@{model.isGroupedWithPreviousOne ? @drawable/shape_chat_bubble_outgoing_full : @drawable/shape_chat_bubble_outgoing_first, default=@drawable/shape_chat_bubble_outgoing_first}"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintWidth_max="@dimen/chat_bubble_max_width"
             app:layout_constraintTop_toBottomOf="@id/reply"
-            app:layout_constraintEnd_toEndOf="parent" />
+            app:layout_constraintEnd_toEndOf="parent">
 
-        <androidx.appcompat.widget.AppCompatTextView
-            style="@style/default_text_style_300"
-            android:id="@+id/date_time"
-            android:onClick="@{showDeliveryInfoClickListener}"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="5dp"
-            android:layout_marginEnd="5dp"
-            android:paddingBottom="5dp"
-            android:text="@{model.time, default=`13:40`}"
-            android:textSize="12sp"
-            android:visibility="@{model.isGroupedWithNextOne ? View.VISIBLE : View.GONE}"
-            app:layout_constraintTop_toBottomOf="@id/contents"
-            app:layout_constraintEnd_toStartOf="@id/delivery_status"/>
+            <com.google.android.flexbox.FlexboxLayout
+                android:id="@+id/images_grid"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:onLongClick="@{onLongClickListener}"
+                android:visibility="@{model.imagesList.size() >= 2 ? View.VISIBLE : View.GONE, default=gone}"
+                app:alignItems="center"
+                app:flexWrap="wrap"
+                app:justifyContent="@{model.outgoing ? JustifyContent.FLEX_END : JustifyContent.FLEX_START}"
+                entries="@{model.imagesList}"
+                layout="@{@layout/chat_bubble_content_grid_cell}"/>
 
-        <ImageView
-            style="@style/default_text_style_300"
-            android:id="@+id/delivery_status"
-            android:onClick="@{showDeliveryInfoClickListener}"
-            android:layout_width="@dimen/small_icon_size"
-            android:layout_height="@dimen/small_icon_size"
-            android:src="@{model.statusIcon, default=@drawable/checks}"
-            android:visibility="@{model.isGroupedWithNextOne ? View.VISIBLE : View.GONE}"
-            app:layout_constraintTop_toTopOf="@id/date_time"
-            app:layout_constraintEnd_toEndOf="@id/contents"
-            app:layout_constraintBottom_toBottomOf="@id/date_time"
-            app:tint="@color/orange_main_500" />
+            <ImageView
+                android:id="@+id/single_image"
+                android:onClick="@{() -> model.firstImage.onClick()}"
+                android:onLongClick="@{onLongClickListener}"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:maxHeight="@dimen/chat_bubble_big_image_max_size"
+                android:adjustViewBounds="true"
+                android:scaleType="fitCenter"
+                android:visibility="@{model.imagesList.size() > 1 || model.firstImage.path.length() == 0 ? View.GONE : View.VISIBLE}"
+                coilBubble="@{model.firstImage.path}"/>
+
+            <ViewStub
+                android:id="@+id/meeting_info"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:visibility="@{model.meetingFound ? View.VISIBLE : View.GONE, default=gone}"
+                android:layout="@layout/chat_bubble_meeting_invite_content"
+                model="@{model}"/>
+
+            <org.linphone.ui.main.chat.view.ChatBubbleTextView
+                style="@style/default_text_style"
+                android:id="@+id/text_content"
+                android:onLongClick="@{onLongClickListener}"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@{model.text, default=`Lorem ipsum dolor sit amet`}"
+                android:textSize="14sp"
+                android:textColor="@color/gray_main2_700"
+                android:gravity="center_vertical|start"
+                android:visibility="@{model.text.length() > 0 ? View.VISIBLE : View.GONE}"/>
+
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="5dp"
+                android:gravity="center_vertical|start"
+                android:orientation="horizontal">
+
+                <androidx.appcompat.widget.AppCompatTextView
+                    style="@style/default_text_style_300"
+                    android:id="@+id/date_time"
+                    android:onClick="@{showDeliveryInfoClickListener}"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@{model.time, default=`13:40`}"
+                    android:textSize="12sp"
+                    android:visibility="@{model.isGroupedWithNextOne ? View.VISIBLE : View.GONE}"/>
+
+                <ImageView
+                    style="@style/default_text_style_300"
+                    android:id="@+id/delivery_status"
+                    android:onClick="@{showDeliveryInfoClickListener}"
+                    android:layout_width="@dimen/small_icon_size"
+                    android:layout_height="@dimen/small_icon_size"
+                    android:layout_marginStart="5dp"
+                    android:src="@{model.statusIcon, default=@drawable/checks}"
+                    android:visibility="@{model.isGroupedWithNextOne ? View.VISIBLE : View.GONE}"
+                    app:tint="@color/orange_main_500" />
+
+            </LinearLayout>
+
+        </LinearLayout>
 
         <androidx.appcompat.widget.AppCompatTextView
             android:id="@+id/reactions"
@@ -155,8 +168,8 @@
             android:paddingTop="12dp"
             android:paddingBottom="12dp"
             android:visibility="@{model.reactions.length() > 0 ? View.VISIBLE : View.GONE, default=gone}"
-            app:layout_constraintEnd_toEndOf="@id/background"
-            app:layout_constraintTop_toBottomOf="@id/background"
+            app:layout_constraintEnd_toEndOf="@id/bubble"
+            app:layout_constraintTop_toBottomOf="@id/bubble"
             app:layout_constraintBottom_toBottomOf="parent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values/dimen.xml b/app/src/main/res/values/dimen.xml
index b9d104870..d89cf515b 100644
--- a/app/src/main/res/values/dimen.xml
+++ b/app/src/main/res/values/dimen.xml
@@ -66,7 +66,9 @@
     <dimen name="chat_bubble_text_padding_with_bubble">12dp</dimen>
     <dimen name="chat_bubble_text_padding_with_status">5dp</dimen>
     <dimen name="chat_bubble_long_press_emoji_reaction_size">30sp</dimen>
-    <dimen name="chat_bubble_big_image_max_size">200dp</dimen>
+    <dimen name="chat_bubble_grid_image_size">88dp</dimen>
+    <dimen name="chat_bubble_big_image_max_size">150dp</dimen>
+    <dimen name="chat_bubble_max_width">291dp</dimen>
     <dimen name="chat_bubble_images_rounded_corner_radius">5dp</dimen>
     <dimen name="chat_bubble_start_margin_when_avatar_displayed">10dp</dimen>