Increase touch target size and margins between icons

PiperOrigin-RevId: 326423935

library/ui/src/main/res/drawable-anydpi-v21/exo_ic_forward.xml

@@ -20,8 +20,8 @@
     android:viewportWidth="24"
     android:viewportWidth="24"
     android:viewportHeight="24">
     android:viewportHeight="24">
   <group
   <group
-    android:scaleX="-0.5"
-    android:scaleY="0.5"
+    android:scaleX="-0.7"
+    android:scaleY="0.7"
     android:pivotX="12"
     android:pivotX="12"
     android:pivotY="12">
     android:pivotY="12">
   <path
   <path

library/ui/src/main/res/drawable-anydpi-v21/exo_ic_rewind.xml

@@ -19,10 +19,9 @@
     android:height="24dp"
     android:height="24dp"
     android:viewportWidth="24"
     android:viewportWidth="24"
     android:viewportHeight="24">
     android:viewportHeight="24">
-
   <group
   <group
-      android:scaleX="0.5"
-      android:scaleY="0.5"
+      android:scaleX="0.7"
+      android:scaleY="0.7"
       android:pivotX="12"
       android:pivotX="12"
       android:pivotY="12">
       android:pivotY="12">
   <path
   <path

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

@@ -20,9 +20,9 @@
     android:orientation="horizontal"
     android:orientation="horizontal"
     android:visibility="visible">
     android:visibility="visible">
 
 
-    <ImageButton android:id="@+id/exo_prev" style="@style/ExoStyledControls.Button.Previous" />
-    <Button android:id="@+id/exo_rew_with_amount" style="@style/ExoStyledControls.Button.RewWithAmount" />
-    <ImageButton android:id="@+id/exo_play_pause" style="@style/ExoStyledControls.Button.PlayPause" />
-    <Button android:id="@+id/exo_ffwd_with_amount" style="@style/ExoStyledControls.Button.FfwdWithAmount" />
-    <ImageButton android:id="@+id/exo_next" style="@style/ExoStyledControls.Button.Next" />
+    <ImageButton android:id="@+id/exo_prev" style="@style/ExoStyledControls.Button.Center.Previous" />
+    <Button android:id="@+id/exo_rew_with_amount" style="@style/ExoStyledControls.Button.Center.RewWithAmount" />
+    <ImageButton android:id="@+id/exo_play_pause" style="@style/ExoStyledControls.Button.Center.PlayPause" />
+    <Button android:id="@+id/exo_ffwd_with_amount" style="@style/ExoStyledControls.Button.Center.FfwdWithAmount" />
+    <ImageButton android:id="@+id/exo_next" style="@style/ExoStyledControls.Button.Center.Next" />
 </LinearLayout>
 </LinearLayout>

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

@@ -16,25 +16,29 @@
 -->
 -->
 <resources>
 <resources>
     <dimen name="exo_setting_width">150dp</dimen>
     <dimen name="exo_setting_width">150dp</dimen>
-    <dimen name="exo_settings_height">48dp</dimen>
+    <dimen name="exo_settings_height">52dp</dimen>
     <dimen name="exo_settings_icon_size">24dp</dimen>
     <dimen name="exo_settings_icon_size">24dp</dimen>
     <dimen name="exo_settings_text_height">24dp</dimen>
     <dimen name="exo_settings_text_height">24dp</dimen>
     <dimen name="exo_settings_main_text_size">14sp</dimen>
     <dimen name="exo_settings_main_text_size">14sp</dimen>
     <dimen name="exo_settings_sub_text_size">12sp</dimen>
     <dimen name="exo_settings_sub_text_size">12sp</dimen>
     <dimen name="exo_settings_offset">8dp</dimen>
     <dimen name="exo_settings_offset">8dp</dimen>
 
 
-    <dimen name="exo_icon_size">48dp</dimen>
-    <dimen name="exo_icon_margin">10dp</dimen>
-    <dimen name="exo_pause_icon_padding">6dp</dimen>
-    <dimen name="exo_icon_padding">12dp</dimen>
-    <dimen name="exo_icon_text_size">8dp</dimen>
-    <dimen name="exo_icon_padding_bottom">18.5dp</dimen>
+    <dimen name="exo_icon_size">52dp</dimen>
+    <dimen name="exo_icon_margin">5dp</dimen>
+    <dimen name="exo_icon_padding">2dp</dimen>
+    <dimen name="exo_icon_text_size">9dp</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_padding_horizontal">12dp</dimen>
+    <dimen name="exo_small_icon_padding_vertical">4dp</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">16dp</dimen>
-    <dimen name="exo_custom_progress_margin_bottom">41dp</dimen>
+    <dimen name="exo_custom_progress_thumb_size">24dp</dimen>
+    <dimen name="exo_custom_progress_margin_bottom">40dp</dimen>
 
 
-    <dimen name="exo_bottom_bar_height">48dp</dimen>
+    <dimen name="exo_bottom_bar_height">32dp</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>

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

@@ -56,42 +56,46 @@
     <item name="android:contentDescription">@string/exo_controls_vr_description</item>
     <item name="android:contentDescription">@string/exo_controls_vr_description</item>
   </style>
   </style>
 
 
-  <style name="ExoStyledControls" />
+  <style name="ExoStyledControls"/>
 
 
   <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>
+  </style>
+
+  <style name="ExoStyledControls.Button.Center">
     <item name="android:layout_width">@dimen/exo_icon_size</item>
     <item name="android:layout_width">@dimen/exo_icon_size</item>
     <item name="android:layout_height">@dimen/exo_icon_size</item>
     <item name="android:layout_height">@dimen/exo_icon_size</item>
   </style>
   </style>
 
 
-  <style name="ExoStyledControls.Button.Previous">
+  <style name="ExoStyledControls.Button.Center.Previous">
     <item name="android:src">@drawable/exo_styled_controls_previous</item>
     <item name="android:src">@drawable/exo_styled_controls_previous</item>
     <item name="android:contentDescription">@string/exo_controls_previous_description</item>
     <item name="android:contentDescription">@string/exo_controls_previous_description</item>
     <item name="android:padding">@dimen/exo_icon_padding</item>
     <item name="android:padding">@dimen/exo_icon_padding</item>
   </style>
   </style>
 
 
-  <style name="ExoStyledControls.Button.Next">
+  <style name="ExoStyledControls.Button.Center.Next">
     <item name="android:src">@drawable/exo_styled_controls_next</item>
     <item name="android:src">@drawable/exo_styled_controls_next</item>
     <item name="android:contentDescription">@string/exo_controls_next_description</item>
     <item name="android:contentDescription">@string/exo_controls_next_description</item>
     <item name="android:padding">@dimen/exo_icon_padding</item>
     <item name="android:padding">@dimen/exo_icon_padding</item>
   </style>
   </style>
 
 
-  <style name="ExoStyledControls.Button.PlayPause">
+  <style name="ExoStyledControls.Button.Center.PlayPause">
     <item name="android:src">@drawable/exo_styled_controls_play</item>
     <item name="android:src">@drawable/exo_styled_controls_play</item>
     <item name="android:contentDescription">@string/exo_controls_play_description</item>
     <item name="android:contentDescription">@string/exo_controls_play_description</item>
-    <item name="android:padding">@dimen/exo_pause_icon_padding</item>
+    <item name="android:padding">@dimen/exo_icon_padding</item>
   </style>
   </style>
 
 
-  <style name="ExoStyledControls.Button.FfwdWithAmount">
+  <style name="ExoStyledControls.Button.Center.FfwdWithAmount">
     <item name="android:background">@drawable/exo_ripple_ffwd</item>
     <item name="android:background">@drawable/exo_ripple_ffwd</item>
     <item name="android:contentDescription">@string/exo_controls_fastforward_by_amount_description</item>
     <item name="android:contentDescription">@string/exo_controls_fastforward_by_amount_description</item>
     <item name="android:gravity">center|bottom</item>
     <item name="android:gravity">center|bottom</item>
     <item name="android:paddingBottom">@dimen/exo_icon_padding_bottom</item>
     <item name="android:paddingBottom">@dimen/exo_icon_padding_bottom</item>
     <item name="android:textAppearance">@style/ExoStyledControls.ButtonText</item>
     <item name="android:textAppearance">@style/ExoStyledControls.ButtonText</item>
   </style>
   </style>
-
-  <style name="ExoStyledControls.Button.RewWithAmount">
+  <style name="ExoStyledControls.Button.Center.RewWithAmount">
     <item name="android:background">@drawable/exo_ripple_rew</item>
     <item name="android:background">@drawable/exo_ripple_rew</item>
     <item name="android:contentDescription">@string/exo_controls_rewind_by_amount_description</item>
     <item name="android:contentDescription">@string/exo_controls_rewind_by_amount_description</item>
     <item name="android:gravity">center|bottom</item>
     <item name="android:gravity">center|bottom</item>
@@ -133,7 +137,12 @@
 
 
   <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:padding">@dimen/exo_icon_padding</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:paddingLeft">@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:paddingBottom">@dimen/exo_small_icon_padding_vertical</item>
   </style>
   </style>
 
 
   <style name="ExoStyledControls.Button.Bottom.Shuffle">
   <style name="ExoStyledControls.Button.Bottom.Shuffle">