From b5bc32bce2467804627612ffa8be07fce9a584de Mon Sep 17 00:00:00 2001
From: nikitamarysolomanpvt
 <54615666+nikitamarysolomanpvt@users.noreply.github.com>
Date: Tue, 26 Nov 2019 11:33:16 +0530
Subject: [PATCH] Fix part #17,#382: Hi fi topic audio bar (#467)

As per the verbal discussion the audio bar was not playable in android API 19 and lowfi issue.

* thumb seekbar

* shadow to audio bar

* audio bar width as per screen width

* audio bar width as per screen width

* play and pause icons size
---
 .../res/drawable/audio_seekbar_background.xml | 23 +++++++++----
 ... => ic_pause_circle_filled_white_24dp.xml} |  2 +-
 .../ic_pause_circle_outline_primary_24dp.xml  | 10 ------
 ...l => ic_play_circle_filled_white_24dp.xml} |  2 +-
 app/src/main/res/drawable/seekbar_thumb.xml   | 32 ++++++++++++++-----
 app/src/main/res/layout/audio_fragment.xml    | 32 +++++++++++++------
 app/src/main/res/values-v21/styles.xml        |  6 ++--
 app/src/main/res/values/colors.xml            |  2 ++
 8 files changed, 69 insertions(+), 40 deletions(-)
 rename app/src/main/res/drawable/{ic_pause_circle_filled_black_24dp.xml => ic_pause_circle_filled_white_24dp.xml} (91%)
 delete mode 100644 app/src/main/res/drawable/ic_pause_circle_outline_primary_24dp.xml
 rename app/src/main/res/drawable/{ic_play_circle_filled_black_24dp.xml => ic_play_circle_filled_white_24dp.xml} (90%)

diff --git a/app/src/main/res/drawable/audio_seekbar_background.xml b/app/src/main/res/drawable/audio_seekbar_background.xml
index 96812688a09..e4906afc722 100644
--- a/app/src/main/res/drawable/audio_seekbar_background.xml
+++ b/app/src/main/res/drawable/audio_seekbar_background.xml
@@ -1,8 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-  android:shape="line">
-  <solid android:color="@android:color/transparent" />
-  <stroke
-    android:width="4dp"
-    android:color="@color/white" />
-</shape>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:id="@android:id/background">
+    <shape>
+      <solid android:color="@color/white" />
+      <corners android:radius="8dp" />
+    </shape>
+  </item>
+  <item android:id="@android:id/progress">
+    <clip>
+      <shape>
+        <solid android:color="@color/colorAccent" />
+        <corners android:radius="8dp" />
+      </shape>
+    </clip>
+  </item>
+</layer-list>
diff --git a/app/src/main/res/drawable/ic_pause_circle_filled_black_24dp.xml b/app/src/main/res/drawable/ic_pause_circle_filled_white_24dp.xml
similarity index 91%
rename from app/src/main/res/drawable/ic_pause_circle_filled_black_24dp.xml
rename to app/src/main/res/drawable/ic_pause_circle_filled_white_24dp.xml
index 375eb24dced..1e11e07e161 100644
--- a/app/src/main/res/drawable/ic_pause_circle_filled_black_24dp.xml
+++ b/app/src/main/res/drawable/ic_pause_circle_filled_white_24dp.xml
@@ -5,6 +5,6 @@
   android:viewportWidth="24.0"
   android:viewportHeight="24.0">
   <path
-    android:fillColor="#FF000000"
+    android:fillColor="#FFFFFF"
     android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM11,16L9,16L9,8h2v8zM15,16h-2L13,8h2v8z" />
 </vector>
diff --git a/app/src/main/res/drawable/ic_pause_circle_outline_primary_24dp.xml b/app/src/main/res/drawable/ic_pause_circle_outline_primary_24dp.xml
deleted file mode 100644
index e302e0c657b..00000000000
--- a/app/src/main/res/drawable/ic_pause_circle_outline_primary_24dp.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<vector
-  xmlns:android="http://schemas.android.com/apk/res/android"
-  android:width="24dp"
-  android:height="24dp"
-  android:viewportWidth="24.0"
-  android:viewportHeight="24.0">
-  <path
-    android:fillColor="#FF008577"
-    android:pathData="M9,16h2L11,8L9,8v8zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM13,16h2L15,8h-2v8z"/>
-</vector>
diff --git a/app/src/main/res/drawable/ic_play_circle_filled_black_24dp.xml b/app/src/main/res/drawable/ic_play_circle_filled_white_24dp.xml
similarity index 90%
rename from app/src/main/res/drawable/ic_play_circle_filled_black_24dp.xml
rename to app/src/main/res/drawable/ic_play_circle_filled_white_24dp.xml
index 70e975eef88..4800f2b94d0 100644
--- a/app/src/main/res/drawable/ic_play_circle_filled_black_24dp.xml
+++ b/app/src/main/res/drawable/ic_play_circle_filled_white_24dp.xml
@@ -5,6 +5,6 @@
   android:viewportWidth="24.0"
   android:viewportHeight="24.0">
   <path
-    android:fillColor="#FF000000"
+    android:fillColor="#FFFFFF"
     android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,16.5v-9l6,4.5 -6,4.5z" />
 </vector>
diff --git a/app/src/main/res/drawable/seekbar_thumb.xml b/app/src/main/res/drawable/seekbar_thumb.xml
index ff30f688da1..5c4bd56c1fd 100644
--- a/app/src/main/res/drawable/seekbar_thumb.xml
+++ b/app/src/main/res/drawable/seekbar_thumb.xml
@@ -1,8 +1,24 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-  android:shape="oval">
-  <size
-    android:width="16dp"
-    android:height="16dp" />
-  <solid android:color="@color/colorPrimary" />
-</shape>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item>
+    <shape android:shape="oval">
+      <corners android:radius="10dp" />
+      <size
+        android:width="22dp"
+        android:height="22dp" />
+      <gradient
+        android:endColor="@android:color/transparent"
+        android:gradientRadius="20"
+        android:startColor="@color/black_54"
+        android:type="radial" />
+    </shape>
+  </item>
+  <item
+    android:bottom="4dp"
+    android:left="8dp"
+    android:top="4dp">
+    <shape android:shape="oval">
+      <solid android:color="@color/white" />
+      <corners android:radius="10dp" />
+    </shape>
+  </item>
+</layer-list>
diff --git a/app/src/main/res/layout/audio_fragment.xml b/app/src/main/res/layout/audio_fragment.xml
index e5160487202..9bf718534df 100755
--- a/app/src/main/res/layout/audio_fragment.xml
+++ b/app/src/main/res/layout/audio_fragment.xml
@@ -21,22 +21,24 @@
     android:layout_gravity="center_horizontal"
     android:layout_marginStart="@dimen/audio_fragment_margin"
     android:layout_marginEnd="@dimen/audio_fragment_margin"
+    android:layout_marginBottom="12dp"
     android:background="@drawable/audio_background"
+    android:elevation="8dp"
     android:gravity="center_vertical"
     android:minHeight="48dp"
-    android:orientation="horizontal">
+    android:orientation="horizontal"
+    android:padding="4dp">
 
     <ImageView
       android:id="@+id/ivPlayPauseAudio"
-      android:layout_width="wrap_content"
-      android:layout_height="wrap_content"
-      android:layout_marginStart="4dp"
-      android:layout_marginEnd="4dp"
+      android:layout_width="48dp"
+      android:layout_height="48dp"
+      android:layout_marginStart="8dp"
       android:clickable="@{viewModel.playStatusLiveData != UiAudioPlayStatus.LOADING}"
       android:contentDescription="@{viewModel.playStatusLiveData == UiAudioPlayStatus.PLAYING ? @string/audio_pause_description : @string/audio_play_description}"
       android:onClick="@{(v) -> viewModel.togglePlayPause(viewModel.playStatusLiveData)}"
-      android:padding="16dp"
-      android:src="@{viewModel.playStatusLiveData == UiAudioPlayStatus.PLAYING ? @drawable/ic_pause_circle_filled_black_24dp : @drawable/ic_play_circle_filled_black_24dp}"
+      android:padding="8dp"
+      android:src="@{viewModel.playStatusLiveData == UiAudioPlayStatus.PLAYING ? @drawable/ic_pause_circle_filled_white_24dp : @drawable/ic_play_circle_filled_white_24dp}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
@@ -45,10 +47,14 @@
       android:id="@+id/sbAudioProgress"
       style="@style/AudioSeekBar"
       android:layout_width="0dp"
-      android:layout_height="wrap_content"
-      android:background="@drawable/audio_seekbar_background"
+      android:layout_height="26dp"
       android:max="@{viewModel.durationLiveData}"
+      android:maxHeight="4dp"
+      android:minWidth="180dp"
+      android:minHeight="4dp"
       android:progress="@{audioFragment.userIsSeeking ? audioFragment.userPosition : viewModel.positionLiveData}"
+      android:progressDrawable="@drawable/audio_seekbar_background"
+      android:splitTrack="false"
       android:thumb="@drawable/seekbar_thumb"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toStartOf="@+id/tvAudioLanguage"
@@ -61,8 +67,14 @@
       android:layout_height="wrap_content"
       android:clickable="@{viewModel.playStatusLiveData != UiAudioPlayStatus.LOADING}"
       android:fontFamily="sans-serif-medium"
+      android:gravity="center"
+      android:minWidth="48dp"
+      android:minHeight="48dp"
       android:onClick="@{(v) -> audioFragment.languageSelectionClicked()}"
-      android:padding="16dp"
+      android:paddingStart="8dp"
+      android:paddingTop="16dp"
+      android:paddingEnd="16dp"
+      android:paddingBottom="16dp"
       android:text="@{viewModel.currentLanguageCode}"
       android:textAllCaps="true"
       android:textColor="@color/white"
diff --git a/app/src/main/res/values-v21/styles.xml b/app/src/main/res/values-v21/styles.xml
index 56e8b515036..06673ed6340 100644
--- a/app/src/main/res/values-v21/styles.xml
+++ b/app/src/main/res/values-v21/styles.xml
@@ -2,8 +2,8 @@
 <resources>
 
   <style name="AudioSeekBar" parent="Widget.AppCompat.SeekBar">
-    <item name="android:progressBackgroundTint">@color/white</item>
-    <item name="android:progressTint">@color/colorPrimary</item>
-    <item name="android:colorControlActivated">@color/colorPrimary</item>
+    <item name="android:progressBackgroundTint">@color/progressBackgroundTint</item>
+    <item name="android:progressTint">@color/white</item>
+    <item name="android:colorControlActivated">@color/progressBackgroundTint</item>
   </style>
 </resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index c5b5bd7d84f..e65cf153f5b 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -3,6 +3,7 @@
   <color name="colorPrimary">#00645C</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#2D4A9D</color>
+  <color name="progressBackgroundTint">#081661 </color>
   <color name="colorConceptCardBackground">#FFFFF0</color>
   <color name="colorConceptToolbarBackground">#C55F45</color>
   <color name="colorConceptToolbarHeading">#A6503A</color>
@@ -32,6 +33,7 @@
   <color name="white_80">#CCFFFFFF</color>
   <color name="white_70">#B3FFFFFF</color>
   <color name="black">#000000</color>
+  <color name="black_20">#33000000</color>
   <color name="black_54">#8A000000</color>
   <color name="whiteLight">#F9F9F9</color>
   <!-- AUDIO COMPONENT -->