Your First Kotlin Android App: An App From Scratch

Now its time for your first challenge in this part.

You’ve learned about how you can take a group of widgets and refactor them into a reusable composable. For this challenge, I want you to take the instruction and target texts and make them into a single composable in the GameScreen. You’ll name this new composable function: GamePrompt.

This composable should be in a new file just like the other custom composable we created.

Alright, Goodluck with this one.

How did it go? Okay, let’s get to it.

First create a new Kotlin file. I’ll name it GamePrompt.

Inside it create a composable function. I’ll type in comp and Android Studio’s intellisense kick in to help us with a composable template. Hit return to select it. Type in GamePrompt as the name. And notice the generated snippet also includes the import statement.

import androidx.compose.runtime.Composable

@Composable
fun GamePrompt() {

}

Then head over to the GameScreen composable and cut out the instruction and target text widgets. Type in GamePrompt() as the replacement for that line since that’s the composable you’ll have there.

Then head back to the GamePrompt.kt file and paste it in as the content of the composable.

@Composable
fun GamePrompt() {
  Text(stringResource(R.string.instruction_text))
  Text(
    stringResource(R.string.target_value_text),
    fontSize = 32.sp,
    fontWeight = FontWeight.Bold,
  )
}

Next, since you want them arranged vertically, you need to surround them with a Column.

So select the two text, click the bulb icon, select “surround with widget” then select Column.

Run your app.

The children are currently aligned to the left so I’ll center them horizontally like so:

Column(
  horizontalAlignment = Alignment.CenterHorizontally
)

Following recommended practice, add in the default modifier parameter and pass it to the Column just in case you want the Column to be customizable:

@Composable
fun GamePrompt(modifier: Modifier = Modifier) { // New Code
  Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = modifier // New Code
  ) {
    //...
  }

Finally, lets add some spacing between the two texts. You could use a Spacer widget and give it a height but I’ll simply just add a padding modifier to the target text like so:

Text(
  stringResource(R.string.target_value_text),
  //...
  modifier = Modifier.padding(8.dp) // New Code
)

Run your app once again.

Cool!!! Everything looks fine and the the custom GamePrompt widget integrates nicely into Bullseye.