Scaffold and TopAppBar in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Scaffold with a TopAppBar title.

Android Kotlin

Scaffold(topBar = { TopAppBar(title = { Text([1]) }) }) {
    // Content here
}

Drag options to blanks, or click blank then click option'

A"My App"

BMy App

Ctitle

DTopAppBar

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing a variable name instead of a string

The title parameter expects a composable that returns a Text composable with a string. The string must be in quotes.

2fill in blank

medium

Complete the code to add a background color to the TopAppBar.

Android Kotlin

Scaffold(topBar = { TopAppBar(backgroundColor = [1], title = { Text("Title") }) }) {
    // Content
}

Drag options to blanks, or click blank then click option'

AR.color.red

Bred

CColor.red

DColor.Red

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'red' which is not recognized

Using Android resource colors like R.color.red which don't work here

In Jetpack Compose, colors are accessed via the Color object with capitalized names like Color.Red.

3fill in blank

hard

Fix the error in the Scaffold usage by completing the missing parameter.

Android Kotlin

Scaffold([1] = { TopAppBar(title = { Text("Hello") }) }) {
    Text("Content")
}

Drag options to blanks, or click blank then click option'

AtopBar

BdrawerContent

CbottomBar

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'content' instead of 'topBar'

Using 'bottomBar' or 'drawerContent' incorrectly

The Scaffold composable expects the topBar parameter to define the top app bar content.

4fill in blank

hard

Fill both blanks to create a Scaffold with a TopAppBar that has a navigation icon.

Android Kotlin

Scaffold(topBar = { TopAppBar(title = { Text("Home") }, navigationIcon = { IconButton(onClick = [1]) { Icon(Icons.Filled.Menu, contentDescription = [2]) } }) }) {
    // Content
}

Drag options to blanks, or click blank then click option'

A{}

B"Menu icon"

Cnull

D() -> {}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing empty braces {} instead of a lambda for onClick

Using null for contentDescription which hurts accessibility

The onClick parameter expects a lambda function, and contentDescription should be a string describing the icon for accessibility.

5fill in blank

hard

Fill all three blanks to create a Scaffold with a TopAppBar that has a title, background color, and an action icon.

Android Kotlin

Scaffold(topBar = { TopAppBar(title = { Text([1]) }, backgroundColor = [2], actions = { IconButton(onClick = [3]) { Icon(Icons.Filled.Favorite, contentDescription = "Favorite") } }) }) {
    // Content
}

Drag options to blanks, or click blank then click option'

A"Favorites"

BColor.Blue

C() -> println("Clicked")

D"Favorite"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the title string

Using a string instead of a Color object for backgroundColor

Passing a string instead of a lambda for onClick

The title needs a string, backgroundColor a Color object, and onClick a lambda function to handle clicks.