How to change the default app icon to the preferred icon for your Android app project in Android Studio
Introduction:
Every Android mobile application usually comes with unique app icon associated with it by the Android Developer. An app icon visually represents a mobile application on the screen of user’s device, or in any app store, for example, Figure 1 shows app icons for various applications on the screen.
It is therefore a good idea to have an image designed for the Android application that you are building. The dimension of the app icon could be 512 x 512 pixel. You can then add the app icon to your Android project to replace the default launcher icon associated with app projects in Android Studio.
Demonstration:
In this demonstration, we will be replacing the default icon with our app icon (as in Figure 2).
To add your app icon to your Android project, take note of the following:
First, ensure that your app icon image has been designed and ready for use (for example, Figure 3 shows an image named “my_app_icon”- designed for “Demo One” app).
Second, position the app icon in a location where you can easily find it on your computer (for example, you can create a folder named “App Icons” on the Desktop of your computer and put your new app icon image inside it).
Third, launch your Android Studio software and open your Android project (for example, “Demo One” project has been opened in Android Studio as shown in Figure 4).
Fourth, in your Android Project, click on “File” menu >> click on “New” >> and then click on “Image Asset” (for example, as shown in Figure 5).
In the dialog box that is displayed (for example, as in Figure 6), you can configure the image asset for your launcher app icon.
In the tab for “Foreground layer”, you can change the image path to point to the location of your app icon on your computer, and also, you can resize the app icon to ensure that essential parts of the icon are not hidden when displayed on different devices. For example, we will click on the box in front of “Path”, and then, click on the location of our app icon. Next, we will click on the app icon (for instance, “my_app_icon.png” used for this demo), and then click on “OK” as shown in Figure 7.
The app icon has now been imported (as shown in Figure 8), but there is need for us to resize it, so as for it to show properly on the screens with different mobile device sizes.
To resize the app icon, you can move the slider in front of “Resize” backward to reduce the percentage until all the essential part of the icon are displayed within the inner circle in the samples on the Preview (for example to 46%), as in Figure 9. Alternatively, you can select “Yes” in front of “Trim”, and then move the slider backward to resize the icon. With Trim set to Yes, the resize percentage should be higher.
Next, we can change the color of the background layer of the app icon. To do this, we will click on the “Background Layer” tab, and then, in front of “Asset type”, click on “Color” (as in Figure 10).
Next, since the background of our sample app icon is white, we will select white color for the Color (as in Figure 11). Note that if you know the code for your preferred background color, you can enter it directly in the box under “Hex”, and then press “enter” key.
The background color for our image is now changed (as in Figure 12), we can now click on “Next”.
On the page that is displayed next, simply click on Finish (as in Figure 13).
Our app icon is now successfully added to our Android project. We can run the emulator to view our app, and then, navigate to the launcher tray on the screen to confirm our app icon (as shown in Figure 14).
That’s it.
Thank you for reading.
Comments
Post a Comment