Your First Kotlin Android App: Polishing the App

It’s time for your first challenge of this part. And its actually the simplest challenge so far in this learning path. For this, you’ll style the info button to look just like the start over button but this time around using the info icon.

Don’t just copy and paste the start over button code and make edits. Make sure you type in the code as this will give you a better understanding of how the FilledIconButton works.

Alright, go ahead and tackle this one and you can watch the previous episode in case you need a refresher on the steps to take. And make sure you have the strings for the contentDescription added in your strings.xml file.

All the best!!!

Hint: The icon on the info button is the Info icon.

How did it go? I believe you did well? I’ll implement it now.

Replace the info Button with the following code:

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

This code is similar to the start over button but with a few changes. The onClick listener lambda is empty as we’ve not implemented the navigation functionality. It uses the same colors and size as the start over button. This time around, we pass in an info icon and the contentDescription for the about button from the string resources.

Run your code.

And the info button is correctly styled to match the UI.