add image preview to message bubbles

app/src/main/java/im/conversations/android/database/model/MessageWithContentReactions.java

@@ -101,6 +101,10 @@ public final class MessageWithContentReactions
         // return text.substring(0,Math.min(text.length(),20));
     }
 
+    public boolean hasPreview() {
+        return Iterables.tryFind(this.contents, c -> c.type == PartType.FILE).isPresent();
+    }
+
     public AddressWithName getAddressWithName() {
         if (isKnownSender()) {
             return new AddressWithName(individualAddress(), individualName());

app/src/main/java/im/conversations/android/ui/adapter/MessageAdapter.java

@@ -123,6 +123,7 @@ public class MessageAdapter
         protected void setItem(final MessageAdapterItem item) {
             if (item instanceof MessageWithContentReactions message) {
                 this.binding.setMessage(message);
+                this.binding.content.setClipToOutline(true);
             } else {
                 this.binding.setMessage(null);
             }

app/src/main/res/drawable/background_message_bubble.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="?colorSurface"/>
+    <corners android:radius="@dimen/message_bubble_corner_radius"/>
+</shape>

app/src/main/res/drawable/background_message_received.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="?colorSecondaryContainer"/>
-    <corners android:radius="16dp"/>
-</shape>

app/src/main/res/drawable/background_message_separator.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="?colorPrimaryContainer"/>
-    <corners android:radius="8dp"/>
+    <corners android:radius="@dimen/message_separator_corner_radius"/>
 </shape>

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

@@ -9,12 +9,12 @@
         android:paddingVertical="6dp">
 
         <ImageView
-            android:visibility="@{message == null ? View.INVISIBLE : View.VISIBLE}"
             android:id="@+id/avatar"
             android:layout_width="@dimen/avatar_chat_overview_size"
             android:layout_height="@dimen/avatar_chat_overview_size"
             android:layout_marginStart="8dp"
             android:scaleType="centerCrop"
+            android:visibility="@{message == null ? View.INVISIBLE : View.VISIBLE}"
             app:layout_constraintBottom_toBottomOf="@id/content"
             app:layout_constraintStart_toStartOf="parent" />
 
@@ -23,15 +23,39 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginHorizontal="8dp"
-            android:background="@drawable/background_message_received"
+            android:background="@drawable/background_message_bubble"
+            android:backgroundTint="?colorSecondaryContainer"
+            android:clipToOutline="true"
             android:minHeight="40dp"
-            android:padding="8dp"
             app:layout_constrainedWidth="true"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.0"
             app:layout_constraintStart_toEndOf="@id/avatar"
-            app:layout_constraintTop_toTopOf="parent">
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_max="@dimen/message_bubble_max_width">
 
+            <ImageView
+                android:id="@+id/image"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:adjustViewBounds="true"
+                app:layout_constraintBottom_toTopOf="@+id/textContentWrapper"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHeight_max="@dimen/message_preview_max_height"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintWidth_max="@dimen/message_preview_max_width" />
+
+            <LinearLayout
+                android:id="@+id/textContentWrapper"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="8dp"
+                android:visibility="visible"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/image">
 
                 <TextView
                     android:id="@+id/textContent"
@@ -40,10 +64,10 @@
                     android:text="@{message.textContent}"
                     android:textAppearance="?textAppearanceBodyMedium"
                     android:textColor="?colorOnSecondaryContainer"
-                app:layout_constraintBottom_toBottomOf="parent"
+                    tools:text="Quisque sit amet metus faucibus, egestas est eu, hendrerit mauris. Suspendisse pretium nisl purus, vitae vestibulum sapien rhoncus nec. Quisque molestie ante felis, vel dapibus ex mattis a. Morbi venenatis vestibulum neque, vel ornare sapien. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " />
-                app:layout_constraintStart_toStartOf="parent"
+            </LinearLayout>
-                app:layout_constraintTop_toTopOf="parent"
+
-                tools:text="Fusce vitae vehicula risus, nec ornare lorem. Quisque facilisis mattis velit ac porttitor. Aenean aliquet pretium varius. Quisque neque felis, mattis sit amet leo ac, tempus dapibus nibh." />
+
         </androidx.constraintlayout.widget.ConstraintLayout>
 
 

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

@@ -13,7 +13,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginHorizontal="8dp"
-            android:background="@drawable/background_message_received"
+            android:background="@drawable/background_message_bubble"
             android:backgroundTint="?colorTertiaryContainer"
             android:minHeight="40dp"
             android:padding="8dp"
@@ -21,8 +21,31 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="1.0"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent">
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_max="@dimen/message_bubble_max_width">
 
+            <ImageView
+                android:id="@+id/image"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:adjustViewBounds="true"
+                app:layout_constraintBottom_toTopOf="@+id/textContentWrapper"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHeight_max="@dimen/message_preview_max_height"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintWidth_max="@dimen/message_preview_max_width" />
+
+            <LinearLayout
+                android:id="@+id/textContentWrapper"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="8dp"
+                android:visibility="visible"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/image">
 
                 <TextView
                     android:id="@+id/textContent"
@@ -31,10 +54,9 @@
                     android:text="@{message.textContent}"
                     android:textAppearance="?textAppearanceBodyMedium"
                     android:textColor="?colorOnSecondaryContainer"
-                app:layout_constraintBottom_toBottomOf="parent"
+                    tools:text="Quisque sit amet metus faucibus, egestas est eu, hendrerit mauris. Suspendisse pretium nisl purus, vitae vestibulum sapien rhoncus nec. Quisque molestie ante felis, vel dapibus ex mattis a. Morbi venenatis vestibulum neque, vel ornare sapien. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " />
-                app:layout_constraintStart_toStartOf="parent"
+            </LinearLayout>
-                app:layout_constraintTop_toTopOf="parent"
+
-                tools:text="Fusce vitae!" />
         </androidx.constraintlayout.widget.ConstraintLayout>
 
 

app/src/main/res/values/message-bubbles.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="message_bubble_corner_radius">16dp</dimen>
+    <dimen name="message_separator_corner_radius">8dp</dimen>
+    <dimen name="message_bubble_max_width">384dp</dimen>
+    <!-- The difference between bubble_max_width and preview_max_width will become relevant once we
+         support image and description in the same bubble. If there is no text, image bubbles will
+         always be restricted to max_preview_width. -->
+    <dimen name="message_preview_max_width">384dp</dimen>
+    <dimen name="message_preview_max_height">256dp</dimen>
+</resources>