Your First Kotlin Android App: Polishing the App

Now that we’re done with the UI part, it’s time to increment and display the score in the score board.

One of the key aspects of learning any new language - be it a spoken or computer language, is repetition. We’ll be doing this a lot in this course to get you used to writing and thinking in Kotlin. Our goal is to show you core techniques that you’ll be using all the time in Android development.

In this case, I’ll be showing you how to increment the score. We’re going to modify the Bullseye app to show the user’s total score at the bottom of the screen. This will be a review of several key things you’ve learned in this learning path up to this point.

To get started, open your project in progress or download the starter project for this episode and open it up in Android Studio.

Then open up the GameScreen file. The first thing you’ll do is to add a variable to hold the total score.

Add the following code below the sliderToInt constant:

var totalScore by rememberSaveable { mutableStateOf(0) }

In here you added a totalScore state object and set its default value to 0. Next, let’s increment its value whenever the player taps the hit me button. Add the following code inside the click listener of the hit me button:

//...
totalScore = totalScore + pointsForCurrentRound()

In here, we get the points generated from the pointsForCurrentRound() function and add them to the total score variable. With this, whenever the player taps the hits me button, the total score will always increment.

Now, I know you must be wondering why the totalScore assignment is underlined with a warning. Go ahead and hover on that line so we can see what it says. Android Studio tells us that this expression can be replaced with an operator assignment. So I’ll go ahead and select the suggested replacement.

totalScore += pointsForCurrentRound()

As you can see, we have a shorter expression. This is called an operator assignment. In here, the value returned from the pointsForCurrentRound() function is added to the current value of the totalScore. This is just a shorter syntax to get the job done. And if you recall, you used this type of expression in the previous course where you calculated the difference by multiplying the difference by -1.

Next, we need to display the total score in the UI. Remember, the component that handles this is the GameDetail widget.

Scroll down to where it is called inside the GameScreen screen composable. Then pass in totalScore as one of its arguments:

GameDetail(
  totalScore = totalScore, // New Code
  modifier = Modifier.fillMaxWidth()
)

You can see we already have an error because the totalScore parameter was not defined in the GameDetail function. Let’s add it in. To navigate to this file, hold down the Cmd key and click on GameDetail to open up its definition.

Then add in the totalScore parameter like so:

@Composable
fun GameDetail(
  modifier: Modifier = Modifier
  totalScore: Int = 0, // New Code
) {
  //
}

In here, we added a totalScore parameter of type Int and pass in a default value of 0. Next, we need to pass in this value as the score.

Currently we pass in 0 as the value of the score widget. Let’s change that up to use the totalScore parameter like so:

GameInfo(label = stringResource(id = R.string.score_label), value = totalScore)

Run your app to try it out.

Play the game multiple times.

And you can see the score increments in the score board below.

Let’s work on the game rounds functionality in the next episode.