Widgets with Glance: Blending in
Widgets with Glance: Blending in 관련
Use dynamic colors from your wallpaper in your Widget GlanceTheme
If you have gone to the effort (proadnroiddev)to providethemed app icons (proadnroiddev)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.
Tips
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 (proadnroiddev)
. . .
If you haven’t looked intoGlance theming, it is pretty easy to set up. It is just the same asMaterial Design 3theming 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 schemelightSchemeanddarkSchemeprovided asColorProviders(usingandroidx.glance:glance-material3) toGlanceThemewhich will set the custom color scheme for the widget.
To use this, wrap the content by theGlanceThemeand 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) withAndroid 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 yourGlanceThemedefinition to useGlanceTheme.colorsfor 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() }
)
}
For 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 usingGlanceTheme.colors.backgroundfor the background andGlanceTheme.colors.onBackgroundfor the foreground text and icon. If you want to match the themed app icons for your widget then useGlanceTheme.colors.widgetBackgroundfor the background andGlanceTheme.colors.primary for the foreground.
To see a full example, see mysample widget app (KatieBarnett/MotivateMe):
Do you want your widget to stand out from the background with custom colours depending on the wallpaper? Check out my other articleWidgets with Glance: Standing out (proandroiddev)
Info
this article is previously published on proandroiddev.com
