Your First Kotlin Android App: An App From Scratch

Currently, the Bullseye app generates a target value for the player to aim for. The player can then move the slider as close as they can to the target value then tap the “Hit Me” button.

This triggers the button’s action to display the alert dialog with the slider’s value. All that’s left is to find a way to calculate the player’s score.

We need to create a self-contained action “calculate score.” Now, where do we put the code to calculate the score?

Rememeber, actions in Kotlin are represented as functions. So in this case, you put the code inside a new function.

You’ve used functions that have parameters, that is, when you call them, you pass in some inputs known as arguments. The composable functions you’ve created and used so far have this feature. This time around, you’ll be creating a type of function that returns an output otherwise known as a return value.

To do this, you simply create a function like this that adds a type after the parenthesis in the function definition. The colon here introduces the type.

You might remember this colon syntax when you added it as the type for the alertIsVisible boolean variable from the previous part. It is used to define a type. So a function that returns an integer has a return type of Int.

Then inside the curly braces, you add the code that forms the body of the function. This will be the logic that results in the final return value.

Then as the last line of code in the function you return the value using the return keyword followed by the value.

The value must match the return type of the function. So if the function definition says it returns an Integer value then you can return stuff like 2, 52, 200, or any other whole number.

Note: the return value must be the last line of the function, otherwise you’ll encounter an error.

Now you’re going to create a new function just under the sliderToInt constant. Enter the following code:

fun pointsForCurrentRound(): Int {
    return 999
}

You can see it returns an interger value 999 for now. And this is because of the return type of the function in its definition.

This function will return a value that will be displayed as part of the alert dialog message. Let’s head over to the strings.xml file. The result_dialog_message string currently has one placeholder for a value to be passed in. Let’s add the remaining string and the second placeholder for the score.

Update the string to the following:

<string name="result_dialog_message">The slider\'s value is %1$d.\nYou scored %2$d points this round.</string>

Inside the updated string, you added \n which is a newline character. This will push the text after it to the next line.

Then you added the rest of the message text to the string and added a second placeholder inside it. This is denoted with the number 2.

Alright, head over to the ResultDialog file. Scroll down to the text argument of the AlertDialog. You already passed in the first placeholder, sliderValue. Now you need to pass in the second placeholder. Failure to do so will result in a runtime error, meaning that your app will compile but you’ll get an error when then stringResource() function is called when you want to display the dialog.

First we need to add this to the parameter list of this composable function, then pass it as the second format argument of the stringResource() function. I’ll name this new parameter points.

Alright, update your code to the following:

@Composable
fun ResultDialog(
  hideDialog: () -> Unit,
  sliderValue: Int,
  points: Int, // New Code
  modifier: Modifier = Modifier
) {
  //...
    text = { Text(stringResource(id = R.string.result_dialog_message, sliderValue, points)) } // Updated Code with points
}

Then head over to where ResultDialog is used in the GameScreen composable. You can see there’s an error as expected because the ResultDialog now expects you to pass in a value for the points parameter. So pass in the pointsForCurrentRound() function as the value for the points argument like so:

ResultDialog(
  hideDialog = { alertIsVisible = false },
  sliderValue = sliderToInt,
  points = pointsForCurrentRound() // New Code
)

Run your app once again to try it out.

You can see the score of 999 is returned from the new function you just created and it is displayed correctly as a message in the dialog.