Add a Custom App Icon to Your React Native Android App with Android Asset Studio
How to add an app icon to your Android app.
For the foreground, you will need an image with a transparent background.
If you wan to create one, you can use Figma which is a free online design tool used in the video. You can use any design tool you like, such as Photoshop, Sketch etc.
Android Studio - is the IDE for android development. To open you React Native project in Android studio, launch Android Studio, choose "Open an Existing Android Studio Project" and open the /android directory.
Kadi Kraman: [0:00] Here is a weather app that shows the current weather in London. We can see that it currently doesn't have an app icon, or rather, it's still using the default Android app icon you would get when you create a new React Native project using the React Native CLI.
[0:15] When we open our project in Android Studio and explore the file structure, we will find a res or resources directory. Inside it, you'll find a bunch of ic_launcher files, which are used as the app icon. In order to replace these with our own custom app icon, we can use a tool that's built into Android Studio.
[0:35] Let's right click on the res directory and choose New and Image Asset. There are a couple of different icon types we can choose from here, but the one we're interested in is the Launcher Icons. We can use this Android Asset Studio to create our own launcher icon by setting the foreground and background layers.
[0:53] Looking at a design for our weather app icon, we have the sun peeking out from behind a cloud in a blue sky. Wishful thinking for London, of course.
[1:03] We select just the layer that contains the sun and the cloud, make it exportable and download it as a PNG. Going back to Android Asset Studio, we can choose the path of the foreground layer to be the icon we've just downloaded. Handily enough, you'll be able to scale the image to be larger or smaller as the designs require.
[1:25] For the background layer, we could choose another image asset if we wanted to, but in this case, it might be more prudent to use a hex value. We go back to Figma and copy the exact value of the background color and paste it into the color selector. We can preview all the icons that are about to be created, and if we're happy, hit Next and then Finish to create them.
[1:48] We can also see that all the icons we opened earlier have been replaced with our custom icon. Finally, all that's left to do is to rebuild the Android app. You can do this by hitting Play on Android Studio or, of course, using [inaudible] for an Android on the terminal.
[2:04] When we open our weather app again, we can see that the app icon has been updated.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!