Your First Kotlin Android App: Polishing the App

In this episode we’ll talk about the display name of your app and also how to add custom app icons. Currently, the bullseye app uses the default app icon that comes with the android studio project. Let’s see what it looks like.

To get started, make sure your app is running. Then tap the overview button in the emulator window. This shows you the list of running apps. As you can see, the icon for the bullseye app is a droid character on a green background. Let’s change that up to a custom app icon.

To add an app icon, open up the Resource Manager from the left side of the tool window bar. Then click on the plus icon, then select “Image Asset” This open up the “Asset Studio” dialog which is used to configure app icons for different use cases. Currently, you can see the default icon and background the app uses. You can see that it creates these app icons for different use cases. It even generates an icon that will be used on the Google play store. And if you look down in the dialog, you’ll see that we have a warning that an icon with the same name exists and would be overwritten. That’s fine because changing the icon name will require updating the icon name in differenct places in our project and I dont want to do that.

Okay, let’s change the icon now.

For the foreground layer, you can use an image, a clip art or text. You will use an image so leave the default selection.

Then click on the folder icon in the path field to change the image. This opens up the finder dialog. The icon has been added to the resources folder of the download materials but mine is located on my desktop. So I’ll head over to my desktop and click the ic_launcher.png file. You can see it has a custom design which fits the bullseye design style. I’ll click open and this adds the icon to the preview. You can resize the icon to fit nicely into the background. I’ll resize it to 84% by dragging the resize slider. Also make sure that your icon doesnt go beyond the safe zone represented with a black ring.

Next, click on the backgorund layer tab. Let’s change the color to a white background. Change the asset type to color. Then click on the color palette. Select the top-left corner to change it to a white color. Then click the next button.

This screen shows you the different files that will be created and the directories they’ll be added to. You can see different variations will be created for different device densities. Density here just simply refers to screen sizes. Click on the “Finish” button to complete this setup. To see the the icon asset we just added, you click on the mip map tab in the resource manager window.

The next thing we need to do is to delete the old icon files. Unfortunately, android studio doesnt do this for you. I’ll switch to the Project window by clicking on it on the tool window bar. Then open up the launcher folders inside the mipmap folder. You can see the previous icons have the same name but are of the webp file type. If you try to run your app you’ll get an error related to duplicate resources. So delete all the files ending with .webp in these folders.

Once you’re done, run your app.

Then click on the overview button in the emulator’s toolbar. And you can see that the bullseye app now uses the custom icon. Alright click on the home button this time around. Then open up the launcher menu. And you can see that the new icon is also used here.

One final thing to mention is the app name. We have the correct name we want but if you’re building an app and want to change the display name

maybe because the app name is too long or something, you can change this up in the android manifest file.

Let me show you what I mean. Open up the android manifest file. In the application node, you can see a property called android label. This is the name that android uses to label the app just like you see in the launcher. And you can see it uses a string resource called app_name.

Hold down the Cmd key and click on it. You see it is the first string resource in this file and it is automatically created for you whenever you create a new android project. It uses the application name you entered while creating the project. So if you change this string value and run your app, the new value will be displayed in the launcher.

Okay, so that’s it for the app icon and label. Let’s add the final polish to the bullseye app.