Add Adaptive Icons to your Android App

In this article, we will go over how you can use add the “new” adaptive app icons to your Android app. In his article I will be using a React Native project, so the structure of your Android app may vary.

Mask
Mask

Adaptive icons are a new feature introduced in Android 8.0 (API level 26). It allows your app icon to be displayed using multiple shapes across different devices and launchers, more information available here. The main advantage of using adaptive icons is so that we don’t have to have to create multiple icons, i.e. round and square versions of your app icon. You provide two layers, a foreground and the background which is usually just a colour.

To add adaptive icons to your application do the following;

  • Open your application in Android Studio (If it’s a React Native application make sure to open the android folder in Android Studio)
  • Right-click on the app folder
  • File > New > Image Asset
  • On the first tab “Foreground Layer” click on path and select your icon (resize the icon as required)
  • Select the second tab “Background Layer” select Asset Type: Color and select the colour you would like to use
  • Select Next (bottom right)
  • Select Finish
Image for post
Image for post
Adaptive Icons in Android Studio

You can find the new files in android/app/src/main/res sub-folders

You can test it works, if you’re using the example source code found here.

Run the following commands

adb connect xxx.xx.xxx.xx # IP Address of your emulator
yarn
yarn run start
yarn run android # In another terminal

Then you should see something like the image below instead of the default green Android robot.

Image for post
Image for post
Adaptive Icons in Genymotion

Written by

Software Engineer | Pythonista | Typescripter | Docker Advocate | https://haseebmajid.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store