Your First Kotlin Android App: Polishing the App

Its time to style the text in the Bullseye app. Material Design 3 provides us with different typography styles for common use cases. We can use them as they are, update them or create our own styles for text. Doing this is straightforward as you’ll see in the demo section. Let’s get into it.

Lets start off with the text in the score board. Head over to the GameDetail.ktfile. Scroll down to the GameInfo composable function. We have two text components inside it: the label and the value. We only need to style the value. We want to make it bold and give it a bigger font size.

We could create a style for this but the Material theme already provides us with some default text styles. So I’ll add in the style argument. Then set it to MaterialTheme. Add a dot(.) then type in typography. Then add in another dot(.). And you can instantly see different text styles provided by the MaterialTheme to be used for different purposes.

We need the one for a large label so select labelLarge. And you can see it updated in the preview window.

Text(
  value.toString(),
  style = MaterialTheme.typography.labelLarge
)

If you notice, it makes the text bold. We also need to increase the font size. For this, I want to maintain the other styling that comes with the labelLarge style but just need to change the font size.

Update your code to add this like so:

style = MaterialTheme.typography.labelLarge.copy(fontSize = 20.sp)

In here, we used the copy method of the TextStyle class to copy the existing styling and then change the fontSize to 20.sp. And you can see in the preview that both the score and round text values have bigger font sizes.

Next is the instruction and target text. Head over to the GamePrompt file. We don’t have a preview so lets add in one so we can see the changes we make.

Add it in like so:

@Preview(showBackground = true)
@Composable
fun GamePromptPreview() {
  GamePrompt(targetValue = 50)
}

We added the showBackground and set it to true so the preview can have a white background. We also pass in a default target value because the GamePrompt function need it. Alright, let’s add in a style for the instruction label.

Update your code to the following:

Text(
  stringResource(R.string.instruction_text),
  style = MaterialTheme.typography.titleMedium.copy(letterSpacing = 1.sp, fontWeight = FontWeight.Bold) // New Code
)

We set the style for the instruction label to titleMedium. We then update the letterSpacing to 1 to give each character some spacing between them and finally, we make the text bold.

Its now time to update the target text. If you notice, we already have some styling passed in individually as arguments. But as we’ve learned, its better to use the style argument.

Update your code to the following:

Text(
//      "$targetValue",
  text = targetValue.toString(),
//      fontSize = 32.sp,
//      fontWeight = FontWeight.Bold,
  modifier = modifier.padding(8.dp),
  style = MaterialTheme.typography.displayMedium.copy(fontWeight = FontWeight.Bold)
)

We used this displayMedium typography style and updated it to make it bold.

Run your app to see what it looks like.

Our app is updated to have a better text styling.