Cover for article.
Add adaptive icons to your Android app
9th November, 2019
2 min read / 303 words
#react-native#android

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

#Adaptive Icons

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.

#Android Studio

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

Android Studio

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

#Test

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.

New Icon

#Appendix

    Table of contents

  • Adaptive Icons
  • Android Studio
  • Test
  • Appendix

Similar Posts

Build an Android APK using GitLab for a React Native Application

23rd September, 2019

7 min read

In this article I will show how you can use the GitLab CI with React Native to create a binary which…

#react-native#ci#gitlab#android

© Copyright 2020, Haseeb Majid. All Rights Reserved.
Contact me at hello@haseebmajid.dev