Message bubble as xml, and outlined bubble for notices

Change-Id: Ieb16e917456e2b8dd4fea9de8b88684be0c8bff4

generate_bubbles.sh

@@ -0,0 +1,96 @@
+#!/bin/bash
+
+set -e
+
+my_dir="$(dirname "$(realpath "$0")")"
+pushd "$my_dir" > /dev/null
+
+res_dir="vector/src/main/res/"
+god_bubble="vector/src/main/res/drawable/msg_godbubble.xml"
+
+# Multiline sed -i
+function mised() {
+    local expression="$1"
+    local file="$2"
+    local tmpfile="$file.tmp"
+    cp "$file" "$tmpfile"
+    cat "$tmpfile" \
+        | tr "\n" "\r" \
+        | sed "$expression" \
+        | tr "\r" "\n" \
+        > "$file"
+    rm "$tmpfile"
+}
+
+function create_msg_bubble() {
+    local is_outgoing="$1"
+    local is_rtl="$2"
+    local is_notice="$3"
+    local has_tail="$4"
+
+    # Out file name
+    local out_bubble="$res_dir/drawable"
+    if ((is_rtl)); then
+        local out_bubble="$out_bubble-ldrtl"
+    fi
+    local out_bubble="$out_bubble/msg_bubble"
+    if ((is_notice)); then
+        local out_bubble="${out_bubble}_notice"
+    else
+        local out_bubble="${out_bubble}_text"
+    fi
+    if ((is_outgoing)); then
+        local out_bubble="${out_bubble}_outgoing"
+    else
+        local out_bubble="${out_bubble}_incoming"
+    fi
+    if !((has_tail)); then
+        local out_bubble="${out_bubble}_notail"
+    fi
+    local out_bubble="${out_bubble}.xml"
+
+    # Copy
+    cp "$god_bubble" "$out_bubble"
+    echo "$out_bubble"
+
+    # Modify direction
+    if [ "$is_rtl" != "$is_outgoing" ]; then
+        sed -i 's|left|loft|g;s|Left|Loft|g;s|right|left|g;s|Right|Left|g;s|loft|right|g;s|Loft|Right|g' "$out_bubble"
+        mised 's|<!-- LTR tail -->.*<!-- RTL tail -->||' "$out_bubble"
+    else
+        mised 's|<!-- RTL tail -->.*<!-- tail end -->||' "$out_bubble"
+    fi
+    # Remove tail
+    if ((has_tail)); then
+        mised 's|<!-- Filled for no tail -->.*<!-- Filled end -->||' "$out_bubble"
+    else
+        mised 's|<!-- Filled for tail -->.*\(<!-- Filled for no tail -->\)|\1|' "$out_bubble"
+        mised 's|<!-- Tail -->.*<!-- Tail end -->||' "$out_bubble"
+        mised 's|<!-- Outer radius -->.*\(<!-- Inner radius -->\)|\1|' "$out_bubble"
+    fi
+    # Modify fill
+    if !((is_notice)); then
+        sed -i 's|sc_notice_bg|sc_message_bg|g' "$out_bubble"
+        mised 's|<!-- Outer radius -->.*\(<!-- Inner radius -->\)|\1|' "$out_bubble"
+        mised 's|<!-- Inner radius -->.*<!-- Radius end -->||' "$out_bubble"
+    fi
+    # Modify color
+    if ((is_outgoing)); then
+        sed -i 's|_incoming|_outgoing|g' "$out_bubble"
+    fi
+    # Remove unneeded size, which only exists to make it look nicer in drawable preview
+    sed -i 's|<size.*/>||g' "$out_bubble"
+}
+
+for is_outgoing in 0 1; do
+    for is_rtl in 0 1; do
+        for is_notice in 0 1; do
+            for has_tail in 0 1; do
+                create_msg_bubble "$is_outgoing" "$is_rtl" "$is_notice" "$has_tail"
+            done
+        done
+    done
+done
+
+
+popd > /dev/null

library/ui-styles/src/main/res/values/attrs_sc.xml

@@ -5,6 +5,8 @@
 
         <attr name="sc_message_bg_incoming" format="color" />
         <attr name="sc_message_bg_outgoing" format="color" />
+        <attr name="sc_notice_bg_incoming" format="color" />
+        <attr name="sc_notice_bg_outgoing" format="color" />
 
         <attr name="colorAccentPale" format="color" />
         <attr name="backgroundColorLight" format="color" />

library/ui-styles/src/main/res/values/theme_dark.xml

@@ -122,6 +122,8 @@
         <!-- SC additions -->
         <item name="sc_message_bg_incoming">#FF465561</item>
         <item name="sc_message_bg_outgoing">#ff343b47</item>
+        <item name="sc_notice_bg_incoming">@android:color/transparent</item>
+        <item name="sc_notice_bg_outgoing">@android:color/transparent</item>
         <item name="riotx_unread_unimportant_room_badge">@color/vctr_unread_room_badge_dark</item>
         <item name="timestamp_overlay_fg">@color/timestamp_overlay_fg</item>
         <item name="timestamp_overlay_bg">@color/timestamp_overlay_bg</item>

library/ui-styles/src/main/res/values/theme_light.xml

@@ -122,6 +122,8 @@
         <!-- SC additions -->
         <item name="sc_message_bg_incoming">#FFEEEEEE</item>
         <item name="sc_message_bg_outgoing">#FFDDDDDD</item>
+        <item name="sc_notice_bg_incoming">@android:color/transparent</item>
+        <item name="sc_notice_bg_outgoing">@android:color/transparent</item>
         <item name="riotx_unread_unimportant_room_badge">@color/vctr_unread_room_badge_light</item>
         <item name="timestamp_overlay_fg">@color/timestamp_overlay_fg</item>
         <item name="timestamp_overlay_bg">@color/timestamp_overlay_bg</item>

library/ui-styles/src/main/res/values/theme_sc.xml

@@ -87,6 +87,8 @@
         <item name="android:colorAccent">@color/accent_sc</item>
         <item name="sc_message_bg_incoming">@color/background_floating_sc</item>
         <item name="sc_message_bg_outgoing">@color/background_sc</item>
+        <item name="sc_notice_bg_incoming">@android:color/transparent</item>
+        <item name="sc_notice_bg_outgoing">@android:color/transparent</item>
         <item name="riotx_unread_unimportant_room_badge">@color/background_floating_sc</item>
         <item name="colorAccentPale">@color/accent_sc_pale</item>
         <item name="message_highlight_bg_color">@color/accent_sc_alpha25</item>

library/ui-styles/src/main/res/values/theme_sc_light.xml

@@ -87,6 +87,8 @@
         <item name="android:colorAccent">@color/accent_sc</item>
         <item name="sc_message_bg_incoming">@color/background_sc_light_secondary</item>
         <item name="sc_message_bg_outgoing">@color/accent_sc_noalpha12</item>
+        <item name="sc_notice_bg_incoming">@android:color/transparent</item>
+        <item name="sc_notice_bg_outgoing">@android:color/transparent</item>
         <item name="riotx_unread_unimportant_room_badge">#737373</item><!-- like text_color_secondary_sc_light, but without transparency -->
         <item name="colorAccentPale">@color/accent_sc_pale</item>
         <item name="message_highlight_bg_color">#ffe0e0e0</item>

vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/AbsMessageItem.kt

@@ -456,18 +456,36 @@ abstract class AbsMessageItem<H : AbsMessageItem.Holder> : AbsBaseMessageItem<H>
                 val longPadding: Int
                 val shortPadding: Int
                 if (BubbleThemeUtils.drawsActualBubbles(bubbleStyle)) {
-                    if (attributes.informationData.showInformation) {
-                        bubbleView.setBackgroundResource(if (reverseBubble) R.drawable.msg_bubble_outgoing else R.drawable.msg_bubble_incoming)
-                    } else {
-                        bubbleView.setBackgroundResource(if (reverseBubble) R.drawable.msg_bubble2_outgoing else R.drawable.msg_bubble2_incoming)
+                    val bubbleRes = if (attributes.isNotice) { // notice
+                        if (attributes.informationData.showInformation) { // tail
+                            if (reverseBubble) { // outgoing
+                                R.drawable.msg_bubble_notice_outgoing
+                            } else { // incoming
+                                R.drawable.msg_bubble_notice_incoming
+                            }
+                        } else { // notail
+                            if (reverseBubble) { // outgoing
+                                R.drawable.msg_bubble_notice_outgoing_notail
+                            } else { // incoming
+                                R.drawable.msg_bubble_notice_incoming_notail
+                            }
+                        }
+                    } else { // text
+                        if (attributes.informationData.showInformation) { // tail
+                            if (reverseBubble) { // outgoing
+                                R.drawable.msg_bubble_text_outgoing
+                            } else { // incoming
+                                R.drawable.msg_bubble_text_incoming
+                            }
+                        } else { // notail
+                            if (reverseBubble) { // outgoing
+                                R.drawable.msg_bubble_text_outgoing_notail
+                            } else { // incoming
+                                R.drawable.msg_bubble_text_incoming_notail
+                            }
+                        }
                     }
-                    val tintColor = ColorStateList(
-                            arrayOf(intArrayOf(0)),
-                            intArrayOf(ThemeUtils.getColor(bubbleView.context,
-                                    if (attributes.informationData.sentByMe) R.attr.sc_message_bg_outgoing else R.attr.sc_message_bg_incoming)
-                            )
-                    )
-                    bubbleView.backgroundTintList = tintColor
+                    bubbleView.setBackgroundResource(bubbleRes)
                     longPadding = 20
                     shortPadding = 8
                 } else {

vector/src/main/res/drawable-ldrtl/msg_bubble_notice_incoming.xml

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    
+
+    <!-- Outer radius -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            
+
+            <stroke android:color="?sc_message_bg_incoming"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    <!-- Inner radius -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_incoming"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|right">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            
+            <path
+                android:pathData="M10,0 L0,10 L0,0 Z"
+                android:fillColor="?sc_message_bg_incoming" />
+            <!-- tail end -->
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/drawable-ldrtl/msg_bubble_notice_incoming_notail.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for no tail -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    <!-- Inner radius -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_incoming"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    
+</layer-list>

vector/src/main/res/drawable-ldrtl/msg_bubble_notice_outgoing.xml

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_outgoing" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    
+
+    <!-- Outer radius -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            
+
+            <stroke android:color="?sc_message_bg_outgoing"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    <!-- Inner radius -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_outgoing"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|left">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            <!-- LTR tail -->
+            <path
+                android:pathData="M0,0 L10,10 L10,0 Z"
+                android:fillColor="?sc_message_bg_outgoing" />
+            
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/drawable-ldrtl/msg_bubble_notice_outgoing_notail.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for no tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_outgoing" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    <!-- Inner radius -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_outgoing"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    
+</layer-list>

vector/src/main/res/drawable-ldrtl/msg_bubble_text_incoming.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_message_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    
+
+    
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|right">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            
+            <path
+                android:pathData="M10,0 L0,10 L0,0 Z"
+                android:fillColor="?sc_message_bg_incoming" />
+            <!-- tail end -->
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/drawable-ldrtl/msg_bubble_text_incoming_notail.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for no tail -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_message_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    
+
+    
+</layer-list>

vector/src/main/res/drawable-ldrtl/msg_bubble_text_outgoing.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_message_bg_outgoing" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    
+
+    
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|left">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            <!-- LTR tail -->
+            <path
+                android:pathData="M0,0 L10,10 L10,0 Z"
+                android:fillColor="?sc_message_bg_outgoing" />
+            
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/drawable-ldrtl/msg_bubble_text_outgoing_notail.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for no tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_message_bg_outgoing" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    
+
+    
+</layer-list>

vector/src/main/res/drawable/msg_bubble_notice_incoming.xml

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    
+
+    <!-- Outer radius -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            
+
+            <stroke android:color="?sc_message_bg_incoming"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    <!-- Inner radius -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_incoming"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|left">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            <!-- LTR tail -->
+            <path
+                android:pathData="M0,0 L10,10 L10,0 Z"
+                android:fillColor="?sc_message_bg_incoming" />
+            
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/drawable/msg_bubble_notice_incoming_notail.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for no tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    <!-- Inner radius -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_incoming"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    
+</layer-list>

vector/src/main/res/drawable/msg_bubble_notice_outgoing.xml

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_outgoing" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    
+
+    <!-- Outer radius -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            
+
+            <stroke android:color="?sc_message_bg_outgoing"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    <!-- Inner radius -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_outgoing"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|right">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            
+            <path
+                android:pathData="M10,0 L0,10 L0,0 Z"
+                android:fillColor="?sc_message_bg_outgoing" />
+            <!-- tail end -->
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/drawable/msg_bubble_notice_outgoing_notail.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for no tail -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_outgoing" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    <!-- Inner radius -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_outgoing"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    
+</layer-list>

vector/src/main/res/drawable/msg_bubble_text_incoming.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_message_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    
+
+    
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|left">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            <!-- LTR tail -->
+            <path
+                android:pathData="M0,0 L10,10 L10,0 Z"
+                android:fillColor="?sc_message_bg_incoming" />
+            
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/drawable/msg_bubble_text_incoming_notail.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for no tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_message_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    
+
+    
+</layer-list>

vector/src/main/res/drawable/msg_bubble_text_outgoing.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_message_bg_outgoing" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    
+
+    
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|right">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            
+            <path
+                android:pathData="M10,0 L0,10 L0,0 Z"
+                android:fillColor="?sc_message_bg_outgoing" />
+            <!-- tail end -->
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/drawable/msg_bubble_text_outgoing_notail.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for no tail -->
+    <item android:right="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_message_bg_outgoing" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    
+
+    
+</layer-list>

vector/src/main/res/drawable/msg_godbubble.xml

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+IMPORTANT:
+Only modify msg_godbubble.xml, then run `generate_bubbles.sh` to update all actually used msg_bubble_*.xml drawables.
+Note also that most of the comments should not be changed without checking their use in `generate_bubbles.sh`.
+-->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Filled for tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    <!-- Filled for no tail -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <solid android:color="?sc_notice_bg_incoming" />
+
+            <corners android:radius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+    <!-- Filled end -->
+
+    <!-- Outer radius -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <size android:width="80dp" android:height="40dp" />
+
+            <stroke android:color="?sc_message_bg_incoming"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius" />
+
+        </shape>
+    </item>
+
+    <!-- Inner radius -->
+    <item android:left="@dimen/sc_bubble_tail_size">
+        <shape
+            android:shape="rectangle">
+
+            <stroke android:color="?sc_message_bg_incoming"
+                android:width="@dimen/sc_bubble_stroke" />
+
+            <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
+                android:bottomRightRadius="@dimen/sc_bubble_radius"
+                android:topRightRadius="@dimen/sc_bubble_radius"
+                android:topLeftRadius="@dimen/sc_bubble_radius_in_tail" />
+
+        </shape>
+    </item>
+    <!-- Radius end -->
+
+    <!-- Tail -->
+    <item
+        android:gravity="top|left">
+        <vector
+            android:width="@dimen/sc_bubble_tail_size"
+            android:height="@dimen/sc_bubble_tail_size"
+            android:viewportWidth="10.0"
+            android:viewportHeight="10.0">
+            <!-- LTR tail -->
+            <path
+                android:pathData="M0,0 L10,10 L10,0 Z"
+                android:fillColor="?sc_message_bg_incoming" />
+            <!-- RTL tail -->
+            <path
+                android:pathData="M10,0 L0,10 L0,0 Z"
+                android:fillColor="?sc_message_bg_incoming" />
+            <!-- tail end -->
+        </vector>
+    </item>
+    <!-- Tail end -->
+</layer-list>

vector/src/main/res/values/dimens_sc.xml

@@ -9,4 +9,9 @@
     <!-- As found in various layout stubs in item_timeline_event_base.xml -->
     <dimen name="no_bubble_margin_end">56dp</dimen>
 
+    <dimen name="sc_bubble_radius">3dp</dimen>
+    <dimen name="sc_bubble_radius_in_tail">3dp</dimen>
+    <dimen name="sc_bubble_tail_size">12dp</dimen>
+    <dimen name="sc_bubble_stroke">3dp</dimen>
+
 </resources>