Move unread indicator to be above the avatar.

res/drawable/unread_count_background_dark.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <corners android:radius="@dimen/unread_count_bubble_radius" />
+
+    <solid android:color="@color/core_blue" />
+
+    <stroke
+        android:color="@color/core_grey_95"
+        android:width="1dp"/>
+
+</shape>

res/drawable/unread_count_background_light.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <corners android:radius="@dimen/unread_count_bubble_radius" />
+
+    <solid android:color="@color/core_blue" />
+
+    <stroke
+        android:color="@color/core_white"
+        android:width="1dp"/>
+
+</shape>

res/layout/conversation_list_item_view.xml

@@ -12,27 +12,47 @@
         android:paddingLeft="16dp"
         android:paddingRight="16dp">
 
-    <org.thoughtcrime.securesms.components.AvatarImageView
+    <FrameLayout
-        android:id="@+id/contact_photo_image"
+        android:id="@+id/avatar_container"
-        android:foreground="@drawable/contact_photo_background"
+        android:layout_width="54dp"
-        android:layout_width="48dp"
+        android:layout_height="wrap_content"
-        android:layout_height="48dp"
         android:layout_alignParentLeft="true"
         android:layout_alignParentStart="true"
         android:layout_centerVertical="true"
-        android:cropToPadding="true"
+        android:layout_marginRight="6dp"
-        tools:src="@drawable/ic_contact_picture"
+        android:layout_marginEnd="6dp">
-        android:contentDescription="@string/conversation_list_item_view__contact_photo_image"
+
-        android:layout_marginRight="12dp"
+        <org.thoughtcrime.securesms.components.AvatarImageView
-        android:layout_marginEnd="12dp" />
+            android:id="@+id/contact_photo_image"
+            android:foreground="@drawable/contact_photo_background"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            tools:src="@drawable/ic_contact_picture"
+            android:contentDescription="@string/conversation_list_item_view__contact_photo_image" />
+
+        <TextView
+            android:id="@+id/unread_indicator"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="right|end|top"
+            style="@style/Signal.Text.Caption"
+            android:fontFamily="sans-serif-medium"
+            android:minWidth="@dimen/unread_count_bubble_diameter"
+            android:padding="5sp"
+            android:background="?conversation_list_item_unread_background"
+            android:textColor="@color/core_white"
+            android:gravity="center"
+            tools:text="1"/>
+
+    </FrameLayout>
 
     <RelativeLayout android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:layout_marginLeft="4dp"
                   android:layout_marginStart="4dp"
                   android:layout_centerVertical="true"
-                  android:layout_toRightOf="@id/contact_photo_image"
+                  android:layout_toRightOf="@id/avatar_container"
-                  android:layout_toEndOf="@id/contact_photo_image"
+                  android:layout_toEndOf="@id/avatar_container"
                   android:weightSum="1"
                   android:orientation="horizontal">
 
@@ -151,10 +171,6 @@
                     android:layout_gravity="center_vertical"
                     app:iconColor="?attr/conversation_list_item_delivery_icon_color"/>
 
-            <ImageView android:id="@+id/unread_indicator"
-                       android:layout_width="24dp"
-                       android:layout_height="24dp"/>
-
         </FrameLayout>
 
     </RelativeLayout>

res/values/attrs.xml

@@ -12,6 +12,7 @@
     <attr name="conversation_list_item_delivery_icon_color" format="reference|color"/>
     <attr name="conversation_list_item_date_color" format="reference|color"/>
     <attr name="conversation_list_item_unread_color" format="reference|color"/>
+    <attr name="conversation_list_item_unread_background" format="reference"/>
     <attr name="conversation_list_item_divider" format="reference"/>
     <attr name="conversation_list_toolbar_background" format="reference"/>
 

res/values/dimens.xml

@@ -55,6 +55,9 @@
     <dimen name="conversation_list_fragment_archive_padding">16dp</dimen>
     <dimen name="contact_selection_actions_tap_area">10dp</dimen>
 
+    <dimen name="unread_count_bubble_radius">13sp</dimen>
+    <dimen name="unread_count_bubble_diameter">26sp</dimen>
+
     <!-- RedPhone -->
 
     <!-- Height of the main row of in-call buttons. -->

res/values/themes.xml

@@ -137,6 +137,7 @@
         <item name="conversation_list_item_delivery_icon_color">@color/core_grey_45</item>
         <item name="conversation_list_item_date_color">@color/core_grey_60</item>
         <item name="conversation_list_item_unread_color">@color/core_black</item>
+        <item name="conversation_list_item_unread_background">@drawable/unread_count_background_light</item>
         <item name="conversation_list_item_divider">@drawable/conversation_list_divider_shape</item>
         <item name="conversation_list_toolbar_background">@color/core_blue</item>
 
@@ -284,6 +285,7 @@
         <item name="conversation_list_item_delivery_icon_color">@color/core_grey_45</item>
         <item name="conversation_list_item_date_color">#ffdddddd</item>
         <item name="conversation_list_item_unread_color">@color/core_white</item>
+        <item name="conversation_list_item_unread_background">@drawable/unread_count_background_dark</item>
         <item name="conversation_list_item_divider">@drawable/conversation_list_divider_shape_dark</item>
         <item name="conversation_list_toolbar_background">@color/core_grey_90</item>
 

src/org/thoughtcrime/securesms/ConversationListItem.java

@@ -81,7 +81,7 @@ public class ConversationListItem extends RelativeLayout
   private TextView           archivedView;
   private DeliveryStatusView deliveryStatusIndicator;
   private AlertView          alertView;
-  private ImageView          unreadIndicator;
+  private TextView           unreadIndicator;
   private long               lastSeen;
 
   private int             unreadCount;
@@ -311,14 +311,7 @@ public class ConversationListItem extends RelativeLayout
       return;
     }
 
-    unreadIndicator.setImageDrawable(TextDrawable.builder()
+    unreadIndicator.setText(String.valueOf(unreadCount));
-                                                 .beginConfig()
-                                                 .width(ViewUtil.dpToPx(getContext(), 24))
-                                                 .height(ViewUtil.dpToPx(getContext(), 24))
-                                                 .textColor(Color.WHITE)
-                                                 .bold()
-                                                 .endConfig()
-                                                 .buildRound(String.valueOf(thread.getUnreadCount()), getResources().getColor(R.color.textsecure_primary_dark)));
     unreadIndicator.setVisibility(View.VISIBLE);
   }