ylliX - Online Advertising Network
Widgets with Glance: Blending in

Widgets with Glance: Blending in


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.

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.

Just a little widget to motivate your every day.

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.

This is what sets the colors for your themed app icons!

To use this color theme, just update your GlanceTheme definition to use GlanceTheme.colors for supported versions of Android:

For non supported devices, the app branding will be used. Now the widget blends nicely with the background without the jarring purple theming.

Not quite camouflage, but better.

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.

From standing out to blending in. Perfect!

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



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *