WidgetCraftGet the appMaterial You · Home screen setup
Material You home screen setup
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. This setup uses three widgets, one wallpaper and one palette so the whole screen reads as a single design.
The three Material You widgets
- Material You clock widget (4 × 2): shows the time in large numerals with the day and date beneath.
- Material You battery widget (2 × 2): shows your charge level as a ring with the percentage in the middle.
- Material You calendar widget (4 × 2): shows today's date beside your next event.
Place them top to bottom in that order and leave the row above the dock empty so the wallpaper has room.
Clock widget settings
A digital clock is the widget most people place first. It needs to be readable from arm's length, so the time takes most of the space and the date sits quietly below it.
- Canvas: 360 × 180, background #E8DEF8, corner radius 28
- Layout: header: weekday on the left and date on the right in one row at the top, a hairline under it, and the time anchored to the bottom left at size 83
- Text or Date: weekday, Google Sans or Roboto, size 12, color #625B71
- Numbers: Make numbers large and rounded in the on-surface color.
Free to build. Full recipe and steps.
Battery widget settings
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.
- 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
- Bars and rings: Use thick pill bars and full circles in the primary color on a lighter container.
Free to build. Full recipe and steps.
Calendar widget settings
A calendar widget answers two questions: what day is it, and what is next. The date sits in a bold block on the left and the next event takes the right side.
- Canvas: 360 × 180, background #E8DEF8, corner radius 28
- Shape: date block 104 × 124, radius 20, fill #6750A4
- Date: weekday (size 13) and day number (size 58) centered on the block, color #FFFFFF
- Numbers: Make numbers large and rounded in the on-surface color.
Styling is free; the live data needs Pro. Full recipe and steps.
How to set up a Material You home screen
- Set the wallpaper first, so you can judge every color against it.
- Build the clock widget and add it to the home screen at 4 × 2.
- Duplicate its canvas settings for the battery and calendar widgets so the background, radius and outline match exactly.
- Place all three, then adjust margins until the left edges line up.
- Change the icons last, and remove any app you do not use daily from the page.
Material You wallpaper ideas
Any wallpaper; pick your widget hue from its dominant color, as Android does.
Material You icons and dock
Turn on themed icons in your launcher so icons share the tone.
Material You home screen colors
- Tonal lavender
#E8DEF8Background - Primary container
#D0BCFFSurface and tracks - On-surface
#1D192BText - Outline grey
#625B71Labels - Primary purple
#6750A4Accent
Fonts for a Material You home screen
Use Google Sans or Roboto (import the font file), or the built-in Sans at weight 500. Corner radius is 28 on every widget so the shapes match.
Do and avoid
- Take background, container and text from one hue at different lightness.
- Use 28 points of corner radius.
- Do not mix unrelated hues.
- Do not use hairline borders.