From b51ec756ded32805e4f1f22f1b3c223be5c0ac57 Mon Sep 17 00:00:00 2001
From: OxygenCobalt <oxycblt@abstractr.net>
Date: Thu, 5 Aug 2021 17:00:59 -0600
Subject: [PATCH] widgets: simplify layouts

Simplify the layouts used by widgets, moving the more version-specific
attributes into settings.
---
 app/src/main/AndroidManifest.xml              |   2 +-
 .../auxio/widgets/forms/FullWidgetForm.kt     |   2 +-
 .../auxio/widgets/forms/SmallWidgetForm.kt    |   2 +-
 .../res/layout-land/fragment_playback.xml     |   5 +-
 app/src/main/res/layout-v31/widget_full.xml   | 101 ------------------
 app/src/main/res/layout-v31/widget_small.xml  |  85 ---------------
 .../layout-xlarge-land/fragment_playback.xml  |   4 +-
 .../res/layout-xlarge/fragment_playback.xml   |   7 +-
 app/src/main/res/layout/fragment_playback.xml |   2 +-
 app/src/main/res/layout/widget_default.xml    |   2 +-
 app/src/main/res/layout/widget_full.xml       |  45 ++------
 app/src/main/res/layout/widget_small.xml      |  45 +-------
 app/src/main/res/values-de/strings.xml        |   2 -
 app/src/main/res/values-es/strings.xml        |   2 -
 app/src/main/res/values-nl/strings.xml        |   2 -
 app/src/main/res/values-v31/styles_ui.xml     |   8 ++
 app/src/main/res/values/dimens.xml            |   1 +
 app/src/main/res/values/strings.xml           |  10 +-
 app/src/main/res/values/styles_component.xml  |  44 +++++++-
 app/src/main/res/values/styles_ui.xml         |  28 ++++-
 20 files changed, 100 insertions(+), 299 deletions(-)
 delete mode 100644 app/src/main/res/layout-v31/widget_full.xml
 delete mode 100644 app/src/main/res/layout-v31/widget_small.xml
 create mode 100644 app/src/main/res/values-v31/styles_ui.xml

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index fb8b9f303..20f58f8aa 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -57,7 +57,7 @@
             android:roundIcon="@mipmap/ic_launcher_round" />
 
         <receiver
-            android:label="@string/info_channel_name"
+            android:label="@string/info_widget_name"
             android:name=".widgets.WidgetProvider"
             android:exported="false">
 
diff --git a/app/src/main/java/org/oxycblt/auxio/widgets/forms/FullWidgetForm.kt b/app/src/main/java/org/oxycblt/auxio/widgets/forms/FullWidgetForm.kt
index a2a9af3e3..bc6094091 100644
--- a/app/src/main/java/org/oxycblt/auxio/widgets/forms/FullWidgetForm.kt
+++ b/app/src/main/java/org/oxycblt/auxio/widgets/forms/FullWidgetForm.kt
@@ -70,7 +70,7 @@ class FullWidgetForm : WidgetForm(R.layout.widget_full) {
             views.setCharSequence(
                 R.id.widget_cover,
                 "setContentDescription",
-                context.getString(R.string.description_placeholder_cover)
+                context.getString(R.string.description_no_cover)
             )
         }
 
diff --git a/app/src/main/java/org/oxycblt/auxio/widgets/forms/SmallWidgetForm.kt b/app/src/main/java/org/oxycblt/auxio/widgets/forms/SmallWidgetForm.kt
index 951d1a34a..9f7353c0e 100644
--- a/app/src/main/java/org/oxycblt/auxio/widgets/forms/SmallWidgetForm.kt
+++ b/app/src/main/java/org/oxycblt/auxio/widgets/forms/SmallWidgetForm.kt
@@ -55,7 +55,7 @@ class SmallWidgetForm : WidgetForm(R.layout.widget_small) {
             views.setCharSequence(
                 R.id.widget_cover,
                 "setContentDescription",
-                context.getString(R.string.description_placeholder_cover)
+                context.getString(R.string.description_no_cover)
             )
         }
 
diff --git a/app/src/main/res/layout-land/fragment_playback.xml b/app/src/main/res/layout-land/fragment_playback.xml
index 3ef26d1a2..e221f3654 100644
--- a/app/src/main/res/layout-land/fragment_playback.xml
+++ b/app/src/main/res/layout-land/fragment_playback.xml
@@ -148,7 +148,6 @@
         <ImageButton
             android:id="@+id/playback_skip_prev"
             style="@style/Widget.Button.Unbounded"
-            android:background="@drawable/ui_unbounded_ripple"
             android:contentDescription="@string/description_skip_prev"
             android:onClick="@{() -> playbackModel.skipPrev()}"
             android:src="@drawable/ic_skip_prev"
@@ -170,7 +169,6 @@
         <ImageButton
             android:id="@+id/playback_skip_next"
             style="@style/Widget.Button.Unbounded"
-            android:background="@drawable/ui_unbounded_ripple"
             android:contentDescription="@string/description_skip_next"
             android:onClick="@{() -> playbackModel.skipNext()}"
             android:src="@drawable/ic_skip_next"
@@ -183,8 +181,7 @@
             android:id="@+id/playback_shuffle"
             style="@style/Widget.Button.Unbounded"
             android:layout_marginEnd="@dimen/spacing_small"
-            android:background="@drawable/ui_unbounded_ripple"
-            android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
+            android:contentDescription="@string/description_shuffle"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
diff --git a/app/src/main/res/layout-v31/widget_full.xml b/app/src/main/res/layout-v31/widget_full.xml
deleted file mode 100644
index cff265944..000000000
--- a/app/src/main/res/layout-v31/widget_full.xml
+++ /dev/null
@@ -1,101 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:id="@android:id/background"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical"
-    android:theme="@style/Theme.Widget">
-
-    <ImageView
-        android:id="@+id/widget_cover"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="?attr/colorSurface"
-        android:scaleType="centerCrop"
-        tools:ignore="contentDescription"
-        android:src="@drawable/ic_song" />
-
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom"
-        android:background="?attr/colorSurface"
-        android:orientation="vertical"
-        android:padding="@dimen/spacing_medium">
-
-        <TextView
-            android:id="@+id/widget_song"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
-            android:textColor="?android:attr/textColorPrimary"
-            android:textStyle="bold"
-            android:text="@string/placeholder_widget_song" />
-
-        <TextView
-            android:id="@+id/widget_artist"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
-            android:text="@string/placeholder_widget_artist" />
-
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/spacing_medium"
-            android:orientation="horizontal">
-
-            <ImageButton
-                android:id="@+id/widget_loop"
-                style="@style/Widget.Button.Unbounded.Widget.V31"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_change_loop"
-                android:src="@drawable/ic_loop" />
-
-            <ImageButton
-                android:id="@+id/widget_skip_prev"
-                style="@style/Widget.Button.Unbounded.Widget.V31"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_skip_prev"
-                android:src="@drawable/ic_skip_prev" />
-
-            <ImageButton
-                android:id="@+id/widget_play_pause"
-                style="@style/Widget.Button.Unbounded.Widget.V31"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_play_pause"
-                android:src="@drawable/ic_play" />
-
-            <ImageButton
-                android:id="@+id/widget_skip_next"
-                style="@style/Widget.Button.Unbounded.Widget.V31"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_skip_next"
-                android:src="@drawable/ic_skip_next" />
-
-            <ImageButton
-                android:id="@+id/widget_shuffle"
-                style="@style/Widget.Button.Unbounded.Widget.V31"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_shuffle_off"
-                android:src="@drawable/ic_shuffle" />
-
-        </LinearLayout>
-
-    </LinearLayout>
-
-</LinearLayout>
diff --git a/app/src/main/res/layout-v31/widget_small.xml b/app/src/main/res/layout-v31/widget_small.xml
deleted file mode 100644
index a772f454a..000000000
--- a/app/src/main/res/layout-v31/widget_small.xml
+++ /dev/null
@@ -1,85 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:id="@android:id/background"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical"
-    android:theme="@style/Theme.Widget">
-
-    <ImageView
-        android:id="@+id/widget_cover"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="?attr/colorSurface"
-        android:scaleType="centerCrop"
-        tools:ignore="contentDescription"
-        android:src="@drawable/ic_song" />
-
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom"
-        android:background="?attr/colorSurface"
-        android:orientation="vertical"
-        android:padding="@dimen/spacing_medium">
-
-        <TextView
-            android:id="@+id/widget_song"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
-            android:textColor="?android:attr/textColorPrimary"
-            android:textStyle="bold"
-            android:text="@string/placeholder_widget_song" />
-
-        <TextView
-            android:id="@+id/widget_artist"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
-            android:text="@string/placeholder_widget_artist" />
-
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/spacing_medium"
-            android:orientation="horizontal">
-
-            <ImageButton
-                android:id="@+id/widget_skip_prev"
-                style="@style/Widget.Button.Unbounded.Widget.V31"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_skip_prev"
-                android:src="@drawable/ic_skip_prev" />
-
-            <ImageButton
-                android:id="@+id/widget_play_pause"
-                style="@style/Widget.Button.Unbounded.Widget.V31"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_play_pause"
-                android:src="@drawable/ic_play" />
-
-            <ImageButton
-                android:id="@+id/widget_skip_next"
-                style="@style/Widget.Button.Unbounded.Widget.V31"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_skip_next"
-                android:src="@drawable/ic_skip_next" />
-
-        </LinearLayout>
-
-    </LinearLayout>
-
-</LinearLayout>
diff --git a/app/src/main/res/layout-xlarge-land/fragment_playback.xml b/app/src/main/res/layout-xlarge-land/fragment_playback.xml
index ecf869ff0..d215cbec9 100644
--- a/app/src/main/res/layout-xlarge-land/fragment_playback.xml
+++ b/app/src/main/res/layout-xlarge-land/fragment_playback.xml
@@ -103,9 +103,9 @@
 
         <SeekBar
             android:id="@+id/playback_seek_bar"
+            style="@style/Widget.SeekBar.Full"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            style="@style/Widget.SeekBar.Full"
             android:layout_marginTop="@dimen/spacing_medium"
             app:layout_constraintBottom_toTopOf="@+id/playback_duration_current"
             app:layout_constraintEnd_toEndOf="parent"
@@ -182,7 +182,7 @@
             android:id="@+id/playback_shuffle"
             style="@style/Widget.Button.Unbounded"
             android:layout_marginStart="@dimen/spacing_large"
-            android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
+            android:contentDescription="@string/description_shuffle"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
diff --git a/app/src/main/res/layout-xlarge/fragment_playback.xml b/app/src/main/res/layout-xlarge/fragment_playback.xml
index f269cd854..db68684b6 100644
--- a/app/src/main/res/layout-xlarge/fragment_playback.xml
+++ b/app/src/main/res/layout-xlarge/fragment_playback.xml
@@ -89,9 +89,9 @@
 
         <SeekBar
             android:id="@+id/playback_seek_bar"
+            style="@style/Widget.SeekBar.Full"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            style="@style/Widget.SeekBar.Full"
             android:paddingStart="@dimen/spacing_mid_huge"
             android:paddingEnd="@dimen/spacing_mid_huge"
             app:layout_constraintBottom_toTopOf="@+id/playback_duration_current"
@@ -137,7 +137,6 @@
             android:id="@+id/playback_skip_prev"
             style="@style/Widget.Button.Unbounded"
             android:layout_marginEnd="@dimen/spacing_large"
-            android:background="@drawable/ui_unbounded_ripple"
             android:contentDescription="@string/description_skip_prev"
             android:onClick="@{() -> playbackModel.skipPrev()}"
             android:src="@drawable/ic_skip_prev"
@@ -159,7 +158,6 @@
             android:id="@+id/playback_skip_next"
             style="@style/Widget.Button.Unbounded"
             android:layout_marginStart="@dimen/spacing_large"
-            android:background="@drawable/ui_unbounded_ripple"
             android:contentDescription="@string/description_skip_next"
             android:onClick="@{() -> playbackModel.skipNext()}"
             android:src="@drawable/ic_skip_next"
@@ -171,8 +169,7 @@
             android:id="@+id/playback_shuffle"
             style="@style/Widget.Button.Unbounded"
             android:layout_marginStart="@dimen/spacing_large"
-            android:background="@drawable/ui_unbounded_ripple"
-            android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
+            android:contentDescription="@string/description_shuffle"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
diff --git a/app/src/main/res/layout/fragment_playback.xml b/app/src/main/res/layout/fragment_playback.xml
index 0336cfcba..27e1c1555 100644
--- a/app/src/main/res/layout/fragment_playback.xml
+++ b/app/src/main/res/layout/fragment_playback.xml
@@ -165,7 +165,7 @@
             android:id="@+id/playback_shuffle"
             style="@style/Widget.Button.Unbounded"
             android:layout_marginEnd="@dimen/spacing_small"
-            android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
+            android:contentDescription="@string/description_shuffle"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
diff --git a/app/src/main/res/layout/widget_default.xml b/app/src/main/res/layout/widget_default.xml
index e4df541a8..f946c1fd3 100644
--- a/app/src/main/res/layout/widget_default.xml
+++ b/app/src/main/res/layout/widget_default.xml
@@ -10,7 +10,7 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:alpha="0.3"
-        android:contentDescription="@string/description_placeholder_cover"
+        android:contentDescription="@string/description_no_cover"
         android:scaleType="centerCrop"
         android:src="@drawable/ic_song" />
 
diff --git a/app/src/main/res/layout/widget_full.xml b/app/src/main/res/layout/widget_full.xml
index 3a5ae61c7..402f4c174 100644
--- a/app/src/main/res/layout/widget_full.xml
+++ b/app/src/main/res/layout/widget_full.xml
@@ -9,44 +9,21 @@
 
     <ImageView
         android:id="@+id/widget_cover"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="?attr/colorSurface"
-        android:scaleType="centerCrop"
-        tools:ignore="contentDescription"
+        style="@style/FluidImageView"
+        android:contentDescription="@string/description_no_cover"
         android:src="@drawable/ic_song" />
 
     <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom"
-        android:elevation="@dimen/elevation_normal"
-        android:background="?attr/colorSurface"
-        android:orientation="vertical"
-        android:padding="@dimen/spacing_medium">
+        style="@style/WidgetPanel">
 
         <TextView
             android:id="@+id/widget_song"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
-            android:textColor="?android:attr/textColorPrimary"
-            android:textStyle="bold"
+            style="@style/Widget.TextView.Widget.Primary"
             android:text="@string/placeholder_widget_song" />
 
         <TextView
             android:id="@+id/widget_artist"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
+            style="@style/Widget.TextView.Widget.Secondary"
             android:text="@string/placeholder_widget_artist" />
 
         <LinearLayout
@@ -58,41 +35,31 @@
             <ImageButton
                 android:id="@+id/widget_loop"
                 style="@style/Widget.Button.Unbounded.Widget"
-                android:layout_width="0dp"
-                android:layout_weight="1"
                 android:contentDescription="@string/description_change_loop"
                 android:src="@drawable/ic_loop" />
 
             <ImageButton
                 android:id="@+id/widget_skip_prev"
                 style="@style/Widget.Button.Unbounded.Widget"
-                android:layout_width="0dp"
-                android:layout_weight="1"
                 android:contentDescription="@string/description_skip_prev"
                 android:src="@drawable/ic_skip_prev" />
 
             <ImageButton
                 android:id="@+id/widget_play_pause"
                 style="@style/Widget.Button.Unbounded.Widget"
-                android:layout_width="0dp"
-                android:layout_weight="1"
                 android:contentDescription="@string/description_play_pause"
                 android:src="@drawable/ic_play" />
 
             <ImageButton
                 android:id="@+id/widget_skip_next"
                 style="@style/Widget.Button.Unbounded.Widget"
-                android:layout_width="0dp"
-                android:layout_weight="1"
                 android:contentDescription="@string/description_skip_next"
                 android:src="@drawable/ic_skip_next" />
 
             <ImageButton
                 android:id="@+id/widget_shuffle"
                 style="@style/Widget.Button.Unbounded.Widget"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:contentDescription="@string/description_shuffle_off"
+                android:contentDescription="@string/description_shuffle"
                 android:src="@drawable/ic_shuffle" />
 
         </LinearLayout>
diff --git a/app/src/main/res/layout/widget_small.xml b/app/src/main/res/layout/widget_small.xml
index df7f9c818..6a05f68e1 100644
--- a/app/src/main/res/layout/widget_small.xml
+++ b/app/src/main/res/layout/widget_small.xml
@@ -9,44 +9,21 @@
 
     <ImageView
         android:id="@+id/widget_cover"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="?attr/colorSurface"
-        android:scaleType="centerCrop"
-        tools:ignore="contentDescription"
+        style="@style/FluidImageView"
+        android:contentDescription="@string/description_no_cover"
         android:src="@drawable/ic_song" />
 
     <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom"
-        android:background="?attr/colorSurface"
-        android:elevation="@dimen/elevation_normal"
-        android:orientation="vertical"
-        android:padding="@dimen/spacing_medium">
+        style="@style/WidgetPanel">
 
         <TextView
             android:id="@+id/widget_song"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
-            android:textColor="?android:attr/textColorPrimary"
-            android:textStyle="bold"
+            style="@style/Widget.TextView.Widget.Primary"
             android:text="@string/placeholder_widget_song" />
 
         <TextView
             android:id="@+id/widget_artist"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
+            style="@style/Widget.TextView.Widget.Secondary"
             android:text="@string/placeholder_widget_artist" />
 
         <LinearLayout
@@ -54,33 +31,21 @@
             android:layout_height="wrap_content"
             android:layout_marginTop="@dimen/spacing_medium">
 
-            <!--
-             Can't use a normal unbounded ripple here since it causes a weird bug
-             where the ripples will have a fixed starting size. Default to the
-             uglier system ripple instead.
-             -->
-
             <ImageButton
                 android:id="@+id/widget_skip_prev"
                 style="@style/Widget.Button.Unbounded.Widget"
-                android:layout_width="0dp"
-                android:layout_weight="1"
                 android:contentDescription="@string/description_skip_prev"
                 android:src="@drawable/ic_skip_prev" />
 
             <ImageButton
                 android:id="@+id/widget_play_pause"
                 style="@style/Widget.Button.Unbounded.Widget"
-                android:layout_width="0dp"
-                android:layout_weight="1"
                 android:contentDescription="@string/description_play_pause"
                 android:src="@drawable/ic_play" />
 
             <ImageButton
                 android:id="@+id/widget_skip_next"
                 style="@style/Widget.Button.Unbounded.Widget"
-                android:layout_width="0dp"
-                android:layout_weight="1"
                 android:contentDescription="@string/description_skip_next"
                 android:src="@drawable/ic_skip_next" />
 
diff --git a/app/src/main/res/values-de/strings.xml b/app/src/main/res/values-de/strings.xml
index 6ea6cd4d0..bcec02d57 100644
--- a/app/src/main/res/values-de/strings.xml
+++ b/app/src/main/res/values-de/strings.xml
@@ -109,8 +109,6 @@
     <string name="description_play_pause">Abspielen oder Pausieren</string>
     <string name="description_skip_prev">Zu letzter Lied springen</string>
     <string name="description_skip_next">Zu nächster Lied springen</string>
-    <string name="description_shuffle_on">Zufällig anschalten</string>
-    <string name="description_shuffle_off">Zufällig ausschalten</string>
     <string name="description_change_loop">Art die Wiederholung ändern</string>
 
     <string name="description_clear_search">Suchanfrage löschen</string>
diff --git a/app/src/main/res/values-es/strings.xml b/app/src/main/res/values-es/strings.xml
index 963f00ff8..60ccd6f40 100644
--- a/app/src/main/res/values-es/strings.xml
+++ b/app/src/main/res/values-es/strings.xml
@@ -112,8 +112,6 @@
     <string name="description_play_pause">Reproducir o Pausar</string>
     <string name="description_skip_next">Saltar a la siguiente canción</string>
     <string name="description_skip_prev">Saltar a la última canción</string>
-    <string name="description_shuffle_on">Activar la reproducción aleatoria</string>
-    <string name="description_shuffle_off">Desactivar la reproducción aleatoria</string>
     <string name="description_change_loop">Cambiar el modo de repetición</string>
 
     <string name="description_clear_user_queue">Limpiar cola</string>
diff --git a/app/src/main/res/values-nl/strings.xml b/app/src/main/res/values-nl/strings.xml
index ed2a971a2..50310f0d9 100644
--- a/app/src/main/res/values-nl/strings.xml
+++ b/app/src/main/res/values-nl/strings.xml
@@ -110,8 +110,6 @@
     <string name="description_play_pause">Afspelen/Pauzeren</string>
     <string name="description_skip_next">Naar volgend nummer gaan</string>
     <string name="description_skip_prev">Naar het laatste nummer gaan</string>
-    <string name="description_shuffle_on">Zet shuffle aan</string>
-    <string name="description_shuffle_off">Zet shuffle uit</string>
     <string name="description_change_loop">Herhaalfunctie wijzigen</string>
 
     <string name="description_clear_user_queue">Wachtrij wissen</string>
diff --git a/app/src/main/res/values-v31/styles_ui.xml b/app/src/main/res/values-v31/styles_ui.xml
new file mode 100644
index 000000000..f0e16879d
--- /dev/null
+++ b/app/src/main/res/values-v31/styles_ui.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="Widget.Button.Unbounded.Widget" parent="Widget.Button.Unbounded.Widget.Base">
+        <item name="android:background">@drawable/ui_unbounded_ripple</item>
+    </style>
+
+    <style name="WidgetPanel" parent="WidgetPanel.Base" />
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index e7087e0c3..a678608c3 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -12,6 +12,7 @@
 
     <!-- Height Namespace | Height for UI elements -->
     <dimen name="height_compact_progress">2dp</dimen>
+    <dimen name="height_widget_button">32dp</dimen>
 
     <!-- Width Namespace | Width for UI elements -->
     <dimen name="width_track_number">32dp</dimen>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 53441b2ba..9d94f5204 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -4,8 +4,9 @@
 
     <!-- Info namespace | App labels -->
     <string name="info_app_desc">A simple, rational music player for android.</string>
-    <string name="info_channel_name">Now Playing</string>
-    <string name="info_widget_desc">See and control playing music</string>
+    <string name="info_channel_name">Music Playback</string>
+    <string name="info_widget_name">Now Playing</string>
+    <string name="info_widget_desc">View and control music playback</string>
 
     <!-- Label Namespace | Static Labels -->
     <string name="label_retry">Retry</string>
@@ -117,9 +118,8 @@
     <string name="description_play_pause">Play or Pause</string>
     <string name="description_skip_next">Skip to next song</string>
     <string name="description_skip_prev">Skip to last song</string>
-    <string name="description_shuffle_on">Turn shuffle on</string>
-    <string name="description_shuffle_off">Turn shuffle off</string>
     <string name="description_change_loop">Change Repeat Mode</string>
+    <string name="description_shuffle">Turn shuffle on or off</string>
 
     <string name="description_clear_user_queue">Clear queue</string>
     <string name="description_clear_search">Clear search query</string>
@@ -127,7 +127,7 @@
 
     <string name="description_error">Error</string>
     <string name="description_auxio_icon">Auxio icon</string>
-    <string name="description_placeholder_cover">Album cover</string>
+    <string name="description_no_cover">Album cover</string>
     <string name="description_album_cover">Album Cover for %s</string>
     <string name="description_artist_image">Artist Image for %s</string>
     <string name="description_genre_image">Genre Image for %s</string>
diff --git a/app/src/main/res/values/styles_component.xml b/app/src/main/res/values/styles_component.xml
index 68deedcda..0728cd436 100644
--- a/app/src/main/res/values/styles_component.xml
+++ b/app/src/main/res/values/styles_component.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <!-- COMPONENT-SPECIFIC STYLES. NOT RE-USABLE. -->
+    <!-- TODO: Extract the component-specific and general styles into separate stylesheets -->
 
     <!-- Title theme for Detail Fragments -->
     <style name="DetailTitleText">
@@ -102,14 +103,41 @@
         <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:ellipsize">marquee</item>
         <item name="android:marqueeRepeatLimit">marquee_forever</item>
-        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Headline6</item>
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Headline6
+        </item>
     </style>
 
     <!-- Style for the album/artist text in PlaybackFragment -->
     <style name="Widget.TextView.Playback.Secondary" parent="Widget.TextView.Playback.Base">
         <item name="android:ellipsize">end</item>
         <item name="android:textColor">?android:attr/textColorSecondary</item>
-        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Subtitle1</item>
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Subtitle1
+        </item>
+    </style>
+
+    <!-- Style for text used in widgets -->
+    <style name="Widget.TextView.Widget.Base" parent="Widget.AppCompat.TextView">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:singleLine">true</item>
+        <item name="android:textAlignment">viewStart</item>
+    </style>
+
+    <!-- Style for the title text in PlaybackFragment -->
+    <style name="Widget.TextView.Widget.Primary" parent="Widget.TextView.Widget.Base">
+        <item name="android:fontFamily">@font/inter</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:ellipsize">end</item>
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Headline6
+        </item>
+    </style>
+
+    <!-- Style for the album/artist text in PlaybackFragment -->
+    <style name="Widget.TextView.Widget.Secondary" parent="Widget.TextView.Widget.Base">
+        <item name="android:ellipsize">end</item>
+        <item name="android:textColor">?android:attr/textColorSecondary</item>
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Subtitle1
+        </item>
     </style>
 
     <!-- Style for the play/pause circle button -->
@@ -144,6 +172,18 @@
         <item name="android:outlineProvider">bounds</item>
     </style>
 
+    <!--
+    Style for an ImageView that expands regardless of whether it can fit,
+    mostly used on widgets
+    -->
+    <style name="FluidImageView">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">0dp</item>
+        <item name="android:layout_weight">1</item>
+        <item name="android:background">?attr/colorSurface</item>
+        <item name="android:scaleType">centerCrop</item>
+    </style>
+
     <!-- Style for the seekbar on PlaybackFragment -->
     <style name="Widget.SeekBar.Full" parent="@style/Widget.AppCompat.SeekBar">
         <item name="android:clickable">true</item>
diff --git a/app/src/main/res/values/styles_ui.xml b/app/src/main/res/values/styles_ui.xml
index aa44a8370..f51faad3c 100644
--- a/app/src/main/res/values/styles_ui.xml
+++ b/app/src/main/res/values/styles_ui.xml
@@ -88,14 +88,32 @@
         <item name="android:textColor">?attr/colorPrimary</item>
     </style>
 
-    <style name="Widget.Button.Unbounded.Widget" parent="Widget.AppCompat.Button.Borderless">
-        <item name="android:layout_height">32dp</item>
-        <item name="android:background">?android:attr/selectableItemBackgroundBorderless</item>
+    <style name="Widget.Button.Unbounded.Widget.Base" parent="Widget.AppCompat.Button.Borderless">
+        <item name="android:layout_height">@dimen/height_widget_button</item>
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_weight">1</item>
         <item name="android:scaleType">fitCenter</item>
         <item name="android:padding">@dimen/spacing_micro</item>
     </style>
 
-    <style name="Widget.Button.Unbounded.Widget.V31" parent="Widget.Button.Unbounded.Widget">
-        <item name="android:background">@drawable/ui_unbounded_ripple</item>
+    <style name="Widget.Button.Unbounded.Widget" parent="Widget.Button.Unbounded.Widget.Base">
+         <!--
+         Can't use a normal unbounded ripple here since it causes a weird bug
+         where the ripples will have a fixed starting size. Default to the
+         uglier system ripple instead.
+         -->
+        <item name="android:background">?android:attr/selectableItemBackgroundBorderless</item>
+    </style>
+
+    <style name="WidgetPanel.Base">
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:padding">@dimen/spacing_medium</item>
+        <item name="android:orientation">vertical</item>
+        <item name="android:background">?attr/colorSurface</item>
+    </style>
+
+    <style name="WidgetPanel" parent="WidgetPanel.Base">
+        <item name="android:elevation">@dimen/elevation_normal</item>
     </style>
 </resources>
\ No newline at end of file