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 background 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 so 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 also okay with this selection so hit “Import” to finish up the process. Close up the resource manager window.

Now its time to use this image. Head over to the GameScreen.kt file. Currently, the composable being returned is a Column. We want to place the background image underneath all the UI elements. For this, we use the Box layout composable. If you recall from the previous course, I mentioned that layout composables like Column, Row and Box can be used to arrange children on a specific axis. The Box here is used for depth, meaning that the children are placed on top of each other and that is exactly what we want here.

To achieve this, lets wrap the main Column with a Box. Click on the Column. Then the bulb icon. Select “Surround with widget.” Then choose “Surround with Container.” And this wraps the Column with a Box.

Box {
  Column(
    //...
  ){
    //...
  }
}

Currently, the Box has just one child which is the Column. Lets add an Image composable which will hold the background image.

Enter the following code above the Column:

Image(
  modifier = Modifier.fillMaxSize(),
  painter = painterResource(id = R.drawable.background),
  contentDescription = "Background Image"
)

Cool!!! The background image appears in the preview window. We use the fillMaxSize() modifier to make the image take up all the available space. We also use the painterResource() function to pass the image id from the R file and finally we set the contentDescription for accessibility purposes.

Let’s quickly extract this string resource. Click on it. Then the bulb icon. Select “Extract string resource.” background_image looks like a perfect name so we’ll leave it like that. Then hit OK.

Run the app.

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

Add in the following argument to the Image composable:

Image(
  modifier = Modifier.fillMaxSize(),
  painter = painterResource(id = R.drawable.background),
  contentScale = ContentScale.Crop, // New Code
  contentDescription = stringResource(R.string.background_image)
)

We set the contentScale to ContentScale.Crop and this scales up the image to make sure it fills up the available space even if it means some part of it will get cropped out. This makes the background to always fill up the screen without being stretched.

Run your app once again.

Cool!!! Everything looks nice.

Let’s see how our design looks in dark mode. Pull down the status bar. Then pull down the notifications window. Tap the settings icon at the bottom right corner. This opens up the settings screen. And make sure your emulator is in landscape mode.

Then scroll to the display setting. Tap it. Scroll to the dark theme. Then check the select box to activate dark mode. Next, tap the Overview button in the emulator window. Select Bullseye. And you can see how our app looks in dark mode. Looks nice, right?

Lets play one round. The AlertDialog also adapts nicely to dark mode. Okay, let’s turn off dark mode.

Head back to Bullseye. And our app returns back to the light theme. Cool!!!