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

Add adaptive icons to your Android app

9th November, 2019

2 min read

In this article, we will go over how you can use add the new adaptive app icons to your Android app…

#react-native#android

Auto Publish React Native App to Android Play Store using GitLab CI

9th October, 2019

7 min read

In this article, I will show you how can automate the publishing of your AAB/APK to the . We will be…

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