Android 12 — A radical UI overhaul

Broader color palette, customizable widgets, splash screen

Published in

Bobble Engineering

3 min readJun 7, 2021

The Google I/O 2021 event unveiled the first official look at the upcoming version of Android and some of the most important design changes that Android developers need to know.

According to Google, Android 12 brings the biggest visual overhaul to the operating system since 2014 (Android Lollipop). Let's take a deep dive into Material You (yes that’s what they are calling it)

Color Palette

Every Android Device comes with a basic set of color schemes, and app developers can use the device default i.e. Dark theme and Light theme

Theme.DeviceDefault.DayNight

Android 12 expands on this color palette considerably and it is used throughout the system, the lock screen, home screen, notifications, and settings. The more exciting thing is that this palette will be selected automatically based on the user’s wallpaper. Meaning, you can truly customize the look and feel of the UI just by changing the wallpaper!

As a developer, you can go beyond the Theme.DeviceDefault and use this entire palette as a part of a public API.

This palette comes with five colors, two neutrals, and three accent colors all based on the Material color numbering scheme.

New Splash Screen API

One of the jankiest things about the Android experience can be app cold start, when the system doesn’t already have a screenshot of your app's current state and when you go to launch the app you see a blank activity loading all the resources.

Google is adding a new splash screen with an animation of the app icon while the app is loading the main layout in the background. And, every app gets this new splash screen by default.

Also, you can customize this splash screen and make it truly yours by getting its instance by calling Activity.getSplashScreen()

Some of the attribute you can use:

windowSplashScreenBackground is used to fill the background of the screen.
windowSplashScreenAnimatableIcon is used to replace the app logo displayed on the splash screen with another animated drawable.
windowSplashScreenAnimationDuration is used to set the timeout before a splash screen disappears.

You can also customize the transition or dismissal of the splash screen by calling the setOnExitAnimationListener on the splash screen instance.

Always call splashScreenView.remove() to end the custom splash screen animation in Android 12.

For more details, check out the SplashScreen API documentation.

Improved Widgets API

Widgets on Android have been needing a refresh forever and they are finally doing it.
Widgets now will follow all the principles from the Material You System. So, Google is going to be updating a bunch of their widgets and all the 3rd party developers are encouraged to update their widgets to follow the same.

In Android 12, widgets have a bunch of changes. Let’s look at them one at a time.

Rounded corners

The widgets will be contained in rounded corners that you can look up using the system_app_widget_background_radius dimension attribute.

It’s also worth noting that subviews in a widget will have a separate corner radius: system_app_widget_inner_radius. So, one needs to ensure that the widget view backgrounds/layouts are croppable.

Layout attributes

The Widgets API brings a few more attributes that are helpful in sizing the widgets in Android 12:

targetCellWidth and targetCellHeight define the exact width and height of the widget host in the launcher grid.
maxResizeWidth and maxResizeHeight define the maximum size of the widget in case resizing is allowed.

You can define up to three different sizing layouts for the widget in your RemoteViews.

For an in-depth look at widgets in Android 12, check out this official repository.