Fabio/Auxio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: rework dynamic colors

Browse source 
Allow the material library to handle dynamic colors.

Turns out I was mis-understanding how DynamicColor themes were meant to
be used by the material library. Turns out you can just inherit from it
and it will work perfectly fine. Refactor the V31 styles to remove our
insane shims and finally fix the slapdash dynamic color usage across
the main theme and widgets.
This commit is contained in:
OxygenCobalt 2022-02-21 16:57:03 -07:00
parent 9304e58190
commit 6fc3c9374c
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
10 changed files with 30 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -2,8 +2,12 @@
## dev [v2.2.2 or 2.3.0]
#### What's Improved
- Shuffle and Repeat mode buttons now have more contrast when they are turned on
#### Dev/Meta
- Enabled elevation drop shadows below Android P for consistency
- Reworked dynamic color usage
## v2.2.1
#### What's Improved

8
app/src/main/java/org/oxycblt/auxio/playback/PlaybackButton.kt
View file

@ -41,14 +41,16 @@ class PlaybackButton @JvmOverloads constructor(
scaleType = ScaleType.MATRIX
setBackgroundResource(R.drawable.ui_large_unbounded_ripple)
context.obtainStyledAttributes(attrs, R.styleable.PlaybackButton).use { arr ->
val hasIndicator = arr.getBoolean(R.styleable.PlaybackButton_hasIndicator, false)
val styledAttrs = context.obtainStyledAttributes(attrs, R.styleable.PlaybackButton)
val hasIndicator = styledAttrs.getBoolean(R.styleable.PlaybackButton_hasIndicator, false)
indicatorDrawable = if (hasIndicator) {
context.getDrawableSafe(R.drawable.ui_indicator)
} else {
null
}
}
styledAttrs.recycle()
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

2
app/src/main/res/drawable/ic_remote_loop_off.xml
View file

@ -6,6 +6,6 @@
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#80ffffff"
android:fillColor="#A0ffffff"
android:pathData="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" />
</vector>

2
app/src/main/res/drawable/ic_remote_shuffle_off.xml
View file

@ -6,6 +6,6 @@
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#80FFFFFF"
android:fillColor="#A0FFFFFF"
android:pathData="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm0.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z" />
</vector>

91
app/src/main/res/values-night-v31/styles_core.xml
View file

@ -1,91 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
tools:ignore="PrivateResource">>
<!-- Android 12 configuration -->
<style name="Theme.Auxio.V31" parent="Theme.Auxio.V27">
<!--
Theme.Material3.DayNight doesn't actually apply dynamic colors by default.
You instead have two options for applying them:
1. Using DynamicColors in Activity.onCreate
2. Applying on of the theme overlays
Neither of these work for Auxio, because they override workarounds for android insanity
and generally lead to inexplicable issues. Instead we have to manually copy and paste the
theme values into our own custom theme.
-->
<!-- Color palettes -->
<item name="colorPrimary">@color/m3_sys_color_dynamic_dark_primary</item>
<item name="colorOnPrimary">@color/m3_sys_color_dynamic_dark_on_primary</item>
<item name="colorPrimaryInverse">@color/m3_sys_color_dynamic_dark_inverse_primary</item>
<item name="colorPrimaryContainer">@color/m3_sys_color_dynamic_dark_primary_container</item>
<item name="colorOnPrimaryContainer">@color/m3_sys_color_dynamic_dark_on_primary_container
</item>
<item name="colorSecondary">@color/m3_sys_color_dynamic_dark_secondary</item>
<item name="colorOnSecondary">@color/m3_sys_color_dynamic_dark_on_secondary</item>
<item name="colorSecondaryContainer">@color/m3_sys_color_dynamic_dark_secondary_container
</item>
<item name="colorOnSecondaryContainer">
@color/m3_sys_color_dynamic_dark_on_secondary_container
</item>
<item name="colorTertiary">@color/m3_sys_color_dynamic_dark_tertiary</item>
<item name="colorOnTertiary">@color/m3_sys_color_dynamic_dark_on_tertiary</item>
<item name="colorTertiaryContainer">@color/m3_sys_color_dynamic_dark_tertiary_container
</item>
<item name="colorOnTertiaryContainer">
@color/m3_sys_color_dynamic_dark_on_tertiary_container
</item>
<item name="android:colorBackground">@color/m3_sys_color_dynamic_dark_background</item>
<item name="colorOnBackground">@color/m3_sys_color_dynamic_dark_on_background</item>
<item name="colorSurface">@color/m3_sys_color_dynamic_dark_surface</item>
<item name="colorOnSurface">@color/m3_sys_color_dynamic_dark_on_surface</item>
<item name="colorSurfaceVariant">@color/m3_sys_color_dynamic_dark_surface_variant</item>
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_dark_on_surface_variant
</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_on_surface
</item>
<item name="colorOutline">@color/m3_sys_color_dynamic_dark_outline</item>
<item name="colorError">@color/m3_sys_color_dark_error</item>
<item name="colorOnError">@color/m3_sys_color_dark_on_error</item>
<item name="colorErrorContainer">@color/m3_sys_color_dark_error_container</item>
<item name="colorOnErrorContainer">@color/m3_sys_color_dark_on_error_container</item>
<!-- Default Framework Text Colors. -->
<item name="android:textColorPrimary">@color/m3_dynamic_dark_default_color_primary_text
</item>
<item name="android:textColorPrimaryInverse">@color/m3_dynamic_default_color_primary_text
</item>
<item name="android:textColorSecondary">
@color/m3_dynamic_dark_default_color_secondary_text
</item>
<item name="android:textColorSecondaryInverse">
@color/m3_dynamic_default_color_secondary_text
</item>
<item name="android:textColorTertiary">@color/m3_dynamic_dark_default_color_secondary_text
</item>
<item name="android:textColorTertiaryInverse">
@color/m3_dynamic_default_color_secondary_text
</item>
<item name="android:textColorPrimaryDisableOnly">
@color/m3_dynamic_dark_primary_text_disable_only
</item>
<item name="android:textColorPrimaryInverseDisableOnly">
@color/m3_dynamic_primary_text_disable_only
</item>
<item name="android:textColorHint">@color/m3_dynamic_dark_hint_foreground</item>
<item name="android:textColorHintInverse">@color/m3_dynamic_hint_foreground</item>
<item name="android:textColorAlertDialogListItem">
@color/m3_dynamic_dark_default_color_primary_text
</item>
</style>
<style name="Theme.Widget" parent="@android:style/Theme.DeviceDefault.DayNight">
<item name="colorSurface">@android:color/system_accent2_800</item>
<item name="colorPrimary">?android:attr/colorAccent</item>
<item name="colorSecondary">?android:attr/colorAccent</item>
<item name="colorControlNormal">?android:attr/colorControlNormal</item>
<item name="colorControlHighlight">?android:attr/colorControlHighlight</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_on_surface</item>
</style>
</resources>

4
app/src/main/res/values-night/colors.xml
View file

@ -385,4 +385,8 @@
<color name="grey_on_surface_variant">#C8C8C8</color>
<color name="grey_surface_inverse">#fafafa</color>
<color name="grey_on_surface_inverse">#191919</color>
<color name="widget_surface">@color/material_dynamic_secondary20</color>
<color name="widget_surface_inverse">@color/material_dynamic_neutral90</color>
<color name="widget_on_surface_inverse">@color/material_dynamic_neutral20</color>
</resources>

87
app/src/main/res/values-v31/styles_core.xml
View file

@ -1,91 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
tools:ignore="PrivateResource">
<!-- Android 12 configuration -->
<style name="Theme.Auxio.V31" parent="Theme.Auxio.V27">
<!--
Theme.Material3.DayNight doesn't actually apply dynamic colors by default.
You instead have two options for applying them:
1. Using DynamicColors in Activity.onCreate
2. Applying on of the theme overlays
Neither of these work for Auxio, because they override workarounds for android insanity
and generally lead to inexplicable issues. Instead we have to manually copy and paste the
theme values into our own custom theme.
-->
<!-- Color palettes -->
<item name="colorPrimary">@color/m3_sys_color_dynamic_light_primary</item>
<item name="colorOnPrimary">@color/m3_sys_color_dynamic_light_on_primary</item>
<item name="colorPrimaryInverse">@color/m3_sys_color_dynamic_light_inverse_primary</item>
<item name="colorPrimaryContainer">@color/m3_sys_color_dynamic_light_primary_container
</item>
<item name="colorOnPrimaryContainer">
@color/m3_sys_color_dynamic_light_on_primary_container
</item>
<item name="colorSecondary">@color/m3_sys_color_dynamic_light_secondary</item>
<item name="colorOnSecondary">@color/m3_sys_color_dynamic_light_on_secondary</item>
<item name="colorSecondaryContainer">@color/m3_sys_color_dynamic_light_secondary_container
</item>
<item name="colorOnSecondaryContainer">
@color/m3_sys_color_dynamic_light_on_secondary_container
</item>
<item name="colorTertiary">@color/m3_sys_color_dynamic_light_tertiary</item>
<item name="colorOnTertiary">@color/m3_sys_color_dynamic_light_on_tertiary</item>
<item name="colorTertiaryContainer">@color/m3_sys_color_dynamic_light_tertiary_container
</item>
<item name="colorOnTertiaryContainer">
@color/m3_sys_color_dynamic_light_on_tertiary_container
</item>
<item name="android:colorBackground">@color/m3_sys_color_dynamic_light_background</item>
<item name="colorOnBackground">@color/m3_sys_color_dynamic_light_on_background</item>
<item name="colorSurface">@color/m3_sys_color_dynamic_light_surface</item>
<item name="colorOnSurface">@color/m3_sys_color_dynamic_light_on_surface</item>
<item name="colorSurfaceVariant">@color/m3_sys_color_dynamic_light_surface_variant</item>
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_light_on_surface_variant
</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_on_surface
</item>
<item name="colorOutline">@color/m3_sys_color_dynamic_light_outline</item>
<item name="colorError">@color/m3_sys_color_light_error</item>
<item name="colorOnError">@color/m3_sys_color_light_on_error</item>
<item name="colorErrorContainer">@color/m3_sys_color_light_error_container</item>
<item name="colorOnErrorContainer">@color/m3_sys_color_light_on_error_container</item>
<!-- Default Framework Text Colors. -->
<item name="android:textColorPrimary">@color/m3_dynamic_default_color_primary_text</item>
<item name="android:textColorPrimaryInverse">
@color/m3_dynamic_dark_default_color_primary_text
</item>
<item name="android:textColorSecondary">@color/m3_dynamic_default_color_secondary_text
</item>
<item name="android:textColorSecondaryInverse">
@color/m3_dynamic_dark_default_color_secondary_text
</item>
<item name="android:textColorTertiary">@color/m3_dynamic_default_color_secondary_text</item>
<item name="android:textColorTertiaryInverse">
@color/m3_dynamic_dark_default_color_secondary_text
</item>
<item name="android:textColorPrimaryDisableOnly">
@color/m3_dynamic_primary_text_disable_only
</item>
<item name="android:textColorPrimaryInverseDisableOnly">
@color/m3_dynamic_dark_primary_text_disable_only
</item>
<item name="android:textColorHint">@color/m3_dynamic_hint_foreground</item>
<item name="android:textColorHintInverse">@color/m3_dynamic_dark_hint_foreground</item>
<item name="android:textColorAlertDialogListItem">
@color/m3_dynamic_default_color_primary_text
</item>
</style>
<resources>
<style name="Theme.Widget" parent="@android:style/Theme.DeviceDefault.DayNight">
<item name="colorSurface">@android:color/system_accent1_50</item>
<item name="colorSurface">@color/widget_surface</item>
<item name="colorPrimary">?android:attr/colorAccent</item>
<item name="colorSecondary">?android:attr/colorAccent</item>
<item name="colorControlNormal">?android:attr/colorControlNormal</item>
<item name="colorControlHighlight">?android:attr/colorControlHighlight</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_on_surface</item>
<item name="colorSurfaceInverse">@color/widget_surface_inverse</item>
<item name="colorOnSurfaceInverse">@color/widget_on_surface_inverse</item>
</style>
</resources>

4
app/src/main/res/values/colors.xml
View file

@ -386,4 +386,8 @@
<color name="grey_on_surface_variant">#484848</color>
<color name="grey_surface_inverse">#1f1f1f</color>
<color name="grey_on_surface_inverse">#F0F0F0</color>
<color name="widget_surface">@color/material_dynamic_primary95</color>
<color name="widget_surface_inverse">@color/material_dynamic_neutral80</color>
<color name="widget_on_surface_inverse">@color/material_dynamic_neutral95</color>
</resources>

5
app/src/main/res/values/styles_android.xml
View file

@ -67,11 +67,6 @@
<item name="android:padding">@dimen/spacing_small</item>
</style>
<!-- A variant of PlaybackButton that is intended for buttons that show indicators -->
<style name="Widget.Auxio.PlaybackButton.Indicator.AppWidget" parent="Widget.Auxio.Button.AppWidget.V31">
<item name="android:minHeight">@dimen/size_btn_small</item>
</style>
<!-- Widget panel -->
<style name="Widget.Auxio.AppWidget.Panel" parent="">
<item name="android:layout_height">wrap_content</item>

4
app/src/main/res/values/styles_core.xml
View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Master parent theme -->
<style name="Theme.Auxio" parent="Theme.Material3.DayNight.NoActionBar" />
<style name="Theme.Auxio" parent="Theme.Material3.DynamicColors.DayNight" />
<!-- Template theme that handles edge-to-edge on other styles variants -->
<style name="Theme.Auxio.V27" parent="Theme.Auxio">
<item name="android:statusBarColor">@color/chrome_translucent</item>
@ -22,6 +22,8 @@
<item name="android:colorBackground">?attr/colorSurface</item>
<item name="android:windowBackground">?attr/colorSurface</item>
<item name="android:scrollbars">none</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Work around hard-coded text highlight colors in the default Material3 theme -->
<item name="android:textColorHighlight">@color/overlay_text_highlight</item>