From 18b038d8e43ca9a85771eb40286108921590494f Mon Sep 17 00:00:00 2001
From: Mauricio Colli <mauriciocolli@outlook.com>
Date: Mon, 17 Apr 2017 01:20:14 -0300
Subject: [PATCH] Improve notification layouts

---
 .../main/res/drawable/custom_progress_bar.xml |  17 ++
 .../main/res/layout/player_notification.xml   | 110 ++++++++-----
 .../layout/player_notification_expanded.xml   | 151 +++++++++++++++++-
 .../res/layout/player_popup_notification.xml  |  15 +-
 4 files changed, 250 insertions(+), 43 deletions(-)
 create mode 100644 app/src/main/res/drawable/custom_progress_bar.xml

diff --git a/app/src/main/res/drawable/custom_progress_bar.xml b/app/src/main/res/drawable/custom_progress_bar.xml
new file mode 100644
index 000000000..251cde171
--- /dev/null
+++ b/app/src/main/res/drawable/custom_progress_bar.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:id="@android:id/background">
+        <shape>
+            <solid android:color="@color/gray"/>
+        </shape>
+    </item>
+
+    <item android:id="@android:id/progress">
+        <clip>
+            <shape>
+                <solid android:color="@color/middle_gray"/>
+            </shape>
+        </clip>
+    </item>
+
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/layout/player_notification.xml b/app/src/main/res/layout/player_notification.xml
index 22a60418b..c7b70fb56 100644
--- a/app/src/main/res/layout/player_notification.xml
+++ b/app/src/main/res/layout/player_notification.xml
@@ -1,16 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:id="@+id/notificationContent"
-    android:layout_width="fill_parent"
-    android:layout_height="wrap_content"
-    android:clickable="true"
-    android:gravity="center_vertical"
-    android:orientation="horizontal"
-    android:background="@color/background_notification_color">
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+             android:layout_width="match_parent"
+             android:layout_height="64dp"
+             xmlns:tools="http://schemas.android.com/tools">
 
     <LinearLayout
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:tools="http://schemas.android.com/tools"
+        android:id="@+id/notificationContent"
         android:layout_width="match_parent"
         android:layout_height="64dp"
+        android:background="@color/background_notification_color"
+        android:clickable="true"
         android:gravity="center_vertical"
         android:orientation="horizontal">
 
@@ -18,65 +19,102 @@
             android:id="@+id/notificationCover"
             android:layout_width="64dp"
             android:layout_height="64dp"
+            android:scaleType="centerCrop"
             android:src="@drawable/dummy_thumbnail"
-            android:scaleType="centerCrop"/>
+            tools:ignore="ContentDescription"/>
 
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginLeft="8dp"
             android:layout_weight="1"
-            android:orientation="vertical" >
+            android:orientation="vertical"
+            tools:ignore="RtlHardcoded">
 
             <TextView
                 android:id="@+id/notificationSongName"
                 style="@android:style/TextAppearance.StatusBar.EventContent.Title"
-                android:layout_width="wrap_content"
+                android:layout_width="match_parent"
+                android:ellipsize="end"
                 android:layout_height="wrap_content"
-                android:ellipsize="marquee"
-                android:singleLine="true"
-                android:text="title" />
+                android:maxLines="1"
+                android:textSize="14sp"
+                tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec aliquam augue, eget cursus est. Ut id tristique enim, ut scelerisque tellus. Sed ultricies ipsum non mauris ultricies, commodo malesuada velit porta."/>
 
             <TextView
                 android:id="@+id/notificationArtist"
+                android:layout_width="match_parent"
                 style="@android:style/TextAppearance.StatusBar.EventContent"
-                android:layout_width="wrap_content"
+                android:ellipsize="end"
                 android:layout_height="wrap_content"
-                android:ellipsize="marquee"
-                android:singleLine="true"
-                android:text="artist" />
+                android:maxLines="1"
+                android:textSize="12sp"
+                tools:text="Duis posuere arcu condimentum lobortis mattis."/>
         </LinearLayout>
 
         <ImageButton
-            android:id="@+id/notificationRewind"
+            android:id="@+id/notificationRepeat"
             android:layout_width="40dp"
-            android:layout_height="40dp"
-            android:layout_margin="5dp"
-            android:background="#00ffffff"
+            android:layout_height="match_parent"
+            android:background="#00000000"
             android:clickable="true"
-            android:scaleType="fitXY"
-            android:src="@drawable/ic_action_av_fast_rewind" />
+            android:padding="5dp"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_repeat_white"
+            tools:ignore="ContentDescription"/>
+
+        <ImageButton
+            android:id="@+id/notificationFRewind"
+            android:layout_width="45dp"
+            android:layout_height="match_parent"
+            android:background="#00000000"
+            android:clickable="true"
+            android:padding="5dp"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_action_av_fast_rewind"
+            tools:ignore="ContentDescription"/>
 
         <ImageButton
             android:id="@+id/notificationPlayPause"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
-            android:layout_margin="5dp"
-            android:background="#00ffffff"
+            android:layout_width="45dp"
+            android:layout_height="match_parent"
+            android:background="#00000000"
             android:clickable="true"
-            android:scaleType="fitXY"
-            android:src="@drawable/ic_pause_white" />
+            android:src="@drawable/ic_pause_white"
+            tools:ignore="ContentDescription"/>
+
+        <ImageButton
+            android:id="@+id/notificationFForward"
+            android:layout_width="45dp"
+            android:layout_height="match_parent"
+            android:background="#00000000"
+            android:clickable="true"
+            android:padding="5dp"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_action_av_fast_forward"
+            tools:ignore="ContentDescription"/>
 
         <ImageButton
             android:id="@+id/notificationStop"
             android:layout_width="40dp"
             android:layout_height="40dp"
-            android:layout_margin="5dp"
-            android:background="#00ffffff"
+            android:layout_marginLeft="5dp"
+            android:background="#00000000"
             android:clickable="true"
-            android:scaleType="fitXY"
-            android:src="@drawable/ic_close_white" />
+            android:padding="5dp"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_close_white"
+            tools:ignore="ContentDescription,RtlHardcoded"/>
     </LinearLayout>
 
-
-</RelativeLayout>
\ No newline at end of file
+    <ProgressBar
+        android:id="@+id/notificationProgressBar"
+        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
+        android:layout_width="match_parent"
+        android:layout_height="3dp"
+        android:layout_gravity="bottom"
+        android:layout_marginLeft="64dp"
+        android:progressDrawable="@drawable/custom_progress_bar"
+        tools:ignore="RtlHardcoded"
+        tools:progress="52"/>
+</FrameLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/player_notification_expanded.xml b/app/src/main/res/layout/player_notification_expanded.xml
index 4a81d2ca3..46c22a451 100644
--- a/app/src/main/res/layout/player_notification_expanded.xml
+++ b/app/src/main/res/layout/player_notification_expanded.xml
@@ -1,4 +1,153 @@
 <?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/notificationContent"
+    android:layout_width="match_parent"
+    android:layout_height="128dp"
+    android:background="@color/background_notification_color"
+    android:clickable="true"
+    android:gravity="center_vertical"
+    android:orientation="horizontal">
+
+    <ImageView
+        android:id="@+id/notificationCover"
+        android:layout_width="128dp"
+        android:layout_height="128dp"
+        android:layout_alignParentLeft="true"
+        android:scaleType="centerCrop"
+        android:src="@drawable/dummy_thumbnail"
+        tools:ignore="ContentDescription,RtlHardcoded"/>
+
+    <ImageButton
+        android:id="@+id/notificationStop"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_alignParentRight="true"
+        android:background="#00000000"
+        android:clickable="true"
+        android:padding="8dp"
+        android:scaleType="fitCenter"
+        android:src="@drawable/ic_close_white"
+        tools:ignore="ContentDescription,RtlHardcoded"/>
+
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_alignParentTop="true"
+        android:layout_toLeftOf="@+id/notificationStop"
+        android:layout_toRightOf="@+id/notificationCover"
+        android:orientation="vertical"
+        android:padding="8dp"
+        tools:ignore="RtlHardcoded,RtlSymmetry">
+
+        <TextView
+            android:id="@+id/notificationSongName"
+            style="@android:style/TextAppearance.StatusBar.EventContent.Title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:ellipsize="end"
+            android:maxLines="2"
+            android:textSize="14sp"
+            tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec aliquam augue, eget cursus est. Ut id tristique enim, ut scelerisque tellus. Sed ultricies ipsum non mauris ultricies, commodo malesuada velit porta."/>
+
+        <TextView
+            android:id="@+id/notificationArtist"
+            style="@android:style/TextAppearance.StatusBar.EventContent"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:ellipsize="end"
+            android:maxLines="1"
+            android:textSize="12sp"
+            tools:text="Duis posuere arcu condimentum lobortis mattis."/>
+    </LinearLayout>
+
+    <ProgressBar
+        android:id="@+id/notificationProgressBar"
+        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
+        android:layout_width="match_parent"
+        android:layout_height="2dp"
+        android:layout_alignTop="@+id/notificationControls"
+        android:layout_marginLeft="8dp"
+        android:layout_marginRight="8dp"
+        android:layout_toRightOf="@+id/notificationCover"
+        android:progressDrawable="@drawable/custom_progress_bar"
+        tools:ignore="RtlHardcoded"
+        tools:progress="52"/>
+
+    <RelativeLayout
+        android:id="@+id/notificationControls"
+        android:layout_width="match_parent"
+        android:layout_height="60dp"
+        android:paddingTop="10dp"
+        android:layout_alignParentBottom="true"
+        android:layout_toRightOf="@+id/notificationCover"
+        android:orientation="horizontal"
+        tools:ignore="RtlHardcoded">
+
+        <ImageButton
+            android:id="@+id/notificationRepeat"
+            android:layout_width="45dp"
+            android:layout_height="match_parent"
+            android:layout_alignParentLeft="true"
+            android:layout_centerVertical="true"
+            android:background="#00000000"
+            android:clickable="true"
+            android:paddingBottom="4dp"
+            android:paddingLeft="11dp"
+            android:paddingRight="11dp"
+            android:paddingTop="4dp"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_repeat_white"
+            tools:ignore="ContentDescription"/>
+
+        <ImageButton
+            android:id="@+id/notificationFRewind"
+            android:layout_width="40dp"
+            android:layout_height="match_parent"
+            android:layout_centerVertical="true"
+            android:layout_marginRight="5dp"
+            android:layout_toLeftOf="@+id/notificationPlayPause"
+            android:background="#00000000"
+            android:clickable="true"
+            android:padding="2dp"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_action_av_fast_rewind"
+            tools:ignore="ContentDescription"/>
+
+        <ImageButton
+            android:id="@+id/notificationPlayPause"
+            android:layout_width="50dp"
+            android:layout_height="match_parent"
+            android:layout_centerVertical="true"
+            android:layout_marginRight="5dp"
+            android:layout_toLeftOf="@+id/notificationFForward"
+            android:background="#00000000"
+            android:padding="2dp"
+            android:clickable="true"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_pause_white"
+            tools:ignore="ContentDescription"/>
+
+        <ImageButton
+            android:id="@+id/notificationFForward"
+            android:layout_width="40dp"
+            android:layout_height="match_parent"
+            android:layout_alignParentRight="true"
+            android:layout_centerVertical="true"
+            android:layout_marginRight="8dp"
+            android:background="#00000000"
+            android:clickable="true"
+            android:padding="2dp"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_action_av_fast_forward"
+            tools:ignore="ContentDescription"/>
+    </RelativeLayout>
+</RelativeLayout>
+
+    <!--
+    <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/notificationContent"
     android:layout_width="fill_parent"
@@ -93,4 +242,4 @@
             android:layout_alignParentLeft="true" />
     </RelativeLayout>
 
-</RelativeLayout>
\ No newline at end of file
+</RelativeLayout>-->
\ No newline at end of file
diff --git a/app/src/main/res/layout/player_popup_notification.xml b/app/src/main/res/layout/player_popup_notification.xml
index 10cc20a45..efe46f609 100644
--- a/app/src/main/res/layout/player_popup_notification.xml
+++ b/app/src/main/res/layout/player_popup_notification.xml
@@ -29,20 +29,23 @@
         <TextView
             android:id="@+id/notificationSongName"
             style="@android:style/TextAppearance.StatusBar.EventContent.Title"
-            android:layout_width="wrap_content"
+            android:layout_width="match_parent"
+            android:ellipsize="end"
             android:layout_height="wrap_content"
-            android:ellipsize="marquee"
             android:maxLines="1"
-            tools:text="a long, long, long, long, long title"/>
+            android:textSize="14sp"
+            tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec aliquam augue, eget cursus est. Ut id tristique enim, ut scelerisque tellus. Sed ultricies ipsum non mauris ultricies, commodo malesuada velit porta."/>
 
         <TextView
             android:id="@+id/notificationArtist"
+            android:layout_width="match_parent"
             style="@android:style/TextAppearance.StatusBar.EventContent"
-            android:layout_width="wrap_content"
+            android:ellipsize="end"
             android:layout_height="wrap_content"
-            android:ellipsize="marquee"
             android:maxLines="1"
-            tools:text="a long, long artist"/>
+            android:textSize="12sp"
+            tools:text="Duis posuere arcu condimentum lobortis mattis."/>
+
     </LinearLayout>
 
     <ImageButton