Rounder images that sort of fit into the bubble

Stephen Paul Weber created 2 years ago

Can't figure out how to make them actually go to the edge of the bubble...

Change summary

src/cheogram/res/values/styles.xml       | 16 +++++++++++++
src/main/res/layout/message_content.xml  | 31 ++++++++-----------------
src/main/res/layout/message_received.xml | 17 +++++++++++++
src/main/res/layout/message_sent.xml     | 17 +++++++++++++
4 files changed, 58 insertions(+), 23 deletions(-)

Detailed changes

src/cheogram/res/values/styles.xml

@@ -5,6 +5,22 @@
 	<item name="cornerSize">@dimen/avatar_radius</item>
 </style>
 
+<style name="ShapeAppearanceOverlay.MessageImageIn" parent="ShapeAppearance.MaterialComponents.SmallComponent">
+	<item name="cornerFamily">rounded</item>
+	<item name="cornerSizeTopLeft">0dp</item>
+	<item name="cornerSizeTopRight">16dp</item>
+	<item name="cornerSizeBottomLeft">0dp</item>
+	<item name="cornerSizeBottomRight">0dp</item>
+</style>
+
+<style name="ShapeAppearanceOverlay.MessageImageOut" parent="ShapeAppearance.MaterialComponents.SmallComponent">
+	<item name="cornerFamily">rounded</item>
+	<item name="cornerSizeTopLeft">16dp</item>
+	<item name="cornerSizeTopRight">16dp</item>
+	<item name="cornerSizeBottomLeft">0dp</item>
+	<item name="cornerSizeBottomRight">0dp</item>
+</style>
+
 <style name="ShapeAppearanceOverlay.IncomingCall" parent="ShapeAppearance.MaterialComponents.SmallComponent">
 	<item name="cornerFamily">rounded</item>
 	<item name="cornerSize">@dimen/incoming_call_radius</item>

src/main/res/layout/message_content.xml

@@ -1,25 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<merge xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <TextView
-        android:id="@+id/message_body"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:autoLink="web"
-        android:longClickable="false"
-        android:textIsSelectable="true"
-        android:textAppearance="@style/TextAppearance.Conversations.Body1"/>
-
-    <ImageView
-        android:id="@+id/message_image"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginBottom="4dp"
-        android:layout_marginTop="8dp"
-        android:adjustViewBounds="true"
-        android:background="@color/black87"
-        android:longClickable="true"
-        android:scaleType="centerCrop"/>
+<merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
 
     <Button
         android:id="@+id/download_button"
@@ -72,4 +52,13 @@
             android:progress="100"/>
     </RelativeLayout>
 
+    <TextView
+        android:id="@+id/message_body"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:autoLink="web"
+        android:longClickable="false"
+        android:textIsSelectable="true"
+        android:textAppearance="@style/TextAppearance.Conversations.Body1"/>
+
 </merge>

src/main/res/layout/message_received.xml

@@ -26,12 +26,13 @@
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_marginLeft="5dp"
-        android:paddingLeft="20dp"
         android:paddingTop="5dp"
+        android:paddingLeft="20dp"
         android:paddingBottom="5dp"
         android:layout_toRightOf="@+id/message_photo"
         android:background="?attr/message_bubble_received"
         android:longClickable="true"
+        android:clipToPadding="false"
         android:minHeight="53dp">
 
         <LinearLayout
@@ -40,8 +41,22 @@
             android:layout_height="fill_parent"
             android:gravity="center_vertical"
             android:orientation="vertical"
+            android:clipToPadding="false"
             android:padding="2dp">
 
+            <com.google.android.material.imageview.ShapeableImageView
+                android:id="@+id/message_image"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:translationY="-5dp"
+                android:layout_marginBottom="4dp"
+                android:adjustViewBounds="true"
+                android:background="@color/black87"
+                android:longClickable="true"
+                android:scaleType="centerCrop"
+                app:strokeColor="@color/custom_theme_accent"
+                app:shapeAppearance="@style/ShapeAppearanceOverlay.MessageImageIn" />
+
             <include
                 android:id="@+id/message_content"
                 layout="@layout/message_content" />

src/main/res/layout/message_sent.xml

@@ -27,12 +27,13 @@
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_marginRight="0dp"
-        android:paddingRight="20dp"
         android:paddingTop="5dp"
+        android:paddingRight="20dp"
         android:paddingBottom="5dp"
         android:layout_toLeftOf="@+id/message_photo"
         android:background="@drawable/message_bubble_sent"
         android:longClickable="true"
+        android:clipToPadding="false"
         android:minHeight="53dp">
 
         <LinearLayout
@@ -41,8 +42,22 @@
             android:layout_height="fill_parent"
             android:gravity="center_vertical"
             android:orientation="vertical"
+            android:clipToPadding="false"
             android:padding="2dp">
 
+            <com.google.android.material.imageview.ShapeableImageView
+                android:id="@+id/message_image"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:translationY="-5dp"
+                android:layout_marginBottom="4dp"
+                android:adjustViewBounds="true"
+                android:background="@color/black87"
+                android:longClickable="true"
+                android:scaleType="centerCrop"
+                app:strokeColor="@color/custom_theme_accent"
+                app:shapeAppearance="@style/ShapeAppearanceOverlay.MessageImageOut" />
+
             <include
                 android:id="@+id/message_content"
                 layout="@layout/message_content" />