Search code examples
androidmaterial-designandroid-themeandroid-appwidgetandroid-12

How to achieve Google's Android 12 app widgets backgrounds?

Android 12 came with the new app widget feature "device theming" using the system's default theme @android:style/Theme.DeviceDefault.DayNight.

Seeing a screenshot like the one below in the documentation I was expecting to see more of the theme colours to be picked up in my own widget:

App widget from Android documentation

Compared to both the screenshot above and Google's app widgets like the ones for the weather and Gmail I can hardly measure any colours being picked up.

I also tried out Material Design 3's way of doing it via Theme.Material3.DynamicColors.DayNight with the same result. The screenshot below shows the Material design example app widget vs Google's weather widget - running on an Android 12 Pixel 5 device.

Material Design 3 vs Google

What is that Google's app widgets do differently to pick up so much more colour from the device theme?

Solution

  • I got word about the system_accent1_* colours and the blog post https://medium.com/@xch3dx/using-material-you-in-your-app-15ec982eecb4 .

    Using <item name="android:backgroundTint">@android:color/system_accent1_50</item> I finally got the same background colour as Google has for their widgets.

    Still raining in Bergen, but at least the background colour is the same