Your First Kotlin Android App: Polishing the App

Currently, the Bullseye app uses the default app icon that comes with the Android Studio project. Let’s see what it looks like.

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. And if you go the home screen of your device and locate Bullseye, you’ll see it has the same icon. 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. Click on the plus icon, then select “Image Asset.” This opens 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 different places in our project and I don’t 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 as usual.

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 85% by dragging the resize slider. Also make sure that your icon doesn’t go beyond the safe zone represented with a black ring.

Next, click on the background 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. You can also see that this action will also overwrite the old icon files and that’s exactly what we want.

Alright, 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.

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.