widget: make small/wide widgets stylistic

Update the small/wide widgets to show just the cover art and controls.
This is for two reasons:
1. The old layouts wasted space, which didn't make them look very good
2. I want to add a more Material3-eque "Stylistic" widget option for
the people who want them. Doing this allows me to pack that option into
the widget without having to add a new option.
This commit is contained in:
OxygenCobalt 2021-11-14 08:57:57 -07:00
parent f66dea9469
commit d4fa52ee13
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
15 changed files with 240 additions and 181 deletions

View file

@ -24,7 +24,7 @@ import org.oxycblt.auxio.R
/**
* An enum for determining what items to show in a given list.
* Note: **DO NOT RE-ARRANGE THE ENUM**. The ordinals are used to store library tabs, so doing
* changing them would also change the meaning.
* changing them would also change the meaning of tab instances.
* @author OxygenCobalt
*/
enum class DisplayMode(@StringRes val string: Int) {

View file

@ -48,8 +48,7 @@ import org.oxycblt.auxio.util.logD
*
* - Large widgets will show cover art and all controls
* - Tall and thin widgets will show cover art and three controls
* - Wide and short widgets will show cover art and all controls in a compact manner
* - Small widgets will only show text and three controls
* - Wide or small widgets will display a "Stylistic" view with controls and the cover art
* - Tiny widgets [e.g landscape mode] will show cover art, text, and a play/pause control.
*
* There are some minor problems with this implementation [notably UI jittering when the widget

View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@android:dimen/system_app_widget_background_radius" />
<solid android:color="?attr/colorSurface" />
</shape>

View file

@ -5,6 +5,6 @@
<solid android:color="#00000000" />
<size
android:width="1000px"
android:height="1000px" />
android:width="10000px"
android:height="10000px" />
</shape>

View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="?attr/colorSurface" />
</shape>

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<android.widget.RelativeLayout 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"
@ -8,14 +8,17 @@
android:theme="@style/Theme.Widget">
<!--
We can't use ConstraintLayout on widgets due to RemoteView limitations, but
for this widget to work, we need to get the cover to preserve it's aspect
ratio. So, we use a fixed-size 1000x1000 drawable and then align the cover view
to that so that the bounds will scale properly.
This is easily one of the worst layout hacks I've done, but it works.
For this widget form to work, we need to scale the ImageView across a 1:1 aspect ratio.
However, since we are working with a RemoteViews instance, we can't just use ConstraintLayout
to achieve this. We can use RelativeLayout, but there's no way to force an aspect ratio with
that layout. However, if we create an invisible ImageView that contains a massive fixed-size
drawable and then clamp our main ImageView to it, we can make the view scale on a 1:1 aspect
ratio.
This is easily one of the worst layout hacks I've done, but it seems to work.
-->
<ImageView
<android.widget.ImageView
android:id="@+id/widget_aspect_ratio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
@ -32,7 +35,7 @@
android:visibility="invisible"
tools:ignore="ContentDescription" />
<ImageView
<android.widget.ImageView
android:id="@+id/widget_cover"
android:layout_width="0dp"
android:layout_height="0dp"
@ -45,8 +48,11 @@
<android.widget.LinearLayout
android:id="@+id/widget_panel"
style="@style/Widget.Auxio.AppWidget.Panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:padding="@dimen/spacing_medium"
android:orientation="vertical"
android:layout_gravity="center">
<android.widget.TextView
@ -66,7 +72,7 @@
<android.widget.LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_medium">
android:layout_marginTop="@dimen/spacing_small">
<android.widget.ImageButton
android:id="@+id/widget_loop"
@ -117,4 +123,4 @@
</android.widget.LinearLayout>
</RelativeLayout>
</android.widget.RelativeLayout>

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<android.widget.RelativeLayout 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"
@ -8,14 +8,17 @@
android:theme="@style/Theme.Widget">
<!--
We can't use ConstraintLayout on widgets due to RemoteView limitations, but
for this widget form to work, we need to get the cover to preserve it's aspect
ratio. So, we use a fixed-size 1000x1000 drawable and then align the cover view
to that so that the bounds will scale properly.
For this widget form to work, we need to scale the ImageView across a 1:1 aspect ratio.
However, since we are working with a RemoteViews instance, we can't just use ConstraintLayout
to achieve this. We can use RelativeLayout, but there's no way to force an aspect ratio with
that layout. However, if we create an invisible ImageView that contains a massive fixed-size
drawable and then clamp our main ImageView to it, we can make the view scale on a 1:1 aspect
ratio.
This is easily one of the worst layout hacks I've done, but it seems to work.
-->
<ImageView
<android.widget.ImageView
android:id="@+id/widget_aspect_ratio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
@ -32,7 +35,7 @@
android:visibility="invisible"
tools:ignore="ContentDescription" />
<ImageView
<android.widget.ImageView
android:id="@+id/widget_cover"
android:layout_width="0dp"
android:layout_height="0dp"
@ -45,8 +48,11 @@
<android.widget.LinearLayout
android:id="@+id/widget_panel"
style="@style/Widget.Auxio.AppWidget.Panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:padding="@dimen/spacing_medium"
android:orientation="vertical"
android:layout_gravity="center">
<android.widget.TextView
@ -66,7 +72,7 @@
<android.widget.LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_medium"
android:layout_marginTop="@dimen/spacing_small"
android:orientation="horizontal">
<android.widget.ImageButton
@ -99,6 +105,6 @@
</android.widget.LinearLayout>
</android.widget.LinearLayout>
</RelativeLayout>
</android.widget.RelativeLayout>

View file

@ -1,63 +1,92 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<android.widget.RelativeLayout 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:background="?attr/colorSurface"
android:gravity="center_vertical"
android:orientation="vertical"
android:background="@android:color/transparent"
android:theme="@style/Theme.Widget">
<android.widget.LinearLayout style="@style/Widget.Auxio.AppWidget.Panel">
<!--
For this widget form to work, we need to scale the ImageView across a 1:1 aspect ratio.
However, since we are working with a RemoteViews instance, we can't just use ConstraintLayout
to achieve this. We can use RelativeLayout, but there's no way to force an aspect ratio with
that layout. However, if we create an invisible ImageView that contains a massive fixed-size
drawable and then clamp our main ImageView to it, we can make the view scale on a 1:1 aspect
ratio.
<android.widget.TextView
android:id="@+id/widget_song"
style="@style/Widget.Auxio.TextView.Primary.AppWidget"
android:layout_width="match_parent"
This is easily one of the worst layout hacks I've done, but it seems to work.
-->
<android.widget.ImageView
android:id="@+id/widget_aspect_ratio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/widget_panel"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="@dimen/spacing_small"
android:layout_marginTop="@dimen/spacing_small"
android:layout_marginEnd="@dimen/spacing_small"
android:layout_marginBottom="@dimen/spacing_small"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/ui_widget_aspect_ratio"
android:visibility="invisible"
tools:ignore="ContentDescription" />
<android.widget.ImageView
android:id="@+id/widget_cover"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignStart="@id/widget_aspect_ratio"
android:layout_alignTop="@id/widget_aspect_ratio"
android:layout_alignEnd="@id/widget_aspect_ratio"
android:layout_alignBottom="@id/widget_aspect_ratio"
android:src="@drawable/ic_song"
tools:ignore="ContentDescription" />
<android.widget.LinearLayout
android:id="@+id/widget_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:padding="@dimen/spacing_small"
android:elevation="@dimen/elevation_normal"
android:orientation="horizontal"
android:background="@drawable/ui_widget_panel"
android:layout_gravity="center">
<android.widget.ImageButton
android:id="@+id/widget_skip_prev"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/def_widget_song" />
android:layout_weight="1"
android:contentDescription="@string/desc_skip_prev"
android:src="@drawable/ic_skip_prev" />
<android.widget.TextView
android:id="@+id/widget_artist"
style="@style/Widget.Auxio.TextView.Secondary.AppWidget"
android:layout_width="match_parent"
<android.widget.ImageButton
android:id="@+id/widget_play_pause"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/def_widget_artist" />
android:layout_weight="1"
android:contentDescription="@string/desc_play_pause"
android:src="@drawable/ic_play" />
<android.widget.LinearLayout
android:layout_width="match_parent"
<android.widget.ImageButton
android:id="@+id/widget_skip_next"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_medium">
<android.widget.ImageButton
android:id="@+id/widget_skip_prev"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_skip_prev"
android:src="@drawable/ic_skip_prev" />
<android.widget.ImageButton
android:id="@+id/widget_play_pause"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_play_pause"
android:src="@drawable/ic_play" />
<android.widget.ImageButton
android:id="@+id/widget_skip_next"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_skip_next"
android:src="@drawable/ic_skip_next" />
</android.widget.LinearLayout>
android:layout_weight="1"
android:contentDescription="@string/desc_skip_next"
android:src="@drawable/ic_skip_next" />
</android.widget.LinearLayout>
</android.widget.RelativeLayout>
</LinearLayout>

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<android.widget.LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
@ -8,15 +8,19 @@
android:orientation="vertical"
android:theme="@style/Theme.Widget">
<!--
This is a throwaway layout designed for the rare edge-case where a 2xN widget is shown
in landscape mode.
-->
<LinearLayout
<android.widget.LinearLayout
style="@style/Widget.Auxio.AppWidget.Panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
<android.widget.ImageView
android:id="@+id/widget_cover"
style="@style/Widget.Auxio.Image.Normal"
android:layout_marginEnd="@dimen/spacing_medium"
@ -24,7 +28,7 @@
android:scaleType="centerCrop"
android:src="@drawable/ic_song" />
<LinearLayout
<android.widget.LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
@ -44,7 +48,7 @@
android:layout_height="wrap_content"
android:text="@string/def_widget_artist" />
</LinearLayout>
</android.widget.LinearLayout>
<android.widget.ImageButton
android:id="@+id/widget_play_pause"
@ -56,7 +60,5 @@
android:minHeight="@dimen/size_btn_small"
android:src="@drawable/sel_playing_state" />
</LinearLayout>
</LinearLayout>
</android.widget.LinearLayout>
</android.widget.LinearLayout>

View file

@ -1,104 +1,110 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<android.widget.RelativeLayout 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:background="?attr/colorSurface"
android:gravity="center_vertical"
android:orientation="vertical"
android:background="@android:color/transparent"
android:theme="@style/Theme.Widget">
<android.widget.LinearLayout style="@style/Widget.Auxio.AppWidget.Panel">
<!--
For this widget form to work, we need to scale the ImageView across a 1:1 aspect ratio.
However, since we are working with a RemoteViews instance, we can't just use ConstraintLayout
to achieve this. We can use RelativeLayout, but there's no way to force an aspect ratio with
that layout. However, if we create an invisible ImageView that contains a massive fixed-size
drawable and then clamp our main ImageView to it, we can make the view scale on a 1:1 aspect
ratio.
<LinearLayout
android:layout_width="match_parent"
This is easily one of the worst layout hacks I've done, but it seems to work.
-->
<android.widget.ImageView
android:id="@+id/widget_aspect_ratio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/widget_panel"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="@dimen/spacing_small"
android:layout_marginTop="@dimen/spacing_small"
android:layout_marginEnd="@dimen/spacing_small"
android:layout_marginBottom="@dimen/spacing_small"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/ui_widget_aspect_ratio"
android:visibility="invisible"
tools:ignore="ContentDescription" />
<android.widget.ImageView
android:id="@+id/widget_cover"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignStart="@id/widget_aspect_ratio"
android:layout_alignTop="@id/widget_aspect_ratio"
android:layout_alignEnd="@id/widget_aspect_ratio"
android:layout_alignBottom="@id/widget_aspect_ratio"
android:src="@drawable/ic_song"
tools:ignore="ContentDescription" />
<android.widget.LinearLayout
android:id="@+id/widget_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:background="@drawable/ui_widget_panel"
android:elevation="@dimen/elevation_normal"
android:orientation="horizontal"
android:padding="@dimen/spacing_small">
<android.widget.ImageButton
android:id="@+id/widget_loop"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
android:layout_weight="1"
android:contentDescription="@string/desc_change_loop"
android:src="@drawable/ic_loop" />
<ImageView
android:id="@+id/widget_cover"
style="@style/Widget.Auxio.Image.Normal"
android:layout_marginEnd="@dimen/spacing_medium"
android:contentDescription="@string/desc_no_cover"
android:scaleType="centerCrop"
android:src="@drawable/ic_song" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<android.widget.TextView
android:id="@+id/widget_song"
style="@style/Widget.Auxio.TextView.Primary.AppWidget"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/def_widget_song" />
<android.widget.TextView
android:id="@+id/widget_artist"
style="@style/Widget.Auxio.TextView.Secondary.AppWidget"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/def_widget_artist" />
</LinearLayout>
</LinearLayout>
<android.widget.LinearLayout
android:layout_width="match_parent"
<android.widget.ImageButton
android:id="@+id/widget_skip_prev"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_medium"
android:orientation="horizontal">
android:layout_weight="1"
android:contentDescription="@string/desc_skip_prev"
android:src="@drawable/ic_skip_prev" />
<android.widget.ImageButton
android:id="@+id/widget_loop"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_change_loop"
android:src="@drawable/ic_loop" />
<android.widget.ImageButton
android:id="@+id/widget_play_pause"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_play_pause"
android:src="@drawable/sel_playing_state" />
<android.widget.ImageButton
android:id="@+id/widget_skip_prev"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_skip_prev"
android:src="@drawable/ic_skip_prev" />
<android.widget.ImageButton
android:id="@+id/widget_skip_next"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_skip_next"
android:src="@drawable/ic_skip_next" />
<android.widget.ImageButton
android:id="@+id/widget_play_pause"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_play_pause"
android:src="@drawable/sel_playing_state" />
<android.widget.ImageButton
android:id="@+id/widget_skip_next"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_skip_next"
android:src="@drawable/ic_skip_next" />
<android.widget.ImageButton
android:id="@+id/widget_shuffle"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_shuffle"
android:src="@drawable/ic_shuffle" />
</android.widget.LinearLayout>
<android.widget.ImageButton
android:id="@+id/widget_shuffle"
style="@style/Widget.Auxio.Button.AppWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/desc_shuffle"
android:src="@drawable/ic_shuffle" />
</android.widget.LinearLayout>
</android.widget.RelativeLayout>
</LinearLayout>

View file

@ -126,11 +126,11 @@
<string name="clr_deep_purple">"Tmavě fialová"</string>
<string name="clr_indigo">"Indigo"</string>
<string name="clr_blue">"Modrá"</string>
<string name="clr_deep_blue">"Světle modrá"</string>
<string name="clr_deep_blue">Tmavě modrá</string>
<string name="clr_cyan">"Azurová"</string>
<string name="clr_teal">"Čajová"</string>
<string name="clr_green">"Zelená"</string>
<string name="clr_deep_green">"Světle zelená"</string>
<string name="clr_deep_green">Tmavě zelená</string>
<string name="clr_lime">"Limetková"</string>
<string name="clr_yellow">"Žlutá"</string>
<string name="clr_orange">"Oranžová"</string>

View file

@ -58,7 +58,7 @@
<string name="set_theme_auto">Automatisch</string>
<string name="set_theme_day">Hell</string>
<string name="set_theme_night">Dunkel</string>
<string name="set_accent">Akzentfarbe</string>
<string name="set_accent">Farbgestaltung</string>
<string name="set_display">Anzeige</string>
<string name="set_show_covers">Albumcover anzeigen</string>
@ -125,11 +125,11 @@
<string name="clr_deep_purple">Dunkellila</string>
<string name="clr_indigo">Indigoblau</string>
<string name="clr_blue">Blau</string>
<string name="clr_deep_blue">Hellblau</string>
<string name="clr_deep_blue">Dunkelblau</string>
<string name="clr_cyan">Cyan</string>
<string name="clr_teal">Blaugrün</string>
<string name="clr_green">Grün</string>
<string name="clr_deep_green">Hellgrün</string>
<string name="clr_deep_green">Dunkelgrün</string>
<string name="clr_lime">Lindgrün</string>
<string name="clr_yellow">Gelb</string>
<string name="clr_orange">Orange</string>

View file

@ -129,11 +129,11 @@
<string name="clr_deep_purple">Púrpura Profundo</string>
<string name="clr_indigo">Índigo</string>
<string name="clr_blue">Azul</string>
<string name="clr_deep_blue">Azul Claro</string>
<string name="clr_deep_blue">Azul Profundo</string>
<string name="clr_cyan">Cyan</string>
<string name="clr_teal">Teal</string>
<string name="clr_green">Verde</string>
<string name="clr_deep_green">Verde Claro</string>
<string name="clr_deep_green">Verde Profundo</string>
<string name="clr_lime">Lima</string>
<string name="clr_yellow">Amarillo</string>
<string name="clr_orange">Naranja</string>

View file

@ -127,10 +127,10 @@
<string name="clr_deep_purple">Donkerpaars</string>
<string name="clr_indigo">Indigoblauw</string>
<string name="clr_blue">Blauw</string>
<string name="clr_deep_blue">Lichtblauw</string>
<string name="clr_deep_blue">Donkerblauw</string>
<string name="clr_teal">Blauwgroen</string>
<string name="clr_green">Groen</string>
<string name="clr_deep_green">Lichtgroen</string>
<string name="clr_deep_green">Donkergroen</string>
<string name="clr_cyan">Cyaan</string>
<string name="clr_lime">Geelgroen</string>
<string name="clr_yellow">Geel</string>