From e697908a2f9546327737f436afca3f0f0e6ff2b7 Mon Sep 17 00:00:00 2001
From: OxygenCobalt <oxycblt@abstractr.net>
Date: Sat, 20 Nov 2021 16:54:03 -0700
Subject: [PATCH] detail: update layouts

Update the detail layouts to work better on tablets and be more
consistent overall.
---
 .../org/oxycblt/auxio/coil/AuxioFetcher.kt    |  2 +-
 .../res/layout-land/fragment_playback.xml     |  1 -
 app/src/main/res/layout-land/item_detail.xml  | 12 +--
 .../layout-sw600dp-land/fragment_playback.xml |  1 -
 .../res/layout-sw600dp/fragment_playback.xml  |  1 -
 .../main/res/layout-sw600dp/item_detail.xml   | 96 +++++++++++++++++++
 .../item_detail.xml                           | 23 +++--
 .../layout-w600dp/view_compact_playback.xml   |  2 +-
 app/src/main/res/layout/fragment_about.xml    |  4 +-
 app/src/main/res/layout/fragment_playback.xml |  1 -
 app/src/main/res/layout/item_album.xml        |  2 +-
 app/src/main/res/layout/item_artist.xml       |  2 +-
 app/src/main/res/layout/item_artist_album.xml |  2 +-
 app/src/main/res/layout/item_artist_song.xml  |  2 +-
 app/src/main/res/layout/item_detail.xml       | 10 +-
 app/src/main/res/layout/item_genre.xml        |  2 +-
 app/src/main/res/layout/item_genre_song.xml   |  2 +-
 app/src/main/res/layout/item_queue_song.xml   |  2 +-
 app/src/main/res/layout/item_song.xml         |  2 +-
 .../main/res/layout/view_compact_playback.xml |  2 +-
 app/src/main/res/layout/widget_tiny.xml       |  2 +-
 .../config.xml                                |  0
 app/src/main/res/values/dimens.xml            |  3 +-
 app/src/main/res/values/styles_core.xml       |  4 +
 app/src/main/res/values/styles_ui.xml         | 22 ++++-
 app/src/main/res/values/typography.xml        | 23 ++++-
 26 files changed, 176 insertions(+), 49 deletions(-)
 create mode 100644 app/src/main/res/layout-sw600dp/item_detail.xml
 rename app/src/main/res/{layout-large => layout-sw840dp}/item_detail.xml (84%)
 rename app/src/main/res/{values-w600dp => values-w640dp}/config.xml (100%)

diff --git a/app/src/main/java/org/oxycblt/auxio/coil/AuxioFetcher.kt b/app/src/main/java/org/oxycblt/auxio/coil/AuxioFetcher.kt
index 2b22ab5ce..dedd9fb7b 100644
--- a/app/src/main/java/org/oxycblt/auxio/coil/AuxioFetcher.kt
+++ b/app/src/main/java/org/oxycblt/auxio/coil/AuxioFetcher.kt
@@ -45,7 +45,7 @@ abstract class AuxioFetcher : Fetcher {
     }
 
     /**
-     * Create a mosaic image from multiple image views, Code adapted from Phonograph
+     * Create a mosaic image from multiple streams of image data, Code adapted from Phonograph
      * https://github.com/kabouzeid/Phonograph
      */
     protected fun createMosaic(context: Context, streams: List<InputStream>): FetchResult? {
diff --git a/app/src/main/res/layout-land/fragment_playback.xml b/app/src/main/res/layout-land/fragment_playback.xml
index ea6b6f9e1..be2730e85 100644
--- a/app/src/main/res/layout-land/fragment_playback.xml
+++ b/app/src/main/res/layout-land/fragment_playback.xml
@@ -42,7 +42,6 @@
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintDimensionRatio="1"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
             tools:src="@drawable/ic_album" />
diff --git a/app/src/main/res/layout-land/item_detail.xml b/app/src/main/res/layout-land/item_detail.xml
index 9a48648db..64d187b3b 100644
--- a/app/src/main/res/layout-land/item_detail.xml
+++ b/app/src/main/res/layout-land/item_detail.xml
@@ -12,9 +12,7 @@
 
         <ImageView
             android:id="@+id/detail_cover"
-            style="@style/Widget.Auxio.Image.Full"
-            android:layout_width="@dimen/size_cover_huge_land"
-            android:layout_height="@dimen/size_cover_huge_land"
+            style="@style/Widget.Auxio.Image.Large"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             tools:ignore="ContentDescription"
@@ -27,7 +25,7 @@
             android:layout_height="wrap_content"
             android:layout_marginStart="@dimen/spacing_medium"
             android:ellipsize="end"
-            android:maxLines="2"
+            android:maxLines="1"
             app:layout_constraintBottom_toTopOf="@+id/detail_subhead"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.5"
@@ -64,12 +62,12 @@
             app:layout_constraintTop_toBottomOf="@+id/detail_subhead"
             tools:text="Info B" />
 
-        <com.google.android.material.button.MaterialButton
+        <Button
             android:id="@+id/detail_play_button"
             style="@style/Widget.Auxio.Button.Secondary"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/spacing_small"
+            android:layout_marginTop="@dimen/spacing_medium"
             android:layout_marginEnd="@dimen/spacing_small"
             android:text="@string/lbl_play"
             app:layout_constraintEnd_toStartOf="@+id/detail_shuffle_button"
@@ -77,7 +75,7 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/detail_cover" />
 
-        <com.google.android.material.button.MaterialButton
+        <Button
             android:id="@+id/detail_shuffle_button"
             style="@style/Widget.Auxio.Button.Primary"
             android:layout_width="0dp"
diff --git a/app/src/main/res/layout-sw600dp-land/fragment_playback.xml b/app/src/main/res/layout-sw600dp-land/fragment_playback.xml
index d9198aeff..ba0fcb77c 100644
--- a/app/src/main/res/layout-sw600dp-land/fragment_playback.xml
+++ b/app/src/main/res/layout-sw600dp-land/fragment_playback.xml
@@ -42,7 +42,6 @@
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintDimensionRatio="1"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
             tools:src="@drawable/ic_album" />
diff --git a/app/src/main/res/layout-sw600dp/fragment_playback.xml b/app/src/main/res/layout-sw600dp/fragment_playback.xml
index 6a9579bc8..d2a1ff4a6 100644
--- a/app/src/main/res/layout-sw600dp/fragment_playback.xml
+++ b/app/src/main/res/layout-sw600dp/fragment_playback.xml
@@ -42,7 +42,6 @@
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{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"
diff --git a/app/src/main/res/layout-sw600dp/item_detail.xml b/app/src/main/res/layout-sw600dp/item_detail.xml
new file mode 100644
index 000000000..e798c2e6d
--- /dev/null
+++ b/app/src/main/res/layout-sw600dp/item_detail.xml
@@ -0,0 +1,96 @@
+<?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">
+
+    <!-- This layout is re-used across all detail fragments. Do not add databinding. -->
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:padding="@dimen/spacing_medium">
+
+        <ImageView
+            android:id="@+id/detail_cover"
+            style="@style/Widget.Auxio.Image.MidHuge"
+            app:layout_constraintDimensionRatio="1"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:ignore="ContentDescription"
+            tools:src="@drawable/ic_artist" />
+
+        <TextView
+            android:id="@+id/detail_name"
+            style="@style/Widget.Auxio.TextView.Detail"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:fontFamily="@font/inter_semibold"
+            android:layout_marginStart="@dimen/spacing_medium"
+            android:ellipsize="end"
+            android:maxLines="1"
+            app:layout_constraintBottom_toTopOf="@+id/detail_subhead"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toEndOf="@+id/detail_cover"
+            app:layout_constraintTop_toTopOf="@+id/detail_cover"
+            app:layout_constraintVertical_chainStyle="packed"
+            tools:text="Name" />
+
+        <TextView
+            android:id="@+id/detail_subhead"
+            style="@style/Widget.Auxio.TextView.Secondary"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/spacing_medium"
+            android:clickable="true"
+            android:focusable="true"
+            app:layout_constraintBottom_toTopOf="@+id/detail_info"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintStart_toEndOf="@+id/detail_cover"
+            app:layout_constraintTop_toBottomOf="@+id/detail_name"
+            tools:text="Info A" />
+
+        <TextView
+            android:id="@+id/detail_info"
+            style="@style/Widget.Auxio.TextView.Secondary"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/spacing_medium"
+            app:layout_constraintBottom_toTopOf="@+id/detail_play_button"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@+id/detail_cover"
+            app:layout_constraintTop_toBottomOf="@+id/detail_subhead"
+            tools:text="Info B" />
+
+
+        <Button
+            android:id="@+id/detail_play_button"
+            style="@style/Widget.Auxio.Button.Secondary"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/spacing_medium"
+            android:layout_marginTop="@dimen/spacing_medium"
+            android:layout_marginEnd="@dimen/spacing_small"
+            android:text="@string/lbl_play"
+            app:layout_constraintBottom_toBottomOf="@+id/detail_cover"
+            app:layout_constraintEnd_toStartOf="@+id/detail_shuffle_button"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toEndOf="@+id/detail_cover"
+            app:layout_constraintTop_toBottomOf="@+id/detail_info" />
+
+        <Button
+            android:id="@+id/detail_shuffle_button"
+            style="@style/Widget.Auxio.Button.Primary"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/spacing_small"
+            android:text="@string/lbl_shuffle"
+            app:layout_constraintBottom_toBottomOf="@+id/detail_play_button"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@+id/detail_play_button"
+            app:layout_constraintTop_toTopOf="@+id/detail_play_button" />
+
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout-large/item_detail.xml b/app/src/main/res/layout-sw840dp/item_detail.xml
similarity index 84%
rename from app/src/main/res/layout-large/item_detail.xml
rename to app/src/main/res/layout-sw840dp/item_detail.xml
index c224677d0..9c6ba6280 100644
--- a/app/src/main/res/layout-large/item_detail.xml
+++ b/app/src/main/res/layout-sw840dp/item_detail.xml
@@ -10,9 +10,7 @@
 
         <ImageView
             android:id="@+id/detail_cover"
-            style="@style/Widget.Auxio.Image.Full"
-            android:layout_width="@dimen/size_cover_huge"
-            android:layout_height="@dimen/size_cover_huge"
+            style="@style/Widget.Auxio.Image.Huge"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             tools:ignore="ContentDescription"
@@ -21,11 +19,12 @@
         <TextView
             android:id="@+id/detail_name"
             style="@style/Widget.Auxio.TextView.Detail"
+            android:textAppearance="@style/TextAppearance.Auxio.HeadlineLarge"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginStart="@dimen/spacing_medium"
             android:ellipsize="end"
-            android:maxLines="4"
+            android:maxLines="1"
             app:layout_constraintBottom_toTopOf="@+id/detail_subhead"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.5"
@@ -40,6 +39,7 @@
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginStart="@dimen/spacing_medium"
+            android:textAppearance="@style/TextAppearance.Auxio.HeadlineSmall"
             android:clickable="true"
             android:focusable="true"
             app:layout_constraintBottom_toTopOf="@+id/detail_info"
@@ -54,26 +54,29 @@
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginStart="@dimen/spacing_medium"
-            app:layout_constraintBottom_toBottomOf="@+id/detail_cover"
             app:layout_constraintEnd_toEndOf="parent"
+            android:textAppearance="@style/TextAppearance.Auxio.HeadlineSmall"
             app:layout_constraintStart_toEndOf="@+id/detail_cover"
             app:layout_constraintTop_toBottomOf="@+id/detail_subhead"
+            app:layout_constraintBottom_toTopOf="@+id/detail_play_button"
             tools:text="Info B" />
 
-        <com.google.android.material.button.MaterialButton
+        <Button
             android:id="@+id/detail_play_button"
             style="@style/Widget.Auxio.Button.Secondary"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/spacing_small"
+            android:layout_marginStart="@dimen/spacing_medium"
+            android:layout_marginTop="@dimen/spacing_medium"
             android:layout_marginEnd="@dimen/spacing_small"
             android:text="@string/lbl_play"
+            app:layout_constraintBottom_toBottomOf="@+id/detail_cover"
             app:layout_constraintEnd_toStartOf="@+id/detail_shuffle_button"
             app:layout_constraintHorizontal_bias="0.5"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/detail_cover" />
+            app:layout_constraintStart_toEndOf="@+id/detail_cover"
+            app:layout_constraintTop_toBottomOf="@+id/detail_info" />
 
-        <com.google.android.material.button.MaterialButton
+        <Button
             android:id="@+id/detail_shuffle_button"
             style="@style/Widget.Auxio.Button.Primary"
             android:layout_width="0dp"
diff --git a/app/src/main/res/layout-w600dp/view_compact_playback.xml b/app/src/main/res/layout-w600dp/view_compact_playback.xml
index db457a5e6..edd6c90ff 100644
--- a/app/src/main/res/layout-w600dp/view_compact_playback.xml
+++ b/app/src/main/res/layout-w600dp/view_compact_playback.xml
@@ -23,7 +23,7 @@
 
         <ImageView
             android:id="@+id/playback_cover"
-            style="@style/Widget.Auxio.Image.Compact"
+            style="@style/Widget.Auxio.Image.Small"
             android:layout_margin="@dimen/spacing_small"
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{song}"
diff --git a/app/src/main/res/layout/fragment_about.xml b/app/src/main/res/layout/fragment_about.xml
index e3fb5090d..9c796fc67 100644
--- a/app/src/main/res/layout/fragment_about.xml
+++ b/app/src/main/res/layout/fragment_about.xml
@@ -47,7 +47,7 @@
 
                     <ImageView
                         android:id="@+id/about_auxio_icon"
-                        style="@style/Widget.Auxio.Image.Compact"
+                        style="@style/Widget.Auxio.Image.Small"
                         android:layout_marginStart="@dimen/spacing_medium"
                         android:layout_marginTop="@dimen/spacing_medium"
                         android:contentDescription="@string/desc_auxio_icon"
@@ -63,7 +63,7 @@
                         android:layout_height="wrap_content"
                         android:layout_marginStart="@dimen/spacing_medium"
                         android:text="@string/info_app_name"
-                        android:textAppearance="@style/TextAppearance.Auxio.HeadlineSmall"
+                        android:textAppearance="@style/TextAppearance.Auxio.TitleLarge"
                         app:layout_constraintBottom_toBottomOf="@+id/about_auxio_icon"
                         app:layout_constraintEnd_toEndOf="parent"
                         app:layout_constraintStart_toEndOf="@+id/about_auxio_icon"
diff --git a/app/src/main/res/layout/fragment_playback.xml b/app/src/main/res/layout/fragment_playback.xml
index e43bff7d7..ed03e3aef 100644
--- a/app/src/main/res/layout/fragment_playback.xml
+++ b/app/src/main/res/layout/fragment_playback.xml
@@ -41,7 +41,6 @@
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{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"
diff --git a/app/src/main/res/layout/item_album.xml b/app/src/main/res/layout/item_album.xml
index be1d8103a..de0af81c4 100644
--- a/app/src/main/res/layout/item_album.xml
+++ b/app/src/main/res/layout/item_album.xml
@@ -15,7 +15,7 @@
 
         <ImageView
             android:id="@+id/album_cover"
-            style="@style/Widget.Auxio.Image.Normal"
+            style="@style/Widget.Auxio.Image.Medium"
             android:contentDescription="@{@string/desc_album_cover(album.name)}"
             app:albumArt="@{album}"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/item_artist.xml b/app/src/main/res/layout/item_artist.xml
index 2465a2e74..c4e4c138b 100644
--- a/app/src/main/res/layout/item_artist.xml
+++ b/app/src/main/res/layout/item_artist.xml
@@ -15,7 +15,7 @@
 
         <ImageView
             android:id="@+id/artist_image"
-            style="@style/Widget.Auxio.Image.Normal"
+            style="@style/Widget.Auxio.Image.Medium"
             android:contentDescription="@{@string/desc_artist_image(artist.resolvedName)}"
             app:artistImage="@{artist}"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/item_artist_album.xml b/app/src/main/res/layout/item_artist_album.xml
index 434fea821..9adbcb6c6 100644
--- a/app/src/main/res/layout/item_artist_album.xml
+++ b/app/src/main/res/layout/item_artist_album.xml
@@ -15,7 +15,7 @@
 
         <ImageView
             android:id="@+id/album_cover"
-            style="@style/Widget.Auxio.Image.Normal"
+            style="@style/Widget.Auxio.Image.Medium"
             android:contentDescription="@{@string/desc_album_cover(album.name)}"
             app:albumArt="@{album}"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/item_artist_song.xml b/app/src/main/res/layout/item_artist_song.xml
index 678cc9e23..0c47784e4 100644
--- a/app/src/main/res/layout/item_artist_song.xml
+++ b/app/src/main/res/layout/item_artist_song.xml
@@ -15,7 +15,7 @@
 
         <ImageView
             android:id="@+id/album_cover"
-            style="@style/Widget.Auxio.Image.Compact"
+            style="@style/Widget.Auxio.Image.Small"
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/item_detail.xml b/app/src/main/res/layout/item_detail.xml
index cc63902c0..9d06e7658 100644
--- a/app/src/main/res/layout/item_detail.xml
+++ b/app/src/main/res/layout/item_detail.xml
@@ -12,9 +12,7 @@
 
         <ImageView
             android:id="@+id/detail_cover"
-            style="@style/Widget.Auxio.Image.Full"
-            android:layout_width="@dimen/size_cover_huge"
-            android:layout_height="@dimen/size_cover_huge"
+            style="@style/Widget.Auxio.Image.Huge"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -53,19 +51,19 @@
             app:layout_constraintTop_toBottomOf="@+id/detail_subhead"
             tools:text="Info B" />
 
-        <com.google.android.material.button.MaterialButton
+        <Button
             android:id="@+id/detail_play_button"
             style="@style/Widget.Auxio.Button.Secondary"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/spacing_small"
+            android:layout_marginTop="@dimen/spacing_medium"
             android:layout_marginEnd="@dimen/spacing_small"
             android:text="@string/lbl_play"
             app:layout_constraintEnd_toStartOf="@+id/detail_shuffle_button"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/detail_info" />
 
-        <com.google.android.material.button.MaterialButton
+        <Button
             android:id="@+id/detail_shuffle_button"
             style="@style/Widget.Auxio.Button.Primary"
             android:layout_width="0dp"
diff --git a/app/src/main/res/layout/item_genre.xml b/app/src/main/res/layout/item_genre.xml
index 6e975bd13..8fb90cb02 100644
--- a/app/src/main/res/layout/item_genre.xml
+++ b/app/src/main/res/layout/item_genre.xml
@@ -15,7 +15,7 @@
 
         <ImageView
             android:id="@+id/genre_image"
-            style="@style/Widget.Auxio.Image.Normal"
+            style="@style/Widget.Auxio.Image.Medium"
             android:contentDescription="@{@string/desc_genre_image(genre.resolvedName)}"
             app:genreImage="@{genre}"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/item_genre_song.xml b/app/src/main/res/layout/item_genre_song.xml
index 8fd5afd3c..d71925a68 100644
--- a/app/src/main/res/layout/item_genre_song.xml
+++ b/app/src/main/res/layout/item_genre_song.xml
@@ -15,7 +15,7 @@
 
         <ImageView
             android:id="@+id/album_cover"
-            style="@style/Widget.Auxio.Image.Compact"
+            style="@style/Widget.Auxio.Image.Small"
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/item_queue_song.xml b/app/src/main/res/layout/item_queue_song.xml
index e122c1b40..d79c22ab6 100644
--- a/app/src/main/res/layout/item_queue_song.xml
+++ b/app/src/main/res/layout/item_queue_song.xml
@@ -40,7 +40,7 @@
 
             <ImageView
                 android:id="@+id/album_cover"
-                style="@style/Widget.Auxio.Image.Compact"
+                style="@style/Widget.Auxio.Image.Small"
                 android:layout_margin="@dimen/spacing_medium"
                 android:contentDescription="@{@string/desc_album_cover(song.name)}"
                 app:albumArt="@{song}"
diff --git a/app/src/main/res/layout/item_song.xml b/app/src/main/res/layout/item_song.xml
index 7085c0c98..1bb7a1f4c 100644
--- a/app/src/main/res/layout/item_song.xml
+++ b/app/src/main/res/layout/item_song.xml
@@ -15,7 +15,7 @@
 
         <ImageView
             android:id="@+id/album_cover"
-            style="@style/Widget.Auxio.Image.Compact"
+            style="@style/Widget.Auxio.Image.Small"
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/view_compact_playback.xml b/app/src/main/res/layout/view_compact_playback.xml
index 68d9d6b16..ae4a4c86d 100644
--- a/app/src/main/res/layout/view_compact_playback.xml
+++ b/app/src/main/res/layout/view_compact_playback.xml
@@ -23,7 +23,7 @@
 
         <ImageView
             android:id="@+id/playback_cover"
-            style="@style/Widget.Auxio.Image.Compact"
+            style="@style/Widget.Auxio.Image.Small"
             android:layout_margin="@dimen/spacing_small"
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{song}"
diff --git a/app/src/main/res/layout/widget_tiny.xml b/app/src/main/res/layout/widget_tiny.xml
index a6febe181..3ccd5a342 100644
--- a/app/src/main/res/layout/widget_tiny.xml
+++ b/app/src/main/res/layout/widget_tiny.xml
@@ -22,7 +22,7 @@
 
         <android.widget.ImageView
             android:id="@+id/widget_cover"
-            style="@style/Widget.Auxio.Image.Normal"
+            style="@style/Widget.Auxio.Image.Medium"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:contentDescription="@string/desc_no_cover"
             android:scaleType="centerCrop"
diff --git a/app/src/main/res/values-w600dp/config.xml b/app/src/main/res/values-w640dp/config.xml
similarity index 100%
rename from app/src/main/res/values-w600dp/config.xml
rename to app/src/main/res/values-w640dp/config.xml
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index a22309f0a..23771903e 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -14,7 +14,8 @@
 
     <dimen name="size_cover_compact">48dp</dimen>
     <dimen name="size_cover_normal">56dp</dimen>
-    <dimen name="size_cover_huge_land">128dp</dimen>
+    <dimen name="size_cover_large">128dp</dimen>
+    <dimen name="size_cover_mid_huge">192dp</dimen>
     <dimen name="size_cover_huge">256dp</dimen>
 
     <dimen name="size_small_unb_ripple">20dp</dimen>
diff --git a/app/src/main/res/values/styles_core.xml b/app/src/main/res/values/styles_core.xml
index 33ecef3a5..6a45eb4cd 100644
--- a/app/src/main/res/values/styles_core.xml
+++ b/app/src/main/res/values/styles_core.xml
@@ -29,6 +29,10 @@
         <!-- Material configuration -->
         <item name="materialAlertDialogTheme">@style/Theme.Auxio.Dialog</item>
 
+        <item name="textAppearanceDisplayLarge">@style/TextAppearance.Auxio.DisplayLarge</item>
+        <item name="textAppearanceDisplayMedium">@style/TextAppearance.Auxio.DisplayMedium</item>
+        <item name="textAppearanceDisplaySmall">@style/TextAppearance.Auxio.DisplaySmall</item>
+
         <item name="textAppearanceHeadlineLarge">@style/TextAppearance.Auxio.HeadlineLarge</item>
         <item name="textAppearanceHeadlineMedium">@style/TextAppearance.Auxio.HeadlineMedium</item>
         <item name="textAppearanceHeadlineSmall">@style/TextAppearance.Auxio.HeadlineSmall</item>
diff --git a/app/src/main/res/values/styles_ui.xml b/app/src/main/res/values/styles_ui.xml
index ff0dfad26..a38ac8aa2 100644
--- a/app/src/main/res/values/styles_ui.xml
+++ b/app/src/main/res/values/styles_ui.xml
@@ -19,19 +19,35 @@
         <item name="navigationIcon">@drawable/ic_down</item>
     </style>
 
-    <style name="Widget.Auxio.Image.Compact" parent="">
+    <style name="Widget.Auxio.Image.Small" parent="">
         <item name="android:layout_width">@dimen/size_cover_compact</item>
         <item name="android:layout_height">@dimen/size_cover_compact</item>
     </style>
 
-    <style name="Widget.Auxio.Image.Normal" parent="">
+    <style name="Widget.Auxio.Image.Medium" parent="">
         <item name="android:layout_width">@dimen/size_cover_normal</item>
         <item name="android:layout_height">@dimen/size_cover_normal</item>
     </style>
 
+    <style name="Widget.Auxio.Image.Large" parent="">
+        <item name="android:layout_width">@dimen/size_cover_large</item>
+        <item name="android:layout_height">@dimen/size_cover_large</item>
+    </style>
+
+    <style name="Widget.Auxio.Image.MidHuge" parent="">
+        <item name="android:layout_width">@dimen/size_cover_mid_huge</item>
+        <item name="android:layout_height">@dimen/size_cover_mid_huge</item>
+    </style>
+
+    <style name="Widget.Auxio.Image.Huge" parent="">
+        <item name="android:layout_width">@dimen/size_cover_huge</item>
+        <item name="android:layout_height">@dimen/size_cover_huge</item>
+    </style>
+
     <style name="Widget.Auxio.Image.Full" parent="">
         <item name="android:layout_width">0dp</item>
         <item name="android:layout_height">0dp</item>
+        <item name="layout_constraintDimensionRatio">1</item>
     </style>
 
     <style name="Widget.Auxio.ItemLayout" parent="">
@@ -108,7 +124,7 @@
     </style>
 
     <style name="Widget.Auxio.TextView.Detail" parent="Widget.Auxio.TextView.Base">
-        <item name="android:textAppearance">@style/TextAppearance.Auxio.HeadlineSmall</item>
+        <item name="android:textAppearance">@style/TextAppearance.Auxio.TitleLarge</item>
         <item name="android:textAlignment">viewStart</item>
     </style>
 
diff --git a/app/src/main/res/values/typography.xml b/app/src/main/res/values/typography.xml
index 8de43b0c5..0d240ad40 100644
--- a/app/src/main/res/values/typography.xml
+++ b/app/src/main/res/values/typography.xml
@@ -1,19 +1,34 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <!-- Basic Material3 typography -->
+    <style name="TextAppearance.Auxio.DisplayLarge" parent="TextAppearance.Material3.DisplayLarge">
+        <item name="fontFamily">@font/inter_semibold</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
+    </style>
+
+    <style name="TextAppearance.Auxio.DisplayMedium" parent="TextAppearance.Material3.DisplayMedium">
+        <item name="fontFamily">@font/inter</item>
+        <item name="android:fontFamily">@font/inter</item>
+    </style>
+
+    <style name="TextAppearance.Auxio.DisplaySmall" parent="TextAppearance.Material3.DisplaySmall">
+        <item name="fontFamily">@font/inter</item>
+        <item name="android:fontFamily">@font/inter</item>
+    </style>
+    
     <style name="TextAppearance.Auxio.HeadlineLarge" parent="TextAppearance.Material3.HeadlineLarge">
         <item name="fontFamily">@font/inter_semibold</item>
         <item name="android:fontFamily">@font/inter_semibold</item>
     </style>
 
     <style name="TextAppearance.Auxio.HeadlineMedium" parent="TextAppearance.Material3.HeadlineMedium">
-        <item name="fontFamily">@font/inter_semibold</item>
-        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="fontFamily">@font/inter</item>
+        <item name="android:fontFamily">@font/inter</item>
     </style>
 
     <style name="TextAppearance.Auxio.HeadlineSmall" parent="TextAppearance.Material3.HeadlineSmall">
-        <item name="fontFamily">@font/inter_semibold</item>
-        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="fontFamily">@font/inter</item>
+        <item name="android:fontFamily">@font/inter</item>
     </style>
 
     <style name="TextAppearance.Auxio.TitleLarge" parent="TextAppearance.Material3.TitleLarge">