Your First Kotlin Android App: Polishing the App

Go to About Page Restart Game

It’s time to style the buttons in the Bullseye app. If you take a look at the buttons in the app, they all have the same look and feel of the default button. You’ll change that now.

You’ll give the buttons a custom look like the image below. In that screenshot, you can see that the hit me button has more vertical spacing while the start over and info buttons are circular with custom icons. You’ll achieve this styling using some text arguments and Material components.

Let’s do that now.

Let’s start with the hit me button. Open up the GameScreen.kt file if you don’t have it open. Scroll down to where the hit me button is used.

Then add in the following arguments under the onClick listener:

Button(
  onClick = {
    //...
  },
  shape = MaterialTheme.shapes.medium, // New Code
  contentPadding = PaddingValues(16.dp), // New Code
) {
    //...
  }

We gave it a medium rounded corner using the medium property from the Shapes class of the MaterialTheme. This equals to a RoundedCornerShape of 12.dp. We also add in some padding of 16.dp to give some inner spacing between the text and the bound of the button.

You can see the update in the preview window.

Next, lets style the start over button. Head over to the GameDetail.kt file. Currently we’re using the normal Button component. Material design 3 provides with more Button components for different use cases. We’ll be using the FilledIconButton which lets us add in an icon on a button with a background color.

Replace the start over button with the following code:

FilledIconButton(
  onClick = { onStartOver() },
  colors = IconButtonDefaults.filledIconButtonColors(
    containerColor = MaterialTheme.colorScheme.tertiary
  ),
  modifier = Modifier.size(50.dp)
) {
  Icon(
    Icons.Filled.Refresh,
    contentDescription = stringResource(id = R.string.restart_btn_desc)
  )
}

Run your app. And you can see the update.

This code looks like quite a lot but its pretty straightforward. In here we add a FilledIconButton and set its onClick listener to trigger the onStartOver() function just like before. We set its containerColor using the filledIconButtonColors method which lets you set things like container and content related colors. The tertiary color here is black as defined in the Theme.kt file. We then make the button bigger by setting its size to 50.dp using a modifier.

Finally, we pass in a refresh Icon as its child. We set its contentDescription to a value from the string resources. contentDescription is used for accessibility services like screen readers to describe what the icon represents.

Do note that I’ve added the string resources for the two buttons in the game detail screen to the starter project of this episode. You can also get them from the author notes of this episode.

And there you have it, better styles for the buttons in the game screen.