Use dynamic colors from your wallpaper in your Widget GlanceTheme
If you have gone to the effort to provide themed app icons for your Android app, you have allowed the user to have a beautiful and consistent home screen aesthetic. Why should app widgets be any different? With Jetpack Compose Glance, you can easily theme your widgets to use dynamic colors from the wallpaper (when supported) and fit right in with the app icons.
Do you want your widget to stand out from the background with custom colours depending on the wallpaper? Check out my other article Widgets with Glance: Standing out
. . .
If you haven’t looked into Glance theming, it is pretty easy to set up. It is just the same as Material Design 3 theming where you can provide a custom set of colors to style your widget to match your app branding.
| object MotivateMeGlanceColorScheme { | |
| val colors = ColorProviders( | |
| light = lightScheme, | |
| dark = darkScheme | |
| ) | |
| } | |
| @Composable | |
| fun MotivateMeGlanceTheme( | |
| content: @Composable () -> Unit, | |
| ) { | |
| GlanceTheme(colors = MotivateMeGlanceColorScheme.colors) { | |
| content.invoke() | |
| } | |
| } | |
| class QuoteWidget : GlanceAppWidget() { | |
| ... | |
| override suspend fun provideGlance(context: Context, id: GlanceId) { | |
| provideContent { | |
| MotivateMeGlanceTheme() { | |
| WidgetContent() | |
| } | |
| } | |
| } | |
| } |
In this basic set up, we have the app color scheme lightScheme and darkScheme provided as ColorProviders (using androidx.glance:glance-material3) to GlanceTheme which will set the custom color scheme for the widget.
To use this, wrap the content by the GlanceTheme and the widget will use the app branding.
Now, this would look a lot better on this background with coordinating colors rather than the purple app branding which clashes with this particular wallpaper.
For this, we need to use the dynamic system color theming available for some devices (manufacturer depending) with Android 12 and above. If you haven’t yet played with the system theming, you just need to long press on the wallpaper and select ‘Wallpaper & style’. Here you can select a color theme to match your wallpaper or personal preference.
To use this color theme, just update your GlanceTheme definition to use GlanceTheme.colors for supported versions of Android:
| @Composable | |
| fun MotivateMeGlanceTheme( | |
| content: @Composable () -> Unit, | |
| ) { | |
| GlanceTheme( | |
| colors = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) { | |
| GlanceTheme.colors | |
| } else { | |
| MotivateMeGlanceColorScheme.colors | |
| }, | |
| content = { content.invoke() } | |
| ) | |
| } |
Job Offers
OUR VIDEO RECOMMENDATION
Jobs
Marketing Developer, II
APPLY NOWFor non supported devices, the app branding will be used. Now the widget blends nicely with the background without the jarring purple theming.
You may notice that it still doesn’t match the themed app icons. In the example above the background is using GlanceTheme.colors.background for the background and GlanceTheme.colors.onBackground for the foreground text and icon. If you want to match the themed app icons for your widget then use GlanceTheme.colors.widgetBackground for the background and GlanceTheme.colors.primary for the foreground.
To see a full example, see my sample widget app:
Do you want your widget to stand out from the background with custom colours depending on the wallpaper? Check out my other article Widgets with Glance: Standing out
this article is previously published on proandroiddev.com
