Widgets with Glance: Blending in 관련

Android > Article(s)

---

Article(s)

---

Widgets with Glance: Blending in

Use dynamic colors from your wallpaper in your Widget GlanceTheme

Use dynamic colors from your wallpaper in your Widget GlanceTheme

If you have gone to the effort (proadnroiddev) to provide themed 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)

Widgets with Glance: Standing out

Detect wallpaper colors so transparent widgets do not get lost in the background

. . .

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.

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:

@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.

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 (KatieBarnett/MotivateMe):

KatieBarnett/MotivateMe

Sample app for Widget Fever: A Hands-On Workshop with Jetpack Compose Glance & Gemini

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 (proandroiddev)

Widgets with Glance: Standing out

Detect wallpaper colors so transparent widgets do not get lost in the background

Info

this article is previously published on proandroiddev.com

Widgets with Glance: Blending in

Use dynamic colors from your wallpaper in your Widget GlanceTheme

Widgets with Glance: Blending in

---

Use dynamic colors from your wallpaper in your Widget GlanceTheme