Skip to content

WidgetCraftGet the app

Material You · Battery · 2 × 2 widget

Material You battery widget

By the WidgetCraft team · Updated November 13, 2026

A Material You battery widget shows your charge level as a ring with the percentage in the middle. Android 12-style tonal colors, large rounded shapes and friendly type. This page gives the exact colors, type settings and layers, with a preview drawn from the same values.

Material You battery widget design preview: Android 12-style tonal colors, large rounded shapes and friendly type. — Design preview drawn from the recipe below. Example values are shown; your widget uses live data.

What a Material You battery widget shows

A battery widget turns one number into a shape you can read without thinking. A ring that fills clockwise is the clearest form, with the percentage inside it.

Battery level is a free, built-in source in WidgetCraft and needs no permission. The widget refreshes when the charge changes or the charger is connected.

How the Material You style shapes it

Material You is the design language Google introduced with Android 12. Widgets use soft tonal colors drawn from the wallpaper, very round corners and big readable numbers. This recipe recreates the look with fixed colors you choose.

Bars and rings: Use thick pill bars and full circles in the primary color on a lighter container.
Numbers: Make numbers large and rounded in the on-surface color.

Material You battery widget recipe

Layer	Settings
Canvas	200 × 200, background #E8DEF8, corner radius 28
Ring	diameter 120, stroke 12, track #625B71 at 28% opacity, progress #6750A4, round ends, start at top
Battery	level as a number, Google Sans or Roboto, size 44, color #1D192B, centered in the ring
Text	"percent" at size 10 and "Battery" at size 11, color #625B71
Ornament	a large circle in the darker container tone, tucked into the bottom right corner
Font	Google Sans or Roboto (import the font file), or the built-in Sans
Home screen size	2 × 2 cells

Material You color palette

Tonal lavender #E8DEF8Background
Primary container #D0BCFFSurface and tracks
On-surface #1D192BText
Outline grey #625B71Labels
Primary purple #6750A4Accent

How to make a Material You battery widget in WidgetCraft

Create a widget and open Canvas. Set the size to 200 × 200, the background to #E8DEF8 and the corner radius to 28.
Tap Add and choose Ring. Set the diameter to 120 and the stroke to 12.
Open Data for the ring and connect it to Battery level with a range of 0 to 100.
Color the progress #6750A4 and the track #625B71 at about 28% opacity.
Add a Battery layer in the center at size 44 in #1D192B, then a small Text label underneath.
Add the Material You ornament with Shape layers and move them below the other layers in Layers: a large circle in the darker container tone, tucked into the bottom right corner.
Tap Save, then Add to home screen and resize the widget on your launcher if needed.

Everything in this recipe works in the free version.

Tips for Material You battery widgets

Take background, container and text from one hue at different lightness.
Use 28 points of corner radius.
Start the ring at the top and fill clockwise; other start points are harder to read.
Keep the track visible at low opacity so an almost-empty ring still looks like a ring.
A battery widget shows the phone only. Earbuds and watches need their maker's own widget.
Do not mix unrelated hues.
Do not use hairline borders.

Questions about the Material You battery widget

What size is a Material You battery widget?

It is designed for 2 × 2 home screen cells on a 200 × 200 canvas. You can resize it on the launcher and the design scales in proportion.

Which colors does it use?

Tonal lavender (#E8DEF8) for the background, On-surface (#1D192B) for the main text, Outline grey (#625B71) for labels and Primary purple (#6750A4) as the accent.

Is it free to make?

Yes. Battery widgets use free features in WidgetCraft, and the Material You styling is free too.

What else is this style called?

People also search for material 3 battery widget, android 12 style battery widget, pixel style battery widget, google style battery widget. They describe the same look as this Material You battery widget.

More Material You widgets

Battery widgets in other styles