Scaffold and TopAppBar in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Scaffold with TopAppBar code?

Consider this Kotlin Compose code snippet. What will the user see on the screen?

Android Kotlin

import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun MyScreen() {
  Scaffold(
    topBar = {
      TopAppBar(
        title = { Text("Welcome") }
      )
    }
  ) { paddingValues ->
    Text("Hello Scaffold", modifier = Modifier.padding(paddingValues))
  }
}

A A screen with a top bar titled 'Welcome' and below it the text 'Hello Scaffold' with proper padding.

B A screen with only the text 'Hello Scaffold' centered and no top bar visible.

C A screen with a top bar but no title, and the text 'Hello Scaffold' overlapping the top bar.

D A blank screen with no visible UI elements.

💡 Hint

Remember Scaffold's topBar slot shows the TopAppBar and content respects padding.

The Scaffold composable places the TopAppBar at the top with the title 'Welcome'. The content inside Scaffold uses the paddingValues to avoid overlapping the top bar, so 'Hello Scaffold' text appears below the bar with correct spacing.

❓ lifecycle

intermediate

When is the TopAppBar recomposed in this Scaffold?

Given this Scaffold with a TopAppBar and a mutable state for the title, when does the TopAppBar recomposition happen?

Android Kotlin

import androidx.compose.material3.*
import androidx.compose.runtime.*

@Composable
fun TitleScreen() {
  var title by remember { mutableStateOf("Home") }
  Scaffold(
    topBar = {
      TopAppBar(title = { Text(title) })
    }
  ) {
    Button(onClick = { title = "Profile" }) {
      Text("Change Title")
    }
  }
}

A Only once when the screen is first composed; clicking the button does not recompose TopAppBar.

B Every time any UI element on the screen is clicked, regardless of state changes.

C When the 'Change Title' button is clicked and the title state changes, causing recomposition of TopAppBar.

D TopAppBar never recomposes because it is outside the content lambda.

💡 Hint

Think about what triggers recomposition in Compose with mutableStateOf.

The TopAppBar reads the 'title' state. When the button changes 'title' from 'Home' to 'Profile', Compose recomposes the TopAppBar to update the displayed title.

❓ navigation

advanced

How to add a navigation icon to the TopAppBar in Scaffold?

You want to add a back arrow icon on the left side of the TopAppBar that triggers a function when clicked. Which code snippet correctly adds this navigation icon?

A

TopAppBar(
  title = { Text("Screen") },
  navigationIcon = {
    IconButton(onClick = { onBack() }) {
      Icon(Icons.Default.ArrowBack, contentDescription = "Back")
    }
  }
)

B

TopAppBar(
  title = { Text("Screen") },
  navIcon = {
    IconButton(onClick = { onBack() }) {
      Icon(Icons.Default.ArrowBack, contentDescription = "Back")
    }
  }
)

C

TopAppBar(
  title = { Text("Screen") },
  navigationIcon = IconButton(onClick = { onBack() }) {
    Icon(Icons.Default.ArrowBack, contentDescription = "Back")
  }
)

D

TopAppBar(
  title = { Text("Screen") },
  navigationIcon = {
    Icon(Icons.Default.ArrowBack, contentDescription = "Back")
  }
)

💡 Hint

The navigationIcon parameter expects a composable lambda with an IconButton wrapping the Icon.

Option A correctly uses the navigationIcon slot with an IconButton that calls onBack() when clicked, wrapping the Icon with proper contentDescription for accessibility.

📝 Syntax

advanced

What error does this Scaffold code produce?

Analyze this Kotlin Compose code snippet. What error will it cause?

Android Kotlin

Scaffold(
  topBar = {
    TopAppBar(
      title = Text("Title")
    )
  }
) {
  Text("Content")
}

A Syntax error because of missing parentheses around Text composable.

B No error; the code compiles and runs correctly showing the title and content.

C Runtime crash due to missing padding in content lambda.

D Type mismatch error because title expects a composable lambda, not a Text composable directly.

💡 Hint

Check the expected type of the title parameter in TopAppBar.

The title parameter expects a composable lambda: title = { Text("Title") }. Passing Text("Title") directly is a type mismatch causing a compile error.

🔧 Debug

expert

Why does the content overlap the TopAppBar in this Scaffold?

This Scaffold code shows the TopAppBar but the content text is drawn behind it, overlapping. What is the cause?

Android Kotlin

Scaffold(
  topBar = {
    TopAppBar(title = { Text("Header") })
  }
) {
  Text("Overlapping content")
}

A Text composable must be wrapped in a Column to avoid overlap.

B The content lambda does not apply the paddingValues parameter, so content overlaps the top bar.

C Scaffold requires a bottomBar to prevent content overlap with topBar.

D TopAppBar is not visible because it is not inside the Scaffold content lambda.

💡 Hint

Scaffold provides paddingValues to content lambda to avoid overlapping system bars and topBar.

The content lambda receives paddingValues which must be applied to the content's modifier to avoid drawing behind the TopAppBar. Without it, content overlaps the bar.