For The Next Big Android Update, Google Wants To 'Crowdfund' An Icon Pack For You

take 21 minutes to read
Home Points Main article

Google wants to "crowdfund" an icon pack for you in the next big Android update

In Android 12, Google introduced a dynamic theme system for Android based on wallpaper coloring through Material You. We just need to change a favorite wallpaper, and the system interface and third-party applications will be changed to a theme with the same color style according to the selected wallpaper, which not only further satisfies users' personalization needs, but also gives Android a more harmonious and unified visual appearance.

In previous versions, theme changes based on wallpaper color picking could affect most system interfaces: from lock screen to system settings, from notification center background to quick settings panel switches, from widgets to toolbars for non-system applications ...... Only desktop icons were not covered.

boxcnuXUo7OJwxtuAODJHxPU4ze

Only Google's own apps in Android 12 Themed icons support is a cool thing, but it's also cool to have "desktop icons that follow the wallpaper and change themes", and the themed icons feature that Google had reserved for its own apps in Android 12 is finally a staple in Android 13.

Shape, Order and Style

Google's design of Android desktop icons has gone through a process from irregular to regular, from emphasizing individual recognition to emphasizing overall visual consistency, and the "watershed" in this process is the introduction of the adaptive icons feature in Android 8.0.

Associated Reading: What's the point of Android O adaptive icons? Google designers give you the answer

Regarding the shaped vs. regular icon debate, Nick Butcher, who is responsible for Android developer relations and is also a Google UI and JetpackCompose engineer, had at the time given an example using his own Plaid app development.

boxcnk5L2vPFa8jsCTnC6yghvWg

Ideal (left) vs. reality (right): everyone's unique, put it together and everyone's not. Ideally, shaped icons make app icons more recognizable and naturally better found when placed alongside other apps in Android's app drawer and on the home screen. But when all the icons on the screen are different shapes and sizes, users' attention is more likely to be distracted by the shape and design details of a particular icon.

boxcn9hxHIFI53yiuPdjKC8zQLg

Adaptive icon cropping illustration for different shapes | Figure. Google In contrast, adaptive icons by retaining the icon body and then cropping the icon shape with a global mask, to some extent, retains the personalized qualities of the application icons, but also makes the overall look and feel of the application drawer and the home screen more harmonious. Different manufacturers can also choose different shapes of masks according to their actual needs to get a more uniform icon style that meets their own brand design needs.

And if the adaptive icons introduced in Android 8.1 dictate the icon shape of Android apps, what Android 13's theme icons dictate is the icon style of Android apps.

In Android 13, the theme icon feature can be experienced when the following conditions are met.

  1. The system has enabled the theme icon function
  2. The application itself is adapted with theme icons
  3. Launcher support for displaying theme icons

In the case of the Google Pixel with Android 13 Beta, simply long-press in a blank space on the Pixel launcher desktop and then find and enable "Icons with themes" in the Wallpapers and Styles settings

If you add Android 13's Material You dynamic color picking egg widget to your desktop, you'll see that theme icons extract A1-100 color values for the icon background and N2-700 color values for the monochrome icon body by default when the dark theme is off. The color values for the icon background are the same as the color values selected for Android 13 lock screen time, quick settings panel switches and other interface elements.

The same wallpaper in the default coloring style, the theme icon when the dark theme is on will select the color values of the icon body and icon background above reverses the color value of A1-100 as the icon body color, while choosing a darker N1-800 as the icon background.

In this way, a set of theme icons that can automatically apply similar color schemes according to wallpaper changes and work with the system dark theme on and off is created.

boxcnIXniL4R1cKGyLll0mD74ad

Theme icons turned on and the effect in dark themes | Figure. How to generate Google theme icons

Starting with Android 13, Google began to officially provide developers with a method for adapting theme icons. The development and adaptation documentation that has been published so far shows that theme icons are related to adaptive icons in a way that goes far beyond design style.

Theme icons are mainly used to achieve the theme effect by applying different Material You dynamic colors to the icon body and icon background. This method of splitting the icon into two and treating the foreground and background separately is almost the same as Adaptive Icon Adaptation Method; as for the design specification, the theme icon also directly follows the size specification of the adaptive icon, for example, the container area size of the theme icon corresponds to the background layer of the adaptive icon, and the logo area corresponds to the unmasked icon content area of the adaptive icons.

boxcnLR2RNxPwVhV4KON7SNXQRf

The container area (1) has a size of 108x108dp. Logo area (2) recommended size is 44x44 dp, maximum size is 72x72 dp | Figure : Google Because of similar specification requirements and to ensure consistent recognition to users when the theme icon feature is off and on, many developers currently choose to generate SVG monochrome application icons directly using existing adaptive icon material as Google does. To adapt, simply provide both the adaptive icon and the monochrome app icon, and point to the monochrome app icon via the `` element in the manifest.

Of course, app icons come in all sorts of shapes and sizes, and not all apps we encounter are as simple or even abstract as Google apps. When it comes to complex and unique app icons, generating monochromatic app icons directly from the original adaptive icon resource can also pose a number of problems.

boxcnoB9QyZLHVQlldcmYDd5e3g

Unprocessed long projection style icons | Photo: Yahor UrbanovichSo Google on the one hand recommends developers to use flat, 2D style icon design, but on the other hand also offers a way to reproduce 3D and layered effects in theme icons: Alpha gradients. Here again, the idea is similar to Google's dark theme design, where monochromatic icons can have light and dark as well as interface elements in dark themes through differences in transparency, and the presence of light and dark relationships can further reflect the hierarchy.

boxcnKMSsTxTfQY6Ea1pPivSWddMaterial Design by brightness to show UI layers in dark themes | Photo: Google here developer Yahor Urbanovich -------) gives a better example to help us understand how theme icons deal with shadows and layers: take the Microsoft Teams icon for example, which has very complex screen elements and layers, and would end up very badly if the theme icons were generated directly by borrowing from adaptive icon resources.

boxcnRrF6lkOgiYCINBaN20oklSIcons for Microsoft Teams boxcnFD2MbwEgUN6iSBC97IL3sbThe "lazy" adaptation effect | Photo: Yahor Urbanovich

When this happens, the developer can simply make the individual element layers in the icon visible again in the theme icon by adding different alpha transparency as appropriate.

boxcnDJu1zOfZ2MM7DTkPfnON4c

Summary of the generated effect after adding transparency: problems and experiences

Android 13 is coming soon, and the theme icons, one of its main features, should be coming to Android devices other than the Google Pixel, such as Samsung One UI 5.0, but objectively speaking, not too many Android users will be able to experience this feature in the end.

Thematic icons rely heavily on adaptive icons, both of which provide plenty of room for device manufacturers to customize as design specifications, but Google has never made them mandatory - adaptive icons have not yet become the "default standard" in the Android ecosystem after five major updates. "Thematic icons, as a stylistic extension of this, still require developers to answer the call to move forward.

That's what we said in the title, that Google wanted to assemble a widely applicable set of rules icon pack starting with adaptive icons, and the introduction of themed icons brings a thousand color styles to this pack. But how many apps this icon pack can actually cover still depends on how many interested developers are willing to participate in the 'crowdfunding'.

From the latest Android 13 Beta experience, it's clear that there are a bit more medium and small volume apps that adapt theme icons. From my own use and collection, there are close to 30 non-Google apps that have been adapted, including those that use the transparency mentioned above to restore the icon element hierarchy (e.g. Skit), and those that use two visual schemes for adaptive and themed icons (e.g. Battery Guru).

boxcn20hM0Qx8Z8Dt6Hf1pScwvb

Android 13 opens the home screen effect of the theme icon but In general, among the few apps that have adapted this feature, not many have achieved the perfect "desktop icon > opening screen animation > app interface" transition effect like Google's clever color fill animation.

boxcnV4ioVErp2EdeAxpFp94glbTheme icons, opening screen animations can actually be interlinked Related reading:A pleasant view beyond the opening screen ad as it should be: Android 12 app launch animations detailed

I've also created a list of apps that have been adapted to theme icons, if you're interested, feel free to download and install the apps mentioned in the list to see the results. If there's something missing from the list, feel free to add it in the comments section of the document. If you don't have a Pixel device but want to test and experience the theme icon feature, you may want to read the DSU Loader that we introduced before.

8 Ways To Make Pictures Clear
« Prev 07-26
Canon EOS R7 & R10 Experience: Flagship Follow Focus And Continuous Shooting, And The New APS-C Camera Rolls Up Terrifically
Next » 07-27