Fix shadow, add tails, fix monochrome

Stephen Paul Weber created

Change summary

src/cheogram/res/values/themes.xml                                  |  32 
src/main/java/eu/siacs/conversations/ui/adapter/MessageAdapter.java |  14 
src/main/res/drawable/message_bubble_received.xml                   |  69 
src/main/res/drawable/message_bubble_sent.xml                       |  69 
src/main/res/layout/message_bubble_received.xml                     | 105 
src/main/res/layout/message_received.xml                            |  48 
src/main/res/layout/message_sent.xml                                |   6 
src/main/res/values/attrs.xml                                       |   8 
8 files changed, 155 insertions(+), 196 deletions(-)

Detailed changes

src/cheogram/res/values/themes.xml 🔗

@@ -9,6 +9,9 @@
 
         <item name="message_bubble_received_bg">?colorPrimary</item>
         <item name="message_bubble_sent_bg">?color_background_primary</item>
+        <item name="message_bubble_shadow_light">#00CCCCCC</item>
+        <item name="message_bubble_shadow_dark">#FFCCCCCC</item>
+        <item name="message_bubble_shadow_dark_top">#DDCCCCCC</item>
 
         <item name="color_background_primary">@color/grey50</item>
         <item name="color_background_secondary">@color/grey200</item>
@@ -65,11 +68,8 @@
         <item name="ic_make_audio_call" type="reference">@drawable/ic_call_black54_24dp</item>
         <item name="ic_make_video_call" type="reference">@drawable/ic_videocam_black54_24dp</item>
 
-        <item name="message_bubble_received_monochrome" type="reference">
-            @drawable/message_bubble_received
-        </item>
         <item name="message_bubble_sent" type="reference">@drawable/message_bubble_sent</item>
-        <item name="message_bubble_received_green" type="reference">
+        <item name="message_bubble_received" type="reference">
             @drawable/message_bubble_received
         </item>
 
@@ -160,6 +160,9 @@
 
         <item name="message_bubble_received_bg">?colorPrimary</item>
         <item name="message_bubble_sent_bg">?color_background_primary</item>
+        <item name="message_bubble_shadow_light">#00424242</item>
+        <item name="message_bubble_shadow_dark">#FF424242</item>
+        <item name="message_bubble_shadow_dark_top">#DD424242</item>
 
         <item name="color_background_primary">@color/grey800</item>
         <item name="color_background_secondary">@color/grey900</item>
@@ -224,14 +227,6 @@
         <item name="ic_attach_photo" type="reference">@drawable/ic_attach_photo_white</item>
         <item name="ic_attach_record" type="reference">@drawable/ic_attach_record_white</item>
 
-        <item name="message_bubble_received_monochrome" type="reference">
-            @drawable/message_bubble_received
-        </item>
-        <item name="message_bubble_sent" type="reference">@drawable/message_bubble_sent</item>
-        <item name="message_bubble_received_green" type="reference">
-            @drawable/message_bubble_received
-        </item>
-
         <item name="unread_count">@color/perpy</item>
 
         <item name="conversations_overview_background">@color/green900</item>
@@ -317,22 +312,15 @@
 
         <item name="message_bubble_received_bg">?colorPrimary</item>
         <item name="message_bubble_sent_bg">?color_background_primary</item>
+        <item name="message_bubble_shadow_light">#00000000</item>
+        <item name="message_bubble_shadow_dark">#FF000000</item>
+        <item name="message_bubble_shadow_dark_top">#DD000000</item>
 
         <item name="color_background_primary">#0E0020</item>
         <item name="color_background_secondary">@color/black</item>
         <item name="color_background_tertiary">#1E0036</item>
         <item name="color_background_overlay">@color/black26</item>
 
-
-
-        <item name="message_bubble_received_monochrome" type="reference">
-            @drawable/message_bubble_received
-        </item>
-        <item name="message_bubble_sent" type="reference">@drawable/message_bubble_sent</item>
-        <item name="message_bubble_received_green" type="reference">
-            @drawable/message_bubble_received
-        </item>
-
         <item name="unread_count">#1E0036</item>
     </style>
 

src/main/java/eu/siacs/conversations/ui/adapter/MessageAdapter.java 🔗

@@ -5,6 +5,7 @@ import android.app.Activity;
 import android.content.Intent;
 import android.content.SharedPreferences;
 import android.content.pm.PackageManager;
+import android.graphics.PorterDuff;
 import android.graphics.Typeface;
 import android.net.Uri;
 import android.preference.PreferenceManager;
@@ -65,6 +66,7 @@ import eu.siacs.conversations.ui.text.QuoteSpan;
 import eu.siacs.conversations.ui.util.AvatarWorkerTask;
 import eu.siacs.conversations.ui.util.MyLinkify;
 import eu.siacs.conversations.ui.util.QuoteHelper;
+import eu.siacs.conversations.ui.util.StyledAttributes;
 import eu.siacs.conversations.ui.util.ViewUtil;
 import eu.siacs.conversations.ui.widget.ClickableMovementMethod;
 import eu.siacs.conversations.utils.CryptoHelper;
@@ -656,7 +658,7 @@ public class MessageAdapter extends ArrayAdapter<Message> {
                     viewHolder.audioPlayer = view.findViewById(R.id.audio_player);
                     break;
                 case RECEIVED:
-                    view = activity.getLayoutInflater().inflate(R.layout.message_bubble_received, parent, false);
+                    view = activity.getLayoutInflater().inflate(R.layout.message_received, parent, false);
                     viewHolder.message_box = view.findViewById(R.id.message_box);
                     viewHolder.contact_picture = view.findViewById(R.id.message_photo);
                     viewHolder.download_button = view.findViewById(R.id.download_button);
@@ -850,16 +852,14 @@ public class MessageAdapter extends ArrayAdapter<Message> {
             }
 
             if (isInValidSession) {
-                int bubble;
                 if (!mUseGreenBackground) {
-                    bubble = activity.getThemeResource(R.attr.message_bubble_received_monochrome, R.drawable.message_bubble_received);
-                } else {
-                    bubble = activity.getThemeResource(R.attr.message_bubble_received_green, R.drawable.message_bubble_received);
+                    viewHolder.message_box.getBackground().setColorFilter(
+                        StyledAttributes.getColor(activity, mUseGreenBackground ? R.attr.message_bubble_received_bg : R.attr.color_background_primary),
+                        PorterDuff.Mode.SRC_ATOP
+                    );
                 }
-                viewHolder.message_box.setBackgroundResource(bubble);
                 viewHolder.encryption.setVisibility(View.GONE);
             } else {
-                viewHolder.message_box.setBackgroundResource(R.drawable.message_bubble_received);
                 viewHolder.encryption.setVisibility(View.VISIBLE);
                 if (omemoEncryption && !message.isTrusted()) {
                     viewHolder.encryption.setText(R.string.not_trusted);

src/main/res/drawable/message_bubble_received.xml 🔗

@@ -1,19 +1,52 @@
 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="rectangle">
-    <corners
-        android:radius="0dp"
-        android:bottomLeftRadius="5dp"
-        android:bottomRightRadius="5dp"
-        android:topLeftRadius="0dp"
-        android:topRightRadius="5dp" />
-    <padding
-        android:bottom="0dp"
-        android:left="5dp"
-        android:right="5dp"
-        android:top="0dp" />
-    <size
-        android:width="10dp"
-        android:height="10dp" />
-    <solid android:color="?message_bubble_received_bg" />
-</shape>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:left="15dp" android:top="1dp">
+        <shape android:shape="rectangle">
+            <corners
+                android:radius="0dp"
+                android:bottomLeftRadius="2dp"
+                android:bottomRightRadius="2dp"
+                android:topLeftRadius="0dp"
+                android:topRightRadius="2dp" />
+            <padding
+                android:bottom="0dp"
+                android:left="5dp"
+                android:right="5dp"
+                android:top="0dp" />
+            <size android:width="10dp" android:height="10dp" />
+            <solid android:color="?message_bubble_received_bg" />
+        </shape>
+    </item>
+    <item android:bottom="2dp" android:gravity="top|left" android:width="10dp" android:height="10dp" android:top="1dp">
+        <vector
+           android:width="24dp"
+           android:height="24dp"
+           android:viewportWidth="24.0"
+           android:viewportHeight="24.0">
+           <path
+                android:pathData="M24,0 V 24 L0,0 z"
+                android:strokeColor="?message_bubble_received_bg"
+                android:fillColor="?message_bubble_received_bg"/>
+        </vector>
+    </item>
+    <item android:gravity="top|left" android:top="-0.5dp" android:left="1dp" android:right="-2dp">
+        <shape android:shape="rectangle">
+            <corners
+                android:radius="0dp"
+                android:bottomLeftRadius="0dp"
+                android:bottomRightRadius="0dp"
+                android:topLeftRadius="0dp"
+                android:topRightRadius="2dp" />
+            <padding
+                android:bottom="0dp"
+                android:left="0dp"
+                android:right="0dp"
+                android:top="0dp" />
+            <size android:height="1dp" />
+            <gradient
+                android:startColor="?message_bubble_shadow_dark_top"
+                android:endColor="?message_bubble_shadow_light"
+                android:angle="90"/>
+        </shape>
+    </item>
+</layer-list>

src/main/res/drawable/message_bubble_sent.xml 🔗

@@ -1,19 +1,52 @@
 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="rectangle">
-    <corners
-        android:radius="0dp"
-        android:bottomLeftRadius="5dp"
-        android:bottomRightRadius="0dp"
-        android:topLeftRadius="5dp"
-        android:topRightRadius="5dp" />
-    <padding
-        android:bottom="0dp"
-        android:left="5dp"
-        android:right="5dp"
-        android:top="0dp" />
-    <size
-        android:width="10dp"
-        android:height="10dp" />
-    <solid android:color="?message_bubble_sent_bg" />
-</shape>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:right="15dp" android:bottom="2dp">
+        <shape android:shape="rectangle">
+            <corners
+                android:radius="0dp"
+                android:bottomLeftRadius="2dp"
+                android:bottomRightRadius="0dp"
+                android:topLeftRadius="2dp"
+                android:topRightRadius="2dp" />
+            <padding
+                android:bottom="0dp"
+                android:left="5dp"
+                android:right="5dp"
+                android:top="0dp" />
+            <size android:width="10dp" android:height="10dp" />
+            <solid android:color="?message_bubble_sent_bg" />
+        </shape>
+    </item>
+    <item android:bottom="2dp" android:gravity="bottom|right" android:width="10dp" android:height="10dp">
+        <vector
+           android:width="24dp"
+           android:height="24dp"
+           android:viewportWidth="24.0"
+           android:viewportHeight="24.0">
+           <path
+                android:pathData="M0,24 V 0 L24,24 z"
+                android:strokeColor="?message_bubble_sent_bg"
+                android:fillColor="?message_bubble_sent_bg"/>
+        </vector>
+    </item>
+    <item android:gravity="left|bottom" android:bottom="-0.5dp" android:left="-3dp" android:right="1dp">
+        <shape android:shape="rectangle">
+            <corners
+                android:radius="0dp"
+                android:bottomLeftRadius="2dp"
+                android:bottomRightRadius="0dp"
+                android:topLeftRadius="0dp"
+                android:topRightRadius="0dp" />
+            <padding
+                android:bottom="0dp"
+                android:left="0dp"
+                android:right="0dp"
+                android:top="0dp" />
+            <size android:height="2dp" />
+            <gradient
+                android:startColor="?message_bubble_shadow_light"
+                android:endColor="?message_bubble_shadow_dark"
+                android:angle="90"/>
+        </shape>
+    </item>
+</layer-list>

src/main/res/layout/message_bubble_received.xml 🔗

@@ -1,105 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="fill_parent"
-    android:layout_height="wrap_content"
-    android:orientation="vertical"
-    android:paddingBottom="3dp"
-    android:paddingLeft="8dp"
-    android:paddingRight="8dp"
-    android:paddingTop="3dp">
-
-    <com.makeramen.roundedimageview.RoundedImageView
-        android:id="@+id/message_photo"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
-        android:layout_alignParentLeft="true"
-        android:layout_alignParentTop="true"
-        android:scaleType="fitXY"
-        app:riv_corner_radius="2dp" />
-
-    <LinearLayout
-        android:id="@+id/message_box"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_alignParentBottom="true"
-        android:layout_marginLeft="5dp"
-        android:layout_toRightOf="@+id/message_photo"
-        android:background="@drawable/message_bubble_received"
-        android:longClickable="true"
-        android:minHeight="53dp">
-
-        <LinearLayout
-            android:layout_width="wrap_content"
-            android:layout_height="fill_parent"
-            android:gravity="center_vertical"
-            android:orientation="vertical"
-            android:padding="2dp">
-
-            <include
-                android:id="@+id/message_content"
-                layout="@layout/message_content" />
-
-            <LinearLayout
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="left"
-                android:orientation="horizontal"
-                android:paddingBottom="2dp">
-
-                <TextView
-                    android:id="@+id/message_subject"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_vertical"
-                    android:layout_marginRight="4sp"
-                    android:accessibilityTraversalAfter="@id/message_photo"
-                    android:accessibilityTraversalBefore="@id/message_time"
-                    android:gravity="center_vertical"
-                    android:textAppearance="@style/TextAppearance.Conversations.Caption.OnDark.Bold"
-                    android:visibility="gone" />
-
-                <TextView
-                    android:id="@+id/message_encryption"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_vertical"
-                    android:layout_marginRight="4sp"
-                    android:gravity="center_vertical"
-                    android:textAppearance="@style/TextAppearance.Conversations.Caption.OnDark.Bold" />
-
-                <ImageView
-                    android:id="@+id/security_indicator"
-                    android:layout_width="?attr/TextSizeCaption"
-                    android:layout_height="?attr/TextSizeCaption"
-                    android:layout_gravity="center_vertical"
-                    android:layout_marginRight="4sp"
-                    android:alpha="0.70"
-                    android:gravity="center_vertical"
-                    android:src="@drawable/ic_lock_white_18dp" />
-
-                <ImageView
-                    android:id="@+id/edit_indicator"
-                    android:layout_width="?attr/TextSizeCaption"
-                    android:layout_height="?attr/TextSizeCaption"
-                    android:layout_gravity="center_vertical"
-                    android:layout_marginRight="4sp"
-                    android:alpha="0.70"
-                    android:gravity="center_vertical"
-                    android:src="@drawable/ic_mode_edit_white_18dp" />
-
-                <TextView
-                    android:id="@+id/message_time"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_vertical"
-                    android:accessibilityTraversalAfter="@id/message_photo"
-                    android:accessibilityTraversalBefore="@id/message_content"
-                    android:gravity="center_vertical"
-                    android:text="@string/sending"
-                    android:textAppearance="@style/TextAppearance.Conversations.Caption" />
-            </LinearLayout>
-        </LinearLayout>
-    </LinearLayout>
-
-</RelativeLayout>

src/main/res/layout/message_received.xml 🔗

@@ -1,13 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-                xmlns:app="http://schemas.android.com/apk/res-auto"
-                android:layout_width="fill_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingBottom="3dp"
-                android:paddingLeft="8dp"
-                android:paddingRight="8dp"
-                android:paddingTop="3dp">
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="fill_parent"
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:clipToPadding="false"
+    android:paddingBottom="3dp"
+    android:paddingLeft="8dp"
+    android:paddingRight="8dp"
+    android:paddingTop="3dp">
 
     <com.makeramen.roundedimageview.RoundedImageView
         android:id="@+id/message_photo"
@@ -23,12 +24,15 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
+        android:layout_marginLeft="5dp"
+        android:paddingLeft="20dp"
+        android:paddingTop="5dp"
+        android:paddingBottom="5dp"
         android:layout_toRightOf="@+id/message_photo"
-        android:background="@drawable/message_bubble_received"
-        android:minHeight="53dp"
-        android:layout_marginTop="-2dp"
-        android:layout_marginRight="-4dp"
-        android:longClickable="true">
+        android:elevation="3dp"
+        android:background="?attr/message_bubble_received"
+        android:longClickable="true"
+        android:minHeight="53dp">
 
         <LinearLayout
             android:layout_width="wrap_content"
@@ -39,7 +43,7 @@
 
             <include
                 android:id="@+id/message_content"
-                layout="@layout/message_content"/>
+                layout="@layout/message_content" />
 
             <LinearLayout
                 android:layout_width="wrap_content"
@@ -50,24 +54,24 @@
 
                 <TextView
                     android:id="@+id/message_subject"
-                    android:visibility="gone"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_gravity="center_vertical"
-                    android:gravity="center_vertical"
                     android:layout_marginRight="4sp"
                     android:accessibilityTraversalAfter="@id/message_photo"
                     android:accessibilityTraversalBefore="@id/message_time"
-                    android:textAppearance="@style/TextAppearance.Conversations.Caption.OnDark.Bold"/>
+                    android:gravity="center_vertical"
+                    android:textAppearance="@style/TextAppearance.Conversations.Caption.OnDark.Bold"
+                    android:visibility="gone" />
 
                 <TextView
                     android:id="@+id/message_encryption"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_gravity="center_vertical"
-                    android:gravity="center_vertical"
                     android:layout_marginRight="4sp"
-                    android:textAppearance="@style/TextAppearance.Conversations.Caption.OnDark.Bold"/>
+                    android:gravity="center_vertical"
+                    android:textAppearance="@style/TextAppearance.Conversations.Caption.OnDark.Bold" />
 
                 <ImageView
                     android:id="@+id/security_indicator"
@@ -94,11 +98,11 @@
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_gravity="center_vertical"
-                    android:gravity="center_vertical"
-                    android:text="@string/sending"
                     android:accessibilityTraversalAfter="@id/message_photo"
                     android:accessibilityTraversalBefore="@id/message_content"
-                    android:textAppearance="@style/TextAppearance.Conversations.Caption"/>
+                    android:gravity="center_vertical"
+                    android:text="@string/sending"
+                    android:textAppearance="@style/TextAppearance.Conversations.Caption" />
             </LinearLayout>
         </LinearLayout>
     </LinearLayout>

src/main/res/layout/message_sent.xml 🔗

@@ -4,6 +4,7 @@
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
+    android:clipToPadding="false"
     android:paddingLeft="8dp"
     android:paddingTop="3dp"
     android:paddingRight="8dp"
@@ -38,8 +39,11 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
-        android:layout_marginRight="5dp"
+        android:layout_marginRight="0dp"
+        android:paddingRight="20dp"
         android:layout_toLeftOf="@+id/message_photo_box"
+        android:translationY="-2dp"
+        android:elevation="3dp"
         android:background="@drawable/message_bubble_sent"
         android:longClickable="true"
         android:minHeight="53dp">

src/main/res/values/attrs.xml 🔗

@@ -51,12 +51,14 @@
 
     <attr name="ic_cloud_download" format="reference" />
 
-    <attr name="message_bubble_received_monochrome" format="reference" />
     <attr name="message_bubble_sent" format="reference" />
-    <attr name="message_bubble_received_green" format="reference" />
+    <attr name="message_bubble_received" format="reference" />
 
     <attr name="message_bubble_received_bg"  format="color" />
     <attr name="message_bubble_sent_bg"  format="color" />
+    <attr name="message_bubble_shadow_light" format="color" />
+    <attr name="message_bubble_shadow_dark" format="color" />
+    <attr name="message_bubble_shadow_dark_top" format="color" />
 
     <attr name="unread_count" format="reference|color" />
 
@@ -131,4 +133,4 @@
 
     <attr name="popupOverlayStyle" format="reference" />
 
-</resources>
+</resources>