Fix overlap between time and name in preview messages

Signed-off-by: Mario Danic <mario@lovelyhq.com>

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

@@ -50,14 +50,19 @@
             app:actualImageScaleType="fitCenter"
             tools:ignore="PxUsage" />
 
-        <RelativeLayout
+        <com.google.android.flexbox.FlexboxLayout
             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_marginTop="8dp"
-            android:layout_marginBottom="8dp">
+            android:layout_marginBottom="8dp"
+            android:orientation="vertical"
+            app:alignContent="stretch"
+            app:alignItems="stretch"
+            app:flexWrap="wrap"
+            app:justifyContent="flex_end">
 
             <com.vanniktech.emoji.EmojiTextView
                 android:id="@id/messageText"
@@ -67,16 +72,22 @@
                 android:autoLink="all"
                 android:textColor="@color/warm_grey_four"
                 android:textIsSelectable="true"
-                android:textSize="12sp" />
+                android:textSize="12sp"
+                app:layout_alignSelf="flex_start"
+                app:layout_flexGrow="1"
+                app:layout_wrapBefore="true"
+                />
 
             <TextView
                 android:id="@id/messageTime"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignParentEnd="true"
-                android:textColor="@color/warm_grey_four" />
+                android:textColor="@color/warm_grey_four"
+                android:layout_marginStart="8dp"
+                app:layout_alignSelf="center"/>
 
-        </RelativeLayout>
+        </com.google.android.flexbox.FlexboxLayout>
 
     </RelativeLayout>
 

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

@@ -32,36 +32,45 @@
         android:id="@id/image"
         android:layout_width="480px"
         android:layout_height="480px"
-        app:actualImageScaleType="fitCenter"
-        android:adjustViewBounds="true"
         android:layout_alignParentEnd="true"
+        android:adjustViewBounds="true"
+        app:actualImageScaleType="fitCenter"
         tools:ignore="PxUsage" />
 
-    <RelativeLayout
+    <com.google.android.flexbox.FlexboxLayout
         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_marginTop="8dp"
-        android:layout_marginBottom="8dp">
+        android:layout_marginBottom="8dp"
+        android:orientation="vertical"
+        app:alignContent="stretch"
+        app:alignItems="stretch"
+        app:flexWrap="wrap"
+        app:justifyContent="flex_end">
 
         <com.vanniktech.emoji.EmojiTextView
             android:id="@id/messageText"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:autoLink="all"
-            android:textColorLink="@color/warm_grey_four"
             android:textColor="@color/warm_grey_four"
+            android:textColorLink="@color/warm_grey_four"
             android:textIsSelectable="true"
-            android:textSize="12sp" />
+            android:textSize="12sp"
+            app:layout_alignSelf="flex_start"
+            app:layout_flexGrow="1"
+            app:layout_wrapBefore="true" />
 
         <TextView
             android:id="@id/messageTime"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentEnd="true"
-            android:textColor="@color/warm_grey_four" />
-    </RelativeLayout>
+            android:textColor="@color/warm_grey_four"
+            app:layout_alignSelf="center" />
+    </com.google.android.flexbox.FlexboxLayout>
 
 </RelativeLayout>