Gummicube - An airship company
MENU

Android Adds Adaptive Icons

July 19th, 2018

Android Adds Adaptive Icons
David Quinn

by David Quinn

VP of Strategy & Partnerships at Gummicube, Inc.

Google has revealed a new tool for app creatives, allowing for adaptive launcher icons. With this, developers can set up their apps’ icons to display as square or circular images, better matching the device it’s being viewed on. Additionally, adaptive icons allows for new visual effects to capture users’ attention. By utilizing a foreground and background layer, it enables movement on the icon image. The adaptive icons will be available on all devices running Android Oreo, according to the device's settings.

What is it?

Adaptive icons are introduced with Android Oreo (8.0) and is made to let icons be displayed in a variety of shapes across device models. The idea behind the tool is simple: when developers make an icon for their app, they can control its look to take different shapes depending on the device being used. In addition to the ability to adjust the icon’s shape through a variety of masks, it can use two layers to add animated visuals.

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

Developers can create adaptive icons by setting up two layers and a mask. One layer serves as the background on the icon, the other as the logo. By using two separate layers, icons can use minor animations and effects, such as making the logo move about the background when the device tilts to a side or bounce when selected. The mask is provided by the device the app is displayed on and cuts a shape around the background layer while maintaining the logo’s placement. This turns each icon into the shape the device uses, creating a uniform design across the device. Icon layers must be sized with the new guidelines in mind, which replace the previous 48 x 48 dp standard:

  • Each layer must be 108 x 108 dp
  • The icon itself must be sized at 72 x 72 dp and placed within the masked viewport
  • The outer 18 dp on each side of the icon is used to create visual effects

Developers can also create adaptive icons with Android Studio and in XML. Adaptive icons are also used in shortcuts, settings, sharing dialogs and the overview screen.

What Does This Mean?

First and foremost, developers looking to utilize adaptive icons must design new icons. Icons not updated with the proper layers run the risk of looking inconsistent with others, in addition to lacking visual effects. It’s important to keep the main focal point of the icon viewable in every format, as it is the first thing a user sees when browsing the Google Play Store and makes an important first impression. They’re vital to an app’s click through rate (CTR), so app design best practices must be taken into consideration. Keep in mind that icons displayed on the Google Play Store will still be the same shape. The adaptive icons are displayed on the device after installation. However, with the adaptive icons enhancements, developers will be able to transform their icons with animated effects while keeping the formatting uniform for the devices they’re displayed on. Developers who prepare their icons now may find the added effects will help keep their users active in the days to come.

Similar Articles

App Store Holiday Schedule 2020

App Store Holiday Schedule 2020

Posted on November 23rd, 2020

When is the App Store Holiday Schedule 2020? Learn about the dates of this year's shutdown and how to prepare.