Using launcher and themed icons in Android studio, the manual way

As per android official documentation: An adaptive icon can display differently depending on individual device capabilities and user theming. Adaptive icons are primarily used by the launcher on the home screen, but they can also be used in shortcuts, the Settings app, sharing dialogs, and the overview screen.

In this short article, you can see a way to create and use adaptive icons using png or webp images, this also can be done using svg files, remember that for svg files you have to use a dedicated tool for designing the images.

Finding the images

You can use images from the internet for making the launcher icon for your android apps, in most cases, you can grab one from a external site, but, when using the file you must credit to its author.

The images we'll be using are found in the Flaticon website, i like swimming, so the icons choosen.

Flaticon is the largest free database of editable icons with over 7 million resources available.

Themed icons

With Android 13 (API level 33) or above, users can theme their adaptive icons, the feature can be enabled via device system settings.

For the exercise, i selected the icons provided for the normal launcher icon and the themed icon.

The icons used has to have equal size (512px in this case), both the launcher and the themed/monochrome icon has to be with transparent background.

Add adaptive icons in android studio

In this section, we go to android studio, we can choose to create a new project or use an existing one, just keep in mind that if the following actions are applied, it is recommended to keep in mind that when creating the adaptive icons they replace the existing icons (it is assumed there is version control applied in these cases).

Once in the IDE, check the res folder, right-click on it and select the option New > Image asset.

Once the image asset configuration dialog appears, we can select the image for the icon in the foreground layer tab, for this part we select the monochrome icon that we chose earlier, also, we set the scaling for the icon to be trimmed and to have a zoom of 60%.

Later, in the background layer tab, we select the source asset type to color, and set the color using the hex color #FFFBFE, additional settings remain as the default in the dialog.

After configured the icon, we do click Next, for reviewing the icon files to be generated.

In this screen, we can see that the images are stored in the mipmap folders for each available app density, also, the images generated using the filenames ic_launcher.xml, ic_launcher_round.webp and ic_launcher_foreground.webp.

At this point, we are going to use the ic_launcher_foreground.webp files, because those icons represent the monochrome foreground layer for the themed icon.

The following step is to rename the ic_launcher_foreground.webp files to ic_launcher_monochrome.webp. for this, we can use the menu Refactor > Rename (Mayus + F6) option.

After renamimg, the files are shown like this:

Now, we repeat the steps for adding a launcher icon, this time, adding the normal icon we choosed.

As result, we have both the monochrome and the colored foreground layer for the adaptive icon.

Now, check the results for the adaptive icon display

Now that we have ready the launcher icon using the normal colored image we used, this time we check the launcher.xml files, which contains the setting for the foreground layer and the background layer for the adaptive icon.

In the exercise, we made both the not-round and the round launcher icon based on the configuration we used before for creating the launcher icons, so, we check both xml files:

{root project folder}/app/src/main/res/mipmap-anydpi-v26
res/mipmap-anydpi-v26/
 ic_launcher.xml
 ic_launcher_round.xml

Both files have the following xml content for the adaptive icon configuration, in which is used the <adaptive-icon> element to define the foreground, background, and monochromatic layer drawables for the icons:

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
  <background android:drawable="@color/ic_launcher_background"/>
  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

For the monochrome we add the <monochrome> drawable xml element after the foreground xml element.

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
  <background android:drawable="@color/ic_launcher_background"/>
  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
  <monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>

With that, the themed adaptive icon is configured. Now, let's check the result visually, for that, open the ic_launcher.xml file and ensure to have clicked the split option for viewing both the code and the design result.

In the upper right side of the split view, we can see the icon with a representation for dark/night mode, when we click that option, we can see the options for selecting the theme mode (night/not-night) and the dynamic color theme.

At this point, we can change the mode and the dynamic color for display the themed icon variant.

Preview in devices

After creating the launcher icon and the themed / monochrome variant, we can test the icon displayed in the device or the emulator, for that, just build and test the android app, for the device, try to use a device/emulator using android version 13 or above.

From left to right:

1. Displayed normal launcher icon in the home screen
2. Wallpaper and style system configuration, here, select themed icons
3. Displayed themed launcher icon in the home screen

Conclusion

With this exercise it was possible to perform a manual configuration of the launcher icon for an Android application using the adaptive icon concept.

Although it can also be done using SVG files, as recommended by Google's Android developers, in cases where you have png image files, this way can be very useful when creating these launcher icons.

Adaptive icons not only apply to launchers, they can also be applied to notification icons and shortcut icons, but the content of this article covers launcher icons.

...

Thank you for taking the time to read my article, it has been a while since I last wrote any long text in these parts. If you find something isn't quite right or have other information to add, feel free to add a respectful comment.
If you like this article, please click the clap icon or share it on social media (or both).

I Hope that you find this informative and useful and in some time you can use these steps in your android apps.

Thanks for reading, Happy coding!! 😊

...

Further reading

• Use launcher adaptive icons, Official Android documentation

Comments

[Max]

Hi,
Is there a way to create multiple image assets in one go?
Creating assets one by one is frustating :)
Thanks.

[Marlon López]

mm, you can check the Adaptive icons information in the official android documentation.