Intermediate React Native

Android App Icon

Kadi Kraman

Kadi Kraman

Intermediate React Native

Check out a free preview of the full Intermediate React Native course

The "Android App Icon" Lesson is part of the full, Intermediate React Native course featured in this preview video. Here's what you'd learn in this lesson:

Kadi walks through adding an icons to the Android version of the application using Android Asset Studio, resizing the icon, and changing the icon background color. A student's question regarding if Android Studio has to be installed to set the app icon is also covered in this segment.


Transcript from the "Android App Icon" Lesson

>> Let's do the same for Android. So for Android, it's a little bit different. We only need the image icon. So, if you've designed your own icon, use that. Otherwise, feel free to use the one I created. So, let's save this. And I'm just going to save it to my Downloads directory.

All right, so on Android Studio, you need to find app -> res -> mipmap -> ic_launcher. So, let's go to Android Studio. So, app, res, mipmap, ic_launcher, right? So, notice that we have different sizes launches here. So on Android by default, they are images that get created. So if you wanted to add that, then we go to the res directory, and then we right-click.

And we do New, Image Asset. And here it's just going to glue the previous. So on Android there's plenty more Android devices to support, there are plenty more versions of this icon. So firstly, we'll go to the foreground layer. And then, from the Asset Path we choose the image, we just downloaded.

If I go to Downloads add butterflies, then I open this. So, here on the Scaling, we can go Trim, Yes. And then we can size this. So it shows up as we want, all the different icons. Then on the background layer, we can choose a color background, and let's choose the blue that we used for our app.

So in theme, let's choose this hex code, And next and finish. So this now has created the app icons for all the sizes using our own image. And now if we rebuild, well, close everything and rebuild, it'll up. See if I need to reset the cache as well.

There we go. Okay, so now on Android once you've finished rebuilding, we can see our new app icon.
>> I'm not using the Android Studio, I'm just using the command line tool for build-in Android. Do I have to install Android Studio in order to set that up app icon?

>> So to do this automatically, yes. So basically, if you look at the checkpoint for this, so if you look at what this tool does, it creates all of these images automatically based on the set. So I think there are tools out there that you can use instead, and then just add them to the right directories.

But that's just a built-in way of doing it.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now