From edc54be6a456f86c902ff866004b26e01df47e1b Mon Sep 17 00:00:00 2001
From: Carl Vuorinen <carl.vuorinen@gmail.com>
Date: Wed, 17 Apr 2019 08:31:34 +0300
Subject: [PATCH] Change badge color from red to purple + improved badge layout

Previously with the padding in the badge shape, it didn't handle large
numbers well (partly cut off) and also the shape wasn't round with small
numbers. Using minWidth & center gravity without padding fixes both issues.
---
 Habitica/res/drawable/badge_circle.xml       |  7 +--
 Habitica/res/drawable/badge_gray.xml         |  6 +--
 Habitica/res/layout/drawer_main.xml          | 52 ++++++++++++--------
 Habitica/res/layout/notifications_header.xml |  4 +-
 4 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/Habitica/res/drawable/badge_circle.xml b/Habitica/res/drawable/badge_circle.xml
index 5b8a552fe..618daf35c 100644
--- a/Habitica/res/drawable/badge_circle.xml
+++ b/Habitica/res/drawable/badge_circle.xml
@@ -4,10 +4,5 @@
     <corners
         android:radius="10dip"/>
     <solid
-        android:color="@color/red_50" />
-    <padding
-        android:left="5dip"
-        android:right="5dip"
-        android:top="5dip"
-        android:bottom="5dip" />
+        android:color="@color/brand_400" />
 </shape>
\ No newline at end of file
diff --git a/Habitica/res/drawable/badge_gray.xml b/Habitica/res/drawable/badge_gray.xml
index b350748be..206ef9eac 100644
--- a/Habitica/res/drawable/badge_gray.xml
+++ b/Habitica/res/drawable/badge_gray.xml
@@ -2,12 +2,10 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <corners
-        android:radius="12dip"/>
+        android:radius="100dip"/>
     <solid
         android:color="@color/gray_600" />
     <padding
         android:left="6dip"
-        android:right="6dip"
-        android:top="3dip"
-        android:bottom="5dip" />
+        android:right="6dip" />
 </shape>
\ No newline at end of file
diff --git a/Habitica/res/layout/drawer_main.xml b/Habitica/res/layout/drawer_main.xml
index 2e1aad976..d718d1a0b 100644
--- a/Habitica/res/layout/drawer_main.xml
+++ b/Habitica/res/layout/drawer_main.xml
@@ -70,21 +70,24 @@
                 android:src="@drawable/menu_notifications"
                 android:layout_centerVertical="true"
                 android:clickable="false" />
+
             <TextView
                 android:id="@+id/notificationsBadge"
                 android:layout_width="wrap_content"
                 android:layout_height="20dp"
-                android:paddingTop="0dp"
-                android:layout_alignTop="@id/notificationsButton"
                 android:layout_alignLeft="@id/notificationsButton"
-                tools:text="1"
+                android:layout_alignTop="@id/notificationsButton"
+                android:layout_marginLeft="13dp"
+                android:layout_marginTop="-13dp"
+                android:background="@drawable/badge_circle"
+                android:gravity="center"
+                android:minWidth="20dp"
+                android:paddingTop="0dp"
                 android:textColor="#FFF"
                 android:textSize="12sp"
-                android:background="@drawable/badge_circle"
-                android:layout_marginTop="-12dp"
-                android:layout_marginLeft="13dp"
                 android:visibility="gone"
-                tools:visibility="visible"/>
+                tools:text="1"
+                tools:visibility="visible" />
         </RelativeLayout>
         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/messagesButtonWrapper"
@@ -99,21 +102,24 @@
                 android:src="@drawable/menu_messages"
                 android:layout_centerVertical="true"
                 android:clickable="false" />
+
             <TextView
                 android:id="@+id/messagesBadge"
                 android:layout_width="wrap_content"
                 android:layout_height="20dp"
-                android:paddingTop="0dp"
-                android:layout_alignTop="@id/messagesButton"
                 android:layout_alignLeft="@id/messagesButton"
-                tools:text="1"
+                android:layout_alignTop="@id/messagesButton"
+                android:layout_marginLeft="13dp"
+                android:layout_marginTop="-12dp"
+                android:background="@drawable/badge_circle"
+                android:gravity="center"
+                android:minWidth="20dp"
+                android:paddingTop="0dp"
                 android:textColor="#FFF"
                 android:textSize="12sp"
-                android:background="@drawable/badge_circle"
-                android:layout_marginTop="-12dp"
-                android:layout_marginLeft="13dp"
                 android:visibility="gone"
-                tools:visibility="visible"/>
+                tools:text="1"
+                tools:visibility="visible" />
         </RelativeLayout>
         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/settingsButtonWrapper"
@@ -127,21 +133,25 @@
                 android:background="@color/transparent"
                 android:src="@drawable/menu_settings"
                 android:layout_centerVertical="true"/>
+
             <TextView
                 android:id="@+id/settingsBadge"
                 android:layout_width="wrap_content"
                 android:layout_height="20dp"
-                android:paddingTop="0dp"
-                android:layout_alignTop="@id/settingsButton"
                 android:layout_alignLeft="@id/settingsButton"
-                tools:text="1"
+                android:layout_alignTop="@id/settingsButton"
+                android:layout_centerVertical="true"
+                android:layout_marginLeft="13dp"
+                android:layout_marginTop="-12dp"
+                android:background="@drawable/badge_circle"
+                android:gravity="center"
+                android:minWidth="20dp"
+                android:paddingTop="0dp"
                 android:textColor="#FFF"
                 android:textSize="12sp"
-                android:background="@drawable/badge_circle"
-                android:layout_marginTop="-12dp"
-                android:layout_marginLeft="13dp"
                 android:visibility="gone"
-                tools:visibility="visible"/>
+                tools:text="1"
+                tools:visibility="visible" />
         </RelativeLayout>
 
     </LinearLayout>
diff --git a/Habitica/res/layout/notifications_header.xml b/Habitica/res/layout/notifications_header.xml
index eadfb6eb9..bcdc9c3d9 100644
--- a/Habitica/res/layout/notifications_header.xml
+++ b/Habitica/res/layout/notifications_header.xml
@@ -31,9 +31,11 @@
         <TextView
             android:id="@+id/notifications_title_badge"
             android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
+            android:layout_height="24dp"
             android:layout_marginLeft="10dp"
             android:background="@drawable/badge_gray"
+            android:gravity="center"
+            android:minWidth="24dp"
             android:textColor="@color/gray_300"
             android:textSize="12sp"
             tools:text="1" />