BMI Calculator – Create app icon

In this lecture of the BMI Calculator sample application we are going to create the app icon. You will see this icon in Google Play as well.

GitHub

The starter project for this lecture is available on GitHub. Just download it using the below link.

GitHub – branch bmi+navigationComponent

After the download, extract the app from the .ZIP file and import it in Android Studio (File -> New -> Import Project…)

Step 1 - Download the icon

Our first step will be to download the icon in form of SVG.

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation.
Source: WikiPedia

Use the below download link to get the icon.

Download

Step 2 - Create the app icon

To create the app icon open Android Studio. Here expand the android folder inside of the Project tab, what you can find at the left side of the window.

Right click on the res folder with your mouse, then New, then Image Asset.

This below window will pop up for you.

First of all, change the name 

from ic_launcher
to ic_bmi

The rest in the header can stay on the default value.

Foreground layer

The Layer Name was auto generated when we have changed the name of the icon, and it is totally fine for us.

In the Source Asset section the Asset Type can stay on Image.

After that we can provide the image by browsing it in the line of the Path. So, click on the folder icon at the end of the line and browse out the downloaded SVG file.

As you can see, the icon doesn’t look good, but luckily we can resize the image. For this, use the slider in the row of Resize and try to size the icon to have the whole icon inside of the safe zone (grey circle).

For me the final value percentage is 46%. 

Backeground layer

Now, go to the background of the window.

First, we can specify its name, but again, the default generated name is fine for us.

Next, in the Source Asset section, you can select whether you would like to use a color or an image as a background layer.

We gonna select the Color option and choose the white color (#FFFFFF).

After thet this window looks like below.

If you are done, then click on the Next button. Here you will see what kind of images and files going to be genereated by Android Studio.

Finally, click on the Finish button also.

Step 3 – Modify the AndroidManifest.xml

The last step is to add as the icon to the app the now generated icon. For this, open the AndroidManifest.xml file, what you can find in the manifests folder.

Inside the <application> tag there is the line:

android:icon=“@drawable/ic_launcher”

… change it to

android:icon=“@mipmap/ic_bmi”

Then, change the rounded icon as well from

android:roundIcon=“@mipmap/ic_launcher_round”

… to

android:roundIcon=“@mipmap/ic_bmi_round”

Run the app

It’s time to run the app and check out the new icon.

GitHub

The finish project for this lecture is available on GitHub. Just download it using the below link.

GitHub – branch app_icon

After the download, extract the app from the .ZIP file and import it in Android Studio (File -> New -> Import Project…)

Questions

I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

Follow and like us:

Click to rate this post!

[Total: 0 Average: 0]

Leave a Reply

Your email address will not be published. Required fields are marked *