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
oppia · Nov 26, 2019 · b5bc32b · b5bc32b
1 parent e3ed84a
commit b5bc32b
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 40 deletions.
diff --git 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/...ble/ic_pause_circle_filled_black_24dp.xml → ...ble/ic_pause_circle_filled_white_24dp.xml b/...ble/ic_pause_circle_filled_black_24dp.xml → ...ble/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
diff --git a/...able/ic_play_circle_filled_black_24dp.xml → ...able/ic_play_circle_filled_white_24dp.xml b/...able/ic_play_circle_filled_black_24dp.xml → ...able/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
@@ -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
@@ -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
@@ -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
@@ -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 -->