Your First Kotlin Android App: Polishing the App

Transcript: 19. Create an About Page

About Page Strings

🎉 Bullseye 🎉' This is Bullseye, the game where you can win points and earn fame by dragging a slider.\nYour goal is to place the slider as close as possible to the target value. The closer you are, the more points you score.\nEnjoy! Go Back! About Bullseye

The about page is the page that will be displayed whenever the user taps the info button. The strings required to build the page has already been added to the strings.xml file in the starter project of this episode. You can also get it in the author notes.

We’ll start off by creating the TopAppBar.

To add a top app bar, we need to use a composable called Scaffold. A Scaffold is used to structure a screen to follow the basic layout of a material design screen.

Using it, you can add stuffs like:

• app bars
• floating action button, and
• snackbar

Let’s see how to use it.

First, we need to create the About screen. So head over to the screens package. Then right click on it. Go to New. Kotlin Class/File. Select File. Enter AboutScreen as the name. Then hit return.

Let’s create the basic structure of the composable and also the corresponding preview.

Enter the following code:

import androidx.compose.runtime.Composable

@Composable
fun AboutScreen() {

}

@Preview(showBackground = true, device = Devices.AUTOMOTIVE_1024p, widthDp = 864, heightDp = 432)
@Composable
fun AboutScreenPreview() {
  AboutScreen()
}

Then build and refresh to see the preview

We have a blank screen for now so lets add in a Scaffold composable:

Scaffold() {

}

As soon as you add it in, we have an error. Hover over it. And it says that this composable is an experimental feature just like the FilledIconButton from the previous part. We want to use it so let’s opt in for it. And the Opt In experimental annotation is added to the top of the composable.

@OptIn(ExperimentalMaterial3Api::class) // New Code
@Composable
fun AboutScreen() {
  Scaffold() {

  }
}

We have another error but before we take a look at that, let’s add in a top app bar.

I’ll paste in the following code as an argument of the Scaffold:

Scaffold(
  // New Code Start
  topBar = {
    TopAppBar(
      title = { Text(stringResource(id = R.string.about_page_title)) },
      navigationIcon = {
        IconButton(onClick = { }) {
          Icon(
            imageVector = Icons.Filled.ArrowBack,
            contentDescription = stringResource(id = R.string.back_button_text)
          )
        }
      },
      colors = TopAppBarDefaults.smallTopAppBarColors(
        containerColor = MaterialTheme.colorScheme.primary,
        titleContentColor = MaterialTheme.colorScheme.onPrimary,
        navigationIconContentColor = MaterialTheme.colorScheme.onPrimary
      )
    )
  }
  // New Code End
) {

}

Make sure you add in all the imports by hitting Option + Return when it prompts you to. And you can see the UI in the preview. This code might look intimidating at first but if you look closely, it pretty much similar to all we’ve covered so far.

First, we pass in the topBar argument which expects a composable. And that’s exactly what we did, we assign a TopAppBar composable to it. We pass in the title, navigationIcon and colors arguments. The title is a Text with a string from the string resource named about_page_title. And do note that I’ve added the strings for this screen to the strings.xml file as mentioned earlier.

Next, we navigationIcon which is an IconButton with an empty onClick listener which we’ll implement in the next episode. We then pass in a back arrow icon as its child with a contentDescription for accessibility purposes.

Finally, we set the colors for the the TopAppBar and its contents. Don’t worry about a different color showing up in the preview window, the correct color will be shown when you run the app.

And now to the content section. This block is where you’ll be adding the content for the About screen. It has an error and if you hover over it, it says “Content padding parameter is not used.”

Let me first add in the paddingValues parameter:

Scaffold(
  topBar = {
    //...
  },
) { paddingValues ->
  //... Add in the Content here
}

Now, we only have a top app bar but the top and bottom bars of a Scaffold composable takes some space for it to be displayed. The Scaffold knows about this so it gives us the paddingValues parameter to properly offset any content inside the Scaffold.

Next, let’s finish off the UI for the content.

Add in a Column that will hold the UI components like so:

Column(
  horizontalAlignment = Alignment.CenterHorizontally,
  verticalArrangement = Arrangement.Center,
  modifier = Modifier
    .padding(paddingValues)
    .fillMaxSize()
) {

}

In here, we add a Column that’ll center its children both horizontally and vertically. With this, the children will be at the center of the screen. We then use the paddingValues parameter to offset the children of the column from the top app bar. Android forces you to use this value because you want your UI to start after the top app bar. We then makes sure the Column takes up the available space by using the fillMaxSize modifier.

Next, lets add in the children of the Column which are two Text widgets and a button.

I’ll paste them in:

Text(
  text = stringResource(id = R.string.about_title_text),
  style = MaterialTheme.typography.displayMedium.copy(fontWeight = FontWeight.Bold)
)
Text(
  text = stringResource(id = R.string.about_bullseye_text),
  textAlign = TextAlign.Center,
  style = MaterialTheme.typography.bodyLarge,
  modifier = Modifier.padding(horizontal = 16.dp, vertical = 24.dp)
)
Button(
  onClick = { },
  shape = MaterialTheme.shapes.medium,
) {
  Text(text = stringResource(id = R.string.back_button_text))
}

This is standard composable code so nothing new. The first Text is for the title. We use a string resource and set the style to displayMedium and made it bold. The second text is the app’s description. We aligned it to the center and set some padding around it to add some spacing between it and other composables.

Finally, we added a Button and gave it a rounded shape and passed in the button’s text which is also a string resource.

Now, one last thing. The Scaffold composable expects you to use the paddingValues in one more place. And that is as the value of the consumedWindowInsets() modifier. Let’s do that now.

Add it right below the padding modifier of the Column:

.consumedWindowInsets(paddingValues)

This is important in order to avoid double padding from other composables down the composable tree that automatically offsets its UI to avoid it overlapping with UIs like the status or navigation bars or camera cutouts. With this, their offsets would be pushed back in by the value contained in paddingValues.

It is an experimental feature so let’s opt in for it by clicking on it, then the bulb icon. Then select opt in for experimental layout API.

Cool!!!

The design is complete and now its time to navigate to this screen when you click the info button. Let’s do that now.