Every developer must have come across the situations when their app icon looks weird sitting inside a colored rectangle or any other shape. Many companies don’t ship their phone with stock Android and have their own custom OS built on the top of Android. They generally keep your app icon inside a rectangle or rounded-rectangle to match it with their theme. This fixed shape gives a negative impact on the branding of your app. Well, the solution is using adaptive icons for your app. Today, in this article I am going to show you how to make your apps use an Adaptive icon.
What is an adaptive icon?
Adaptive icons display different shapes across different device models. An adaptive icon consists of a foreground and a background layer. The main element of your icon should be used as a foreground layer and the secondary element (generally background color) should be used as a background layer. The background layer changes shape as needed on the different OEM devices and helps in keeping your app branding consistent.
According to Google,
An adaptive launcher icon can display a circular shape on one OEM device, and display a squircle on another device. Each device OEM provides a mask, which the system then uses to render all adaptive icons with the same shape. Adaptive launcher icons are also used in shortcuts, the Settings app, sharing dialogs, and the overview screen.
Adaptive icon works with Android 8.0 (API level 26) and above. And if your app is installed on a phone having API level below 26, it will show a legacy icon.
Before starting, make sure you have updated the Android studio to 3.0 or above.
Configure Image Asset
Open the project, right-click on res folder, and then select New > Image Asset. A dialog box will open as shown below.
Make sure that Launcher Icons is selected as Icon Type. There are three tabs – Foreground layer, Background layer, and Legacy. You can also see how our app icon will appear on different OEM devices and on Google Play Store.
I have two images for background and foreground. You can also use Clip Art or directly create text if you don’t have any foreground. For background, you can use either an Image or a plain color.
Foreground Layer
We will be using images for both background and foreground. Now, select Foreground Layer tab, select image as an asset type. Now click on the three dots for selecting the foreground image. Once your foreground image is selected, you can see how the foreground will appear on different screens. Select No for trim and resize the foreground so that it fits perfect inside Circle, Squircle, Rounded Square and Square. The thin black line shows the safe area and you should prefer placing the foreground inside this area so that it never gets cut.
Background Layer
Now, select the Background Layer tab, select image as an asset type and then click on three dots for selecting the background image. On selecting the background image, the preview tab will show you how the final adaptive icon will look on different OEM devices. Again, select No for trim and adjust the background as per your needs.
Legacy Icons
Now, select the Legacy tab which will be used for showing icons on devices having an API level less than 26. In the Legacy Icon section, select Yes for Generate and select the shape of the icon you want to be displayed on devices having an API level less than 25. I have selected Circle for this.
In the Round Icon section, select Yes if you want the icon shape to be round in devices having API level 25 (Lollipop). Such devices will show a round icon if the launcher supports it and you have selected Yes option here. Otherwise, it will use the same shape as that of the legacy icon. Finally, in the Google Play Store Icon section, select Yes if you want to generate the icon for Play Store from here and select the shape of the icon you want to be displayed.
Now, click Next and you will be shown the warning that existing icon files will be overwritten, click on Finish. That’s it. You have added Adaptive Icons support to your app.
If you have any issues or face any difficulty, write it in the comments section and I will be happy to help.
Also, we recently launched the Bulk Image Compressor Android app that can quickly compress multiple images at once. The app is free to use. Do give it a try and let us know your feedback and suggestions.
