Using launcher and themed icons in Android studio, the manual way
Tags: android, androidstudio, themedicons, design
Published: 2023-12-23 19:41:42

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](https://www.flaticon.com/free-icon/swimming_5200536?related_id=5200536), i like swimming, so the icons choosen.

![Swimming free icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8z9y2q9c7qbu42pai0mn.png)

[Flaticon](https://www.flaticon.com/) is the largest free database of editable icons with over 7 million resources available.


## Themed icons

![Adaptive icons inheriting from the user's wallpaper and themes.](https://developer.android.com/static/guide/practices/ui_guidelines/images/adaptive-icon-themed-icons.png)

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.

![Launcher and monochrome icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t6kfpua41ukjgebw1p5.png)

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_.

![Opening image asset generator in android studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0koltwmu70cg77zea0cr.png)

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.


![Image asset configuration for monochrome icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyrilrxidufymgm5mw0y.png)

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

![Confirming icon path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80qd1tf12hv06h9j27xf.png)

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.

![Renaming the generated 'ic_launcher_foreground' webp files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg31c0e143oroglyuz2y.png)

![Changing name to 'ic_launcher_foreground' webp files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6bwdv27dcn23n3dff1v.png)

After renamimg, the files are shown like this:

![Displaying ic_launcher_monochrome files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/you0kbismsulxwfi3u37.png)

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

![Image asset configuration for colored icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qwge2gf4jl639kama6k.png)

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

![Monochrome and normal foreground layers for adaptive icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3huaavcmo2vtnim7yapt.png)

### 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
<?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
<?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.

![Split view for ic_launcher.xml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdsvfzj9ed3ascsajzbf.png)

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.

![Changing display for adaptive icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78z5vyfkwlg1lejwljyv.png)

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

![Themed icon preview with dynamic, not-night mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tfzw8eca39s1vbkfziz.png)

![Themed icon preview with dynamic, night mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8x4gbqz3y56typ4xtsn0.png)


## 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.

![Displaying launcher icon (normal -> themed)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0h8ad5mfpbccfw9568c.png)

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](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive)