Expand bottom button's height and extend greyed background area to seekbar

Adjusted the bottom layout of StyledPlayerControlView :
- Enlarged bottom button's height to make tapping easier.
- Extended greyed background area to upper edge of seekbar.
- Gave padding between bottom edge of the overall layout and bottom buttons.
- Reduced horizontal margins between bottom buttons.

PiperOrigin-RevId: 336041160

RELEASENOTES.md

@@ -34,6 +34,8 @@
     *   Add the option to sort tracks by `Format` in `TrackSelectionView` and
     *   Add the option to sort tracks by `Format` in `TrackSelectionView` and
         `TrackSelectionDialogBuilder`
         `TrackSelectionDialogBuilder`
         ([#7709](https://github.com/google/ExoPlayer/issues/7709)).
         ([#7709](https://github.com/google/ExoPlayer/issues/7709)).
+    *   Adjusted bottom buttons' heights and paddings in StyledPlayerView for
+        easy tapping.
 *   Audio:
 *   Audio:
     *   Retry playback after some types of `AudioTrack` error.
     *   Retry playback after some types of `AudioTrack` error.
     *   Fix the default audio sink position not advancing correctly when using
     *   Fix the default audio sink position not advancing correctly when using

library/ui/src/main/res/layout/exo_styled_player_control_view.xml

@@ -40,11 +40,12 @@
       android:layout_height="@dimen/exo_bottom_bar_height"
       android:layout_height="@dimen/exo_bottom_bar_height"
       android:layout_gravity="bottom"
       android:layout_gravity="bottom"
       android:background="@color/exo_bottom_bar_background"
       android:background="@color/exo_bottom_bar_background"
+      android:paddingBottom="@dimen/exo_bottom_bar_padding_bottom"
       android:layoutDirection="ltr">
       android:layoutDirection="ltr">
 
 
     <LinearLayout android:id="@+id/exo_time"
     <LinearLayout android:id="@+id/exo_time"
         android:layout_width="@dimen/exo_time_view_width"
         android:layout_width="@dimen/exo_time_view_width"
-        android:layout_height="@dimen/exo_bottom_bar_height"
+        android:layout_height="@dimen/exo_small_icon_height"
         android:paddingStart="@dimen/exo_time_view_padding"
         android:paddingStart="@dimen/exo_time_view_padding"
         android:paddingEnd="@dimen/exo_time_view_padding"
         android:paddingEnd="@dimen/exo_time_view_padding"
         android:paddingLeft="@dimen/exo_time_view_padding"
         android:paddingLeft="@dimen/exo_time_view_padding"

library/ui/src/main/res/values/dimens.xml

@@ -24,24 +24,27 @@
     <dimen name="exo_settings_offset">8dp</dimen>
     <dimen name="exo_settings_offset">8dp</dimen>
 
 
     <dimen name="exo_icon_size">52dp</dimen>
     <dimen name="exo_icon_size">52dp</dimen>
-    <dimen name="exo_icon_margin">5dp</dimen>
+    <dimen name="exo_icon_horizontal_margin">5dp</dimen>
     <dimen name="exo_icon_padding">2dp</dimen>
     <dimen name="exo_icon_padding">2dp</dimen>
     <dimen name="exo_icon_text_size">9dp</dimen>
     <dimen name="exo_icon_text_size">9dp</dimen>
     <dimen name="exo_icon_padding_bottom">18dp</dimen>
     <dimen name="exo_icon_padding_bottom">18dp</dimen>
 
 
-    <dimen name="exo_small_button_width">48dp</dimen>
-    <dimen name="exo_small_button_height">32dp</dimen>
+    <dimen name="exo_small_icon_width">48dp</dimen>
+    <dimen name="exo_small_icon_height">48dp</dimen>
+    <dimen name="exo_small_icon_horizontal_margin">2dp</dimen>
     <dimen name="exo_small_icon_padding_horizontal">12dp</dimen>
     <dimen name="exo_small_icon_padding_horizontal">12dp</dimen>
-    <dimen name="exo_small_icon_padding_vertical">4dp</dimen>
+    <dimen name="exo_small_icon_padding_vertical">12dp</dimen>
 
 
     <dimen name="exo_custom_progress_max_size">2dp</dimen>
     <dimen name="exo_custom_progress_max_size">2dp</dimen>
     <dimen name="exo_custom_progress_thumb_size">24dp</dimen>
     <dimen name="exo_custom_progress_thumb_size">24dp</dimen>
-    <dimen name="exo_custom_progress_margin_bottom">40dp</dimen>
+    <dimen name="exo_custom_progress_margin_bottom">56dp</dimen>
 
 
-    <dimen name="exo_bottom_bar_height">32dp</dimen>
+    <dimen name="exo_bottom_bar_height">70dp</dimen>
+    <dimen name="exo_bottom_bar_padding_bottom">4dp</dimen>
 
 
     <dimen name="exo_time_view_padding">10dp</dimen>
     <dimen name="exo_time_view_padding">10dp</dimen>
     <dimen name="exo_time_view_width">170sp</dimen>
     <dimen name="exo_time_view_width">170sp</dimen>
+    <dimen name="exo_time_view_height">48dp</dimen>
 
 
     <dimen name="exo_error_message_height">32dp</dimen>
     <dimen name="exo_error_message_height">32dp</dimen>
     <dimen name="exo_error_message_margin_bottom">64dp</dimen>
     <dimen name="exo_error_message_margin_bottom">64dp</dimen>

library/ui/src/main/res/values/styles.xml

@@ -61,8 +61,8 @@
   <style name="ExoStyledControls.Button">
   <style name="ExoStyledControls.Button">
     <item name="android:background">?android:attr/selectableItemBackground</item>
     <item name="android:background">?android:attr/selectableItemBackground</item>
     <item name="android:scaleType">fitXY</item>
     <item name="android:scaleType">fitXY</item>
-    <item name="android:layout_marginLeft">@dimen/exo_icon_margin</item>
-    <item name="android:layout_marginRight">@dimen/exo_icon_margin</item>
+    <item name="android:layout_marginLeft">@dimen/exo_icon_horizontal_margin</item>
+    <item name="android:layout_marginRight">@dimen/exo_icon_horizontal_margin</item>
   </style>
   </style>
 
 
   <style name="ExoStyledControls.Button.Center">
   <style name="ExoStyledControls.Button.Center">
@@ -135,8 +135,10 @@
 
 
   <style name="ExoStyledControls.Button.Bottom">
   <style name="ExoStyledControls.Button.Bottom">
     <item name="android:gravity">center_horizontal</item>
     <item name="android:gravity">center_horizontal</item>
-    <item name="android:layout_width">@dimen/exo_small_button_width</item>
-    <item name="android:layout_height">@dimen/exo_small_button_height</item>
+    <item name="android:layout_width">@dimen/exo_small_icon_width</item>
+    <item name="android:layout_height">@dimen/exo_small_icon_height</item>
+    <item name="android:layout_marginLeft">@dimen/exo_small_icon_horizontal_margin</item>
+    <item name="android:layout_marginRight">@dimen/exo_small_icon_horizontal_margin</item>
     <item name="android:paddingLeft">@dimen/exo_small_icon_padding_horizontal</item>
     <item name="android:paddingLeft">@dimen/exo_small_icon_padding_horizontal</item>
     <item name="android:paddingRight">@dimen/exo_small_icon_padding_horizontal</item>
     <item name="android:paddingRight">@dimen/exo_small_icon_padding_horizontal</item>
     <item name="android:paddingTop">@dimen/exo_small_icon_padding_vertical</item>
     <item name="android:paddingTop">@dimen/exo_small_icon_padding_vertical</item>