DEV Community

Sebastián Farías
Sebastián Farías

Posted on • Updated on

How to create adaptive icons for Android using Android Studio

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

Example: Old app icons

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

Foreground icon image

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

Foreground layer configuration

Background layer configuarion

Background layer configuarion

Last screen and creation of assets

Last screen and creation of assets

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

    <application
        ...
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        ...>
    </application>
Enter fullscreen mode Exit fullscreen mode

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

Example: Android 9, API 28 stock launcher

Example: Android 7.0, API 24, Smart Launcher

Example: Android 7.0, API 24, Smart Launcher

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

🙂

Top comments (17)

Collapse
 
benjergizerbunny profile image
Benji

For some reason when I try:

  1. Select the app folder
  2. Go to File → New → Image Asset

I don't have the option for Image Asset under File → New. I've also tried selecting the res folder and right clicking on the app & res folders in Android Studio and selecting "New" which also doesn't have the option for a new Image Asset.

I'm on Android Studio 3.1.3 and I'm using React Native 0.61.5.

Does anyone have any suggestions?

Collapse
 
trey96 profile image
Trey96 • Edited

I had that same issue on a cordova project, turns out I had to build the project first. After I built it in Android Studio everything worked

Collapse
 
rez4s4 profile image
rez4s4

Hi,you should go in resource manager in the left side of Android studio and choose image asset.if you have any questions im here.

Collapse
 
bitttttten profile image
bitten

This is a great guide! Thanks!

My icon has a gradient background, and now the splash screen looks a bit awkward since it has a solid colour and then the icon with a gradient. It's not as seamless. Is it possible to disable the background of the icon on the splash screen? Or do you recommend a different approach?

Collapse
 
sfarias051 profile image
Sebastián Farías

Maybe. you can try to create a Splash Screen with the gradient background in that case.

Collapse
 
mostafasolimanmo profile image
Mostafa Soliman

Nice, thank you

Collapse
 
kiyansadegh profile image
kiyan

Many thanks Sebastian.. very helpful

Collapse
 
nildes profile image
Jordão Frazão

Great, thank you!

Collapse
 
mitchgreene profile image
mitchGreene

Nice, thank you for the concise tutorial.

Collapse
 
sfarias051 profile image
Sebastián Farías

Glad you like it

Collapse
 
voidjuneau profile image
Juneau Lim

Oh my god, you rescued my day. Thank you so much!

Collapse
 
jchallett profile image
John Hallett

Just wanted to say thank you very much. This helped me a lot.

Collapse
 
johnyhawkahsan profile image
johnyhawkahsan

Wowww, Thank you soooo much!

Collapse
 
eumeanor profile image
Emmanuel Umeanor

Worked like magic...Thank you very much

Collapse
 
sfarias051 profile image
Sebastián Farías

👍🏼

Some comments may only be visible to logged-in visitors. Sign in to view all comments.