From ebdf3e153b586cf8e56ad99deffcbdaad8987352 Mon Sep 17 00:00:00 2001
From: Alexander Capehart <alex@oxycblt.org>
Date: Fri, 5 Jul 2024 11:49:39 -0600
Subject: [PATCH] ui: tweak tablet playback layouts

- Use dual pane layouts on portrait and landscape
- Make buttons cope with restrictive width
---
 .../fragment_playback_panel.xml               | 111 ++++++++++--------
 .../fragment_main.xml                         |   0
 app/src/main/res/values/styles_ui.xml         |  12 +-
 3 files changed, 65 insertions(+), 58 deletions(-)
 rename app/src/main/res/{layout-w600dp-land => layout-w670dp}/fragment_main.xml (100%)

diff --git a/app/src/main/res/layout-sw600dp/fragment_playback_panel.xml b/app/src/main/res/layout-sw600dp/fragment_playback_panel.xml
index 1b66b26e2..2d5e62307 100644
--- a/app/src/main/res/layout-sw600dp/fragment_playback_panel.xml
+++ b/app/src/main/res/layout-sw600dp/fragment_playback_panel.xml
@@ -12,12 +12,12 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         app:menu="@menu/toolbar_playback"
-        app:titleCentered="true"
-        app:subtitleCentered="true"
-        app:titleTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
-        app:subtitleTextAppearance="@style/TextAppearance.Auxio.BodySmall"
         app:navigationIcon="@drawable/ic_down_24"
+        app:subtitleCentered="true"
+        app:subtitleTextAppearance="@style/TextAppearance.Auxio.BodySmall"
         app:title="@string/lbl_playback"
+        app:titleCentered="true"
+        app:titleTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
         tools:subtitle="@string/lbl_all_songs" />
 
     <org.oxycblt.auxio.playback.ui.SwipeCoverView
@@ -26,56 +26,60 @@
         android:layout_margin="@dimen/spacing_medium"
         app:enablePlaybackIndicator="false"
         app:enableSelectionBadge="false"
-        app:layout_constraintBottom_toTopOf="@+id/playback_song"
+        app:layout_constraintBottom_toTopOf="@+id/playback_info_container"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/playback_toolbar" />
+        app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
+        app:layout_constraintVertical_chainStyle="packed" />
 
-    <TextView
-        android:id="@+id/playback_song"
-        style="@style/Widget.Auxio.TextView.Primary"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/spacing_medium"
-        android:layout_marginEnd="@dimen/spacing_mid_medium"
-        app:layout_constraintBottom_toTopOf="@+id/playback_artist"
-        app:layout_constraintEnd_toStartOf="@+id/playback_more"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintVertical_chainStyle="packed"
-        tools:text="Song Name" />
-
-    <TextView
-        android:id="@+id/playback_artist"
-        style="@style/Widget.Auxio.TextView.Secondary.Marquee"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/spacing_medium"
-        app:layout_constraintBottom_toTopOf="@+id/playback_album"
-        app:layout_constraintEnd_toEndOf="@+id/playback_song"
-        app:layout_constraintStart_toStartOf="parent"
-        tools:text="Artist Name" />
-
-    <TextView
-        android:id="@+id/playback_album"
-        style="@style/Widget.Auxio.TextView.Secondary.Marquee"
+    <LinearLayout
+        android:id="@+id/playback_info_container"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginStart="@dimen/spacing_medium"
+        android:layout_marginEnd="@dimen/spacing_medium"
+        android:orientation="vertical"
         app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
-        app:layout_constraintEnd_toEndOf="@+id/playback_song"
+        app:layout_constraintEnd_toStartOf="@+id/playback_more"
+        app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toStartOf="parent"
-        tools:text="Album Name" />
+        app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
+        app:layout_constraintVertical_bias="1.0"
+        app:layout_constraintVertical_chainStyle="packed">
+
+        <TextView
+            android:id="@+id/playback_song"
+            style="@style/Widget.Auxio.TextView.Primary"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            tools:text="Song Name" />
+
+        <TextView
+            android:id="@+id/playback_artist"
+            style="@style/Widget.Auxio.TextView.Secondary.Marquee"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            tools:text="Artist Name" />
+
+        <TextView
+            android:id="@+id/playback_album"
+            style="@style/Widget.Auxio.TextView.Secondary.Marquee"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            tools:text="Album Name" />
+
+    </LinearLayout>
 
     <org.oxycblt.auxio.ui.RippleFixMaterialButton
         android:id="@+id/playback_more"
         style="@style/Widget.Auxio.Button.Icon.Medium"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginEnd="@dimen/spacing_medium"
         app:icon="@drawable/ic_more_24"
-        android:layout_marginEnd="@dimen/spacing_mid_medium"
-        app:layout_constraintBottom_toBottomOf="@+id/playback_album"
+        app:layout_constraintBottom_toBottomOf="@+id/playback_info_container"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/playback_song" />
+        app:layout_constraintTop_toTopOf="@+id/playback_info_container" />
 
     <org.oxycblt.auxio.playback.ui.StyledSeekBar
         android:id="@+id/playback_seek_bar"
@@ -86,16 +90,21 @@
         app:layout_constraintBottom_toTopOf="@+id/playback_controls_container"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/playback_info_container" />
 
     <org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout
         android:id="@+id/playback_controls_container"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginStart="@dimen/spacing_medium"
         android:layout_marginEnd="@dimen/spacing_medium"
         android:layout_marginBottom="@dimen/spacing_medium"
-        app:layout_constraintBottom_toBottomOf="parent">
+        app:layout_constraintTop_toBottomOf="@+id/playback_seek_bar"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintWidth_max="400dp">
 
         <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
@@ -106,13 +115,11 @@
                 style="@style/Widget.Auxio.Button.Icon.Medium"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginEnd="@dimen/spacing_huge"
                 android:contentDescription="@string/desc_change_repeat"
                 app:icon="@drawable/ic_repeat_off_24"
                 app:iconTint="@color/sel_activatable_icon"
                 app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev"
-                app:layout_constraintEnd_toStartOf="@+id/playback_skip_prev"
-                app:layout_constraintHorizontal_chainStyle="packed"
+                app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
 
             <org.oxycblt.auxio.ui.RippleFixMaterialButton
@@ -120,11 +127,12 @@
                 style="@style/Widget.Auxio.Button.Icon.Huge"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginEnd="@dimen/spacing_huge"
                 android:contentDescription="@string/desc_skip_prev"
-                app:icon="@drawable/ic_skip_prev_24"
+                app:icon="@drawable/ic_skip_prev_40"
+                app:iconSize="40dp"
                 app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
                 app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
+                app:layout_constraintStart_toEndOf="@+id/playback_repeat"
                 app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
 
             <org.oxycblt.auxio.playback.ui.AnimatedMaterialButton
@@ -133,22 +141,22 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:contentDescription="@string/desc_play_pause"
-                app:icon="@drawable/sel_playing_state_24"
+                app:icon="@drawable/sel_playing_state_48"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="parent"
-                tools:icon="@drawable/ic_pause_24" />
+                tools:icon="@drawable/ic_play_24" />
 
             <org.oxycblt.auxio.ui.RippleFixMaterialButton
                 android:id="@+id/playback_skip_next"
                 style="@style/Widget.Auxio.Button.Icon.Huge"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="@dimen/spacing_huge"
                 android:contentDescription="@string/desc_skip_next"
-                app:icon="@drawable/ic_skip_next_24"
+                app:icon="@drawable/ic_skip_next_40"
                 app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
+                app:layout_constraintEnd_toStartOf="@+id/playback_shuffle"
                 app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
                 app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
 
@@ -157,12 +165,11 @@
                 style="@style/Widget.Auxio.Button.Icon.Medium"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="@dimen/spacing_huge"
                 android:contentDescription="@string/desc_shuffle"
                 app:icon="@drawable/sel_shuffle_state_24"
                 app:iconTint="@color/sel_activatable_icon"
                 app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
-                app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
+                app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintTop_toTopOf="@+id/playback_skip_next"
                 app:tint="@color/sel_activatable_icon" />
 
diff --git a/app/src/main/res/layout-w600dp-land/fragment_main.xml b/app/src/main/res/layout-w670dp/fragment_main.xml
similarity index 100%
rename from app/src/main/res/layout-w600dp-land/fragment_main.xml
rename to app/src/main/res/layout-w670dp/fragment_main.xml
diff --git a/app/src/main/res/values/styles_ui.xml b/app/src/main/res/values/styles_ui.xml
index 26fe9d5c5..0b8603e51 100644
--- a/app/src/main/res/values/styles_ui.xml
+++ b/app/src/main/res/values/styles_ui.xml
@@ -279,16 +279,16 @@
 
     <style name="Widget.Auxio.Button.Icon.Huge" parent="Widget.Material3.Button.IconButton">
         <item name="iconSize">40dp</item>
-        <item name="android:minWidth">@dimen/size_touchable_mid_large</item>
-        <item name="android:minHeight">@dimen/size_touchable_mid_large</item>
+        <item name="android:minWidth">@dimen/size_touchable_medium</item>
+        <item name="android:minHeight">@dimen/size_touchable_medium</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
-        <item name="android:paddingStart">10dp</item>
-        <item name="android:paddingEnd">10dp</item>
-        <item name="android:paddingTop">10dp</item>
-        <item name="android:paddingBottom">10dp</item>
+        <item name="android:paddingStart">8dp</item>
+        <item name="android:paddingEnd">8dp</item>
+        <item name="android:paddingTop">8dp</item>
+        <item name="android:paddingBottom">8dp</item>
         <item name="materialThemeOverlay">@style/ThemeOverlay.Auxio.IconButton.Huge</item>
     </style>