From 23ddfd4d99425d80ccad3f6823ff6246aa74a1b9 Mon Sep 17 00:00:00 2001
From: OxygenCobalt <oxycblt@abstractr.net>
Date: Thu, 4 Feb 2021 17:42:44 -0700
Subject: [PATCH] Fix issues with playback layouts on small screens

Fix problems with the playback layouts when the screen size is lower than 390dp.
---
 .../res/layout-land/fragment_playback.xml     |  19 +-
 .../layout-large-land/fragment_playback.xml   |  14 +-
 .../res/layout-large/fragment_playback.xml    | 208 ++++++++++++++++++
 app/src/main/res/layout/fragment_playback.xml |  15 +-
 4 files changed, 230 insertions(+), 26 deletions(-)
 create mode 100644 app/src/main/res/layout-large/fragment_playback.xml

diff --git a/app/src/main/res/layout-land/fragment_playback.xml b/app/src/main/res/layout-land/fragment_playback.xml
index c4e0fa242..fd01c68a6 100644
--- a/app/src/main/res/layout-land/fragment_playback.xml
+++ b/app/src/main/res/layout-land/fragment_playback.xml
@@ -4,6 +4,9 @@
     xmlns:tools="http://schemas.android.com/tools"
     tools:context=".playback.PlaybackFragment">
 
+    <!-- FIXME: Way controls are designed can cause problems on displays 4.5 inch or smaller.
+          Need to fix it but the way I did it with the other layouts will create bad spacing here -->
+
     <data>
 
         <variable
@@ -163,26 +166,25 @@
         <ImageButton
             android:id="@+id/playback_loop"
             style="@style/Widget.Button.Unbounded"
+            android:layout_marginEnd="@dimen/margin_large"
             android:contentDescription="@string/description_change_loop"
             android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
             android:src="@drawable/ic_loop"
             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="@+id/playback_duration_current"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
 
         <ImageButton
             android:id="@+id/playback_skip_prev"
             style="@style/Widget.Button.Unbounded"
-            android:layout_marginStart="@dimen/margin_large"
+            android:layout_marginEnd="@dimen/margin_large"
             android:background="@drawable/ui_unbounded_ripple"
             android:contentDescription="@string/description_skip_prev"
             android:onClick="@{() -> playbackModel.skipPrev()}"
             android:src="@drawable/ic_skip_prev"
             app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
             app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
-            app:layout_constraintStart_toEndOf="@+id/playback_loop"
             app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
 
         <ImageButton
@@ -191,34 +193,33 @@
             android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
-            app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
+            app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
+            app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
             app:layout_constraintTop_toBottomOf="@+id/playback_duration_current"
             tools:src="@drawable/ic_play_to_pause" />
 
+
         <ImageButton
             android:id="@+id/playback_skip_next"
             style="@style/Widget.Button.Unbounded"
-            android:layout_marginEnd="@dimen/margin_large"
+            android:layout_marginStart="@dimen/margin_large"
             android:background="@drawable/ui_unbounded_ripple"
             android:contentDescription="@string/description_skip_next"
             android:onClick="@{() -> playbackModel.skipNext()}"
             android:src="@drawable/ic_skip_next"
             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" />
 
-
         <ImageButton
             android:id="@+id/playback_shuffle"
             style="@style/Widget.Button.Unbounded"
+            android:layout_marginStart="@dimen/margin_large"
             android:background="@drawable/ui_unbounded_ripple"
             android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
-            app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
             app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
 
diff --git a/app/src/main/res/layout-large-land/fragment_playback.xml b/app/src/main/res/layout-large-land/fragment_playback.xml
index 70cab04f4..7aa387c89 100644
--- a/app/src/main/res/layout-large-land/fragment_playback.xml
+++ b/app/src/main/res/layout-large-land/fragment_playback.xml
@@ -165,25 +165,24 @@
         <ImageButton
             android:id="@+id/playback_loop"
             style="@style/Widget.Button.Unbounded"
+            android:layout_marginEnd="@dimen/margin_large"
             android:contentDescription="@string/description_change_loop"
             android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
             android:src="@drawable/ic_loop"
             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="@+id/playback_duration_current"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
 
         <ImageButton
             android:id="@+id/playback_skip_prev"
             style="@style/Widget.Button.Unbounded"
-            android:layout_marginStart="@dimen/margin_large"
+            android:layout_marginEnd="@dimen/margin_large"
             android:contentDescription="@string/description_skip_prev"
             android:onClick="@{() -> playbackModel.skipPrev()}"
             android:src="@drawable/ic_skip_prev"
             app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
             app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
-            app:layout_constraintStart_toEndOf="@+id/playback_loop"
             app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
 
         <ImageButton
@@ -192,31 +191,30 @@
             android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
-            app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
+            app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
+            app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
             app:layout_constraintTop_toBottomOf="@+id/playback_duration_current"
             tools:src="@drawable/ic_play_to_pause" />
 
         <ImageButton
             android:id="@+id/playback_skip_next"
             style="@style/Widget.Button.Unbounded"
-            android:layout_marginEnd="@dimen/margin_large"
+            android:layout_marginStart="@dimen/margin_large"
             android:contentDescription="@string/description_skip_next"
             android:onClick="@{() -> playbackModel.skipNext()}"
             android:src="@drawable/ic_skip_next"
             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" />
 
         <ImageButton
             android:id="@+id/playback_shuffle"
             style="@style/Widget.Button.Unbounded"
+            android:layout_marginStart="@dimen/margin_large"
             android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
-            app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
             app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
 
diff --git a/app/src/main/res/layout-large/fragment_playback.xml b/app/src/main/res/layout-large/fragment_playback.xml
new file mode 100644
index 000000000..29851a4a8
--- /dev/null
+++ b/app/src/main/res/layout-large/fragment_playback.xml
@@ -0,0 +1,208 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:context=".playback.PlaybackFragment">
+
+    <data>
+
+        <variable
+            name="song"
+            type="org.oxycblt.auxio.music.Song" />
+
+        <variable
+            name="playbackModel"
+            type="org.oxycblt.auxio.playback.PlaybackViewModel" />
+
+        <variable
+            name="detailModel"
+            type="org.oxycblt.auxio.detail.DetailViewModel" />
+    </data>
+
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/playback_layout"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="@color/background"
+        android:fitsSystemWindows="true">
+
+        <androidx.appcompat.widget.Toolbar
+            android:id="@+id/playback_toolbar"
+            style="@style/Toolbar.Style.Icon"
+            android:elevation="0dp"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:menu="@menu/menu_playback"
+            app:navigationIcon="@drawable/ic_down"
+            app:title="@string/label_playback" />
+
+        <ImageView
+            android:id="@+id/playback_cover"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_margin="@dimen/margin_mid_large"
+            android:contentDescription="@{@string/description_album_cover(song.name)}"
+            android:elevation="@dimen/elevation_normal"
+            android:outlineProvider="bounds"
+            app:coverArt="@{song}"
+            app:layout_constraintBottom_toTopOf="@+id/playback_song"
+            app:layout_constraintDimensionRatio="1:1"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
+            tools:src="@drawable/ic_song" />
+
+        <TextView
+            android:id="@+id/playback_song"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/margin_mid_large"
+            android:layout_marginEnd="@dimen/margin_mid_large"
+            android:ellipsize="marquee"
+            android:fontFamily="@font/inter_semibold"
+            android:marqueeRepeatLimit="marquee_forever"
+            android:onClick="@{() -> detailModel.navToItem(playbackModel.song)}"
+            android:singleLine="true"
+            android:text="@{song.name}"
+            android:textAlignment="viewStart"
+            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
+            app:layout_constraintBottom_toTopOf="@+id/playback_artist"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintVertical_chainStyle="packed"
+            tools:text="Song Name" />
+
+        <TextView
+            android:id="@+id/playback_artist"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/margin_mid_large"
+            android:layout_marginEnd="@dimen/margin_mid_large"
+            android:ellipsize="end"
+            android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album.artist)}"
+            android:singleLine="true"
+            android:text="@{song.album.artist.name}"
+            android:textAlignment="viewStart"
+            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
+            android:textColor="?android:attr/textColorSecondary"
+            app:layout_constraintBottom_toTopOf="@+id/playback_album"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            tools:text="Artist Name" />
+
+        <TextView
+            android:id="@+id/playback_album"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/margin_mid_large"
+            android:layout_marginEnd="@dimen/margin_mid_large"
+            android:layout_marginBottom="@dimen/margin_medium"
+            android:ellipsize="end"
+            android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album)}"
+            android:singleLine="true"
+            android:text="@{song.album.name}"
+            android:textAlignment="viewStart"
+            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
+            android:textColor="?android:attr/textColorSecondary"
+            app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            tools:text="Album Name" />
+
+        <SeekBar
+            android:id="@+id/playback_seek_bar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:clickable="true"
+            android:focusable="true"
+            android:paddingStart="@dimen/margin_mid_large"
+            android:paddingEnd="@dimen/margin_mid_large"
+            android:progressBackgroundTint="?android:attr/colorControlNormal"
+            android:progressTint="?attr/colorPrimary"
+            android:splitTrack="false"
+            android:thumbOffset="@dimen/offset_thumb"
+            android:thumbTint="?attr/colorPrimary"
+            app:layout_constraintBottom_toTopOf="@+id/playback_duration_current"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            tools:progress="70" />
+
+        <TextView
+            android:id="@+id/playback_duration_current"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/margin_mid_large"
+            android:layout_marginBottom="@dimen/margin_medium"
+            app:layout_constraintBottom_toTopOf="@+id/playback_play_pause"
+            app:layout_constraintStart_toStartOf="parent"
+            tools:text="11:38" />
+
+        <TextView
+            android:id="@+id/playback_song_duration"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="@dimen/margin_mid_large"
+            android:layout_marginBottom="@dimen/margin_medium"
+            android:text="@{song.formattedDuration}"
+            app:layout_constraintBottom_toTopOf="@+id/playback_play_pause"
+            app:layout_constraintEnd_toEndOf="parent"
+            tools:text="16:16" />
+
+        <ImageButton
+            android:id="@+id/playback_loop"
+            style="@style/Widget.Button.Unbounded"
+            android:layout_marginEnd="@dimen/margin_large"
+            android:contentDescription="@string/description_change_loop"
+            android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
+            android:src="@drawable/ic_loop"
+            app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev"
+            app:layout_constraintEnd_toStartOf="@+id/playback_skip_prev"
+            app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
+
+        <ImageButton
+            android:id="@+id/playback_skip_prev"
+            style="@style/Widget.Button.Unbounded"
+            android:layout_marginEnd="@dimen/margin_large"
+            android:contentDescription="@string/description_skip_prev"
+            android:onClick="@{() -> playbackModel.skipPrev()}"
+            android:src="@drawable/ic_skip_prev"
+            app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
+            app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
+            app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
+
+        <ImageButton
+            android:id="@+id/playback_play_pause"
+            style="@style/PlayPause"
+            android:layout_marginBottom="@dimen/margin_medium"
+            android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
+            android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
+            app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
+            tools:src="@drawable/ic_play_to_pause" />
+
+        <ImageButton
+            android:id="@+id/playback_skip_next"
+            style="@style/Widget.Button.Unbounded"
+            android:layout_marginStart="@dimen/margin_large"
+            android:contentDescription="@string/description_skip_next"
+            android:onClick="@{() -> playbackModel.skipNext()}"
+            android:src="@drawable/ic_skip_next"
+            app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
+            app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
+            app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
+
+        <ImageButton
+            android:id="@+id/playback_shuffle"
+            style="@style/Widget.Button.Unbounded"
+            android:layout_marginStart="@dimen/margin_large"
+            android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
+            android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
+            android:src="@drawable/ic_shuffle"
+            app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
+            app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
+            app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_playback.xml b/app/src/main/res/layout/fragment_playback.xml
index 4b0cb92dc..e2ab13e88 100644
--- a/app/src/main/res/layout/fragment_playback.xml
+++ b/app/src/main/res/layout/fragment_playback.xml
@@ -152,19 +152,17 @@
         <ImageButton
             android:id="@+id/playback_loop"
             style="@style/Widget.Button.Unbounded"
+            android:layout_marginStart="@dimen/margin_mid_small"
             android:contentDescription="@string/description_change_loop"
             android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
             android:src="@drawable/ic_loop"
             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_constraintStart_toStartOf="@+id/playback_duration_current"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
 
         <ImageButton
             android:id="@+id/playback_skip_prev"
             style="@style/Widget.Button.Unbounded"
-            android:layout_marginStart="@dimen/margin_large"
             android:contentDescription="@string/description_skip_prev"
             android:onClick="@{() -> playbackModel.skipPrev()}"
             android:src="@drawable/ic_skip_prev"
@@ -180,14 +178,13 @@
             android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
-            app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
+            app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
+            app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
             tools:src="@drawable/ic_play_to_pause" />
 
         <ImageButton
             android:id="@+id/playback_skip_next"
             style="@style/Widget.Button.Unbounded"
-            android:layout_marginEnd="@dimen/margin_large"
             android:contentDescription="@string/description_skip_next"
             android:onClick="@{() -> playbackModel.skipNext()}"
             android:src="@drawable/ic_skip_next"
@@ -199,12 +196,12 @@
         <ImageButton
             android:id="@+id/playback_shuffle"
             style="@style/Widget.Button.Unbounded"
+            android:layout_marginEnd="@dimen/margin_mid_small"
             android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
+            app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>