Your First Kotlin Android App: Polishing the App

Bullseye looks better. But currently it has a plain white background. We can make that look better too. Let’s add a backgorund image to make the app look more appealing.

First, let’s add the background image resource. It’s pretty much the same steps from the previous episode. Open up the Resource Manager window by clicking the button on the tool window bar. Makes sure you’re in the drawable tab then click the plus icon. Select “Import Drawables.”

Locate the file in the resources folder of your download materials. Mine is on my desktop. I’ll head over there, then select the background image. You can see its a ring image which mimics a dart board. Click “Open.” For the qualifier type, select density. It automatically selects medium density as its value, that’s okay so we click on “Next.” This screen tells us where the file would be imported. We’re okay with this selection so we hit “Import” to finish up the process.

Close up the resource manager window. And now its time to use this image. Open up the layout file if you dont have it open already. Don’t be scared, we’re not working with the xml file…or should we? Okay let’s work with the design view this time around so click on the design tab.

For this, you will use an ImageView to display the image. Easy to guess that was the view to do the job, right? You want the image view to be underneath all the other views so you’ll place it as the first child of the ConstrainLayout. The component tree will help us while doing this.

Okay, go ahead and drag in an ImageView from the palette to the component tree. Make sure it is the first child of the ConstraintLayout. The visual guide will help you as you try to place it in.

Immediately after you let go of the imageview, the “pick a resource” window pops up with a list of drawables. You have some sample drawables you can use at the top but pick the backgorund image you just imported to your project. Then hit OK.

The image is now visible in the design editor. First, let’s change its id to something more descriptive. Set the id to bgImage in the attribute panel. Then click refactor when the rename dialog pops up.

Now, remember its a child of a ConstrainLayout so you need to add constraints to it. A very important step. To do that, just click on the constraint handles on the four sides of the image while it is still selected. This automatically constrains the image view to its parent which is the ConstraintLayout.

Run the app.

Cool!!! The background image appears as expected but it looks small. Let’s scale it up.

Make sure the imageview is selected then search for “scaleType” in the attributes panel. Then click on the dropdown. You can see different scale types. You can try different ones to see how the image scales but select “centerCrop.” And instantly, the layout editor scales up the image to fit.

Run your app. The app looks better with the background image.

Now this next step is optional. I noticed that the image is not centered nicely. You can give it a negative margin on the start to push it to the left a bit.

Make sure the imageview is selected then search for margin in the attirbutes panel. Then set the marginStart attribute to -20dp

Run your app once again. Cool!!! Everything looks nice. Let’s see how our design looks in dark mode.

Drag down the status bar on the emulator. Scroll to the settings icon then click on it. This opens up the settings screen on Android. Scroll down then select the “Display” setting. Scroll down once again, then under the appearance section, enable dark mode. Go back to your app by pressing the “Overview” button on the emulator window. Then select your app.

And our design adapts nicely in dark mode. Go ahead and disable the dark theme and I’ll see you in the next episode.