In the time of writing this article, I am using React Native
v0.60.5 with Typescript.
To add an adaptive icon to an app using XML, begin by updating the
android:iconattribute in your app manifest to specify a drawable resource. You can also define an icon drawable resource using the
android:roundIconattribute. You must only use the
android:roundIconattribute 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>
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.
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
appfolder and create new
- 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
Please make sure you updated these two lines within the file.
// AndroidManifest.xml android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round"
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