Ospfolio

Two-step to make adaptive Android's icon in React Native

September 10, 2019 • ☕ 2 min read

In the time of writing this article, I am using React Native v0.60.5 with Typescript.

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

To add an adaptive icon to an app using XML, begin by updating the android:icon attribute in your app manifest to specify a drawable resource. You can also define an icon drawable resource using the android:roundIcon attribute. You must only use the android:roundIcon attribute if you require a different icon asset for circular masks, if for example the branding of your logo relies on a circular shape. According to the Android Developer Docs

// AndroidManifest.xml

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

Step 1: Separate between foreground and background

Open up your choice of design app like Sketch, Adobe Illustrator, etc. Separate your App icon with foreground and background and export it as an individual PNG file.

separate foreground background

Step 2: Android Studio

But wait, Why Android Studio? Because it was very easy to create the icons because Android Studio will generate all the assets that we needed and even created most of the necessary subdirectories for us.

  • Fire up your Android Studio
  • Right-click on app folder and create new Image Asset
  • On “Foreground Layer” select the provided image and resize to get the proper aspect for the icon
  • On “Background Layer” use the background provided or choose your color
  • On “Legacy” you can turn off/on Google Play Store Icon, for now, we don’t need it so I turned it off
  • Click on Next button and then Finish

android studio

play store

Build

Please make sure you updated these two lines within the file.

// AndroidManifest.xml

android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"

android studio

In Closing

Now that you know pretty much everything about link custom font and make it default in RN project. Does it make sense? Did I miss something? (I haven’t run out of paper yet!)

Thanks for reading.

All the info was obtained from the official android documentation

Create app icons with Image Asset Studio

Adaptive icons

How to create adaptive icons for Android using Android Studio