How to create adaptive icons for Android using Android Studio
Tags: android, design
Published: 2018-09-19 12:41:44

---
title: How to create adaptive icons for Android using Android Studio
published: true
description: Adaptive icons with Android Studio
tags: android,design
---

I have found myself with an issue on my android applications not been able to use adaptive icons, resulting in ugly app icons and strange shapes in different launchers, so... the solution was create adaptive icons and works perfectly. 🙂 
 
On API's > 26 android implements adaptive icons, is possible that this causes issues on app icon in existing applications, just like the following example.


![Example: Old app icons](https://d2mxuefqeaa7sj.cloudfront.net/s_E5BDCE34FA744C8B9CF5B8D37F689ADCFA70DD76E310D78941E0487F015653CD_1537327485177_Screen+Shot+2018-09-19+at+00.24.20.png "Old app icons") 
<figcaption>Example: Old app icons</figcaption>

To avoid this is necessary to create an adaptive icon. To do so, you need the following assets:

- Image icon without background, example below (foreground)
- Color background


![Foreground icon image](https://d2mxuefqeaa7sj.cloudfront.net/s_4E9831D4455D570AE14137599E816F77C0D9972382FFC988D0AB1312B7DF216A_1537312779083_baseline_directions_bike_black_48.png "Foreground icon image")
<figcaption>Foreground icon image</figcaption>

With this elements you need to follow these steps to generate the icon with the Image Asset Studio.

1. Open the project in Android Studio
2. Select the app folder
3. Go to  File → New → Image Asset
4. On "Foreground Layer" select the provided image and resize in order to get the proper aspect for the icon
5. On “Background Layer" use the background provided
6. Click on Next button and then Finish
7. After that, the icons are created on the "mipmap-* * * *" folder


![Foreground layer configuration](https://d2mxuefqeaa7sj.cloudfront.net/s_4E9831D4455D570AE14137599E816F77C0D9972382FFC988D0AB1312B7DF216A_1537313441920_Screen+Shot+2018-09-18+at+20.26.25.png "Foreground layer configuration")
<figcaption>Foreground layer configuration</figcaption>



![Background layer configuarion](https://d2mxuefqeaa7sj.cloudfront.net/s_4E9831D4455D570AE14137599E816F77C0D9972382FFC988D0AB1312B7DF216A_1537313451765_Screen+Shot+2018-09-18+at+20.30.07.png "Background layer configuarion")
<figcaption>Background layer configuarion</figcaption>



![Last screen and creation of assets](https://d2mxuefqeaa7sj.cloudfront.net/s_4E9831D4455D570AE14137599E816F77C0D9972382FFC988D0AB1312B7DF216A_1537313504996_Screen+Shot+2018-09-18+at+20.31.35.png "Last screen and creation of assets")
<figcaption>Last screen and creation of assets</figcaption>



You need to add the new rounded icons to the respective roundIcon option on the AndroidManifest.xml

```xml
    <application
        ...
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        ...>
    </application>
```

After apply the changes. The app icon will look according to the the guidelines of android for adaptive icons.

![Example: Android 9, API 28 stock launcher](https://d2mxuefqeaa7sj.cloudfront.net/s_E5BDCE34FA744C8B9CF5B8D37F689ADCFA70DD76E310D78941E0487F015653CD_1537327521464_Screen+Shot+2018-09-19+at+00.25.03.png "Example: Android 9, API 28 stock launcher")
<figcaption>Example: Android 9, API 28 stock launcher</figcaption>

![Example: Android 7.0, API 24, Smart Launcher](https://d2mxuefqeaa7sj.cloudfront.net/s_4E9831D4455D570AE14137599E816F77C0D9972382FFC988D0AB1312B7DF216A_1537317665511_Screen+Shot+2018-09-18+at+21.37.22.png "Example: Android 7.0, API 24, Smart Launcher")
<figcaption>Example: Android 7.0, API 24, Smart Launcher</figcaption>
---

>All the info was obtained from the official android information 
><https://developer.android.com/>
><https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive>
><https://developer.android.com/studio/write/image-asset-studio#create-adaptive>

🙂