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.

Practice

1. What is the main purpose of the Scaffold component in Android Jetpack Compose?

easy

A. To provide a basic screen layout with slots like top bar and content area

B. To handle network requests in the app

C. To manage database operations

D. To create animations for UI elements

Solution

1. Step 1: Understand Scaffold's role

   Scaffold is designed to create a basic app screen layout with predefined slots such as topBar, bottomBar, and content.

2. Step 2: Compare with other options

   Network requests, database operations, and animations are handled by other components, not Scaffold.

3. Final Answer:

   To provide a basic screen layout with slots like top bar and content area -> Option A

4. Quick Check:

   Scaffold = Basic layout structure [OK]

Hint: Remember Scaffold arranges screen parts like a frame [OK]

Common Mistakes:

• Confusing Scaffold with data or network handling
• Thinking Scaffold manages animations
• Assuming Scaffold is for database tasks

2. Which of the following is the correct way to add a TopAppBar inside a Scaffold in Jetpack Compose?

easy

A. Scaffold(content = { TopAppBar(title = "Title") })

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

C. Scaffold(bottomBar = { TopAppBar(title = { Text("Title") }) })

D. Scaffold(topBar = TopAppBar("Title"))

Solution

1. Step 1: Check Scaffold's topBar slot usage

   The topBar parameter expects a composable lambda, so it should be passed as topBar = { ... }.

2. Step 2: Validate TopAppBar syntax

   TopAppBar requires a title composable, so title = { Text("Title") } is correct.

3. Final Answer:

   Scaffold(topBar = { TopAppBar(title = { Text("Title") }) }) -> Option B

4. Quick Check:

   topBar = { TopAppBar(title = { Text() }) } [OK]

Hint: Use curly braces for composable lambdas in Scaffold slots [OK]

Common Mistakes:

• Passing title as a string instead of a composable
• Putting TopAppBar inside content or bottomBar slots
• Omitting curly braces for topBar parameter

3. What will be displayed when running this code snippet?

Scaffold(
  topBar = { TopAppBar(title = { Text("Hello") }) },
  content = { padding ->
    Text("Content", Modifier.padding(padding))
  }
)

medium

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

B. Only the text 'Content' without any top bar

C. A top bar titled 'Hello' but 'Content' text overlaps it without padding

D. App crashes due to missing padding parameter

Solution

1. Step 1: Analyze Scaffold usage

   The Scaffold sets a TopAppBar with title 'Hello' and content that uses the padding provided by Scaffold.

2. Step 2: Understand padding effect

   The content Text uses Modifier.padding(padding) which ensures it is placed below the TopAppBar without overlap.

3. Final Answer:

   A screen with a top bar titled 'Hello' and text 'Content' below it with proper padding -> Option A

4. Quick Check:

   TopAppBar + padded content = visible, no overlap [OK]

Hint: Content padding avoids overlap with TopAppBar [OK]

Common Mistakes:

• Ignoring padding causes content overlap
• Assuming content replaces top bar
• Thinking padding parameter is optional and unused

4. Identify the error in this Scaffold usage:

Scaffold(
  topBar = TopAppBar(title = { Text("App") }),
  content = { padding ->
    Text("Welcome", Modifier.padding(padding))
  }
)

medium

A. Missing padding parameter in content lambda

B. Text composable cannot be used inside content

C. topBar should be a lambda: topBar = { TopAppBar(...) }

D. TopAppBar title must be a string, not a composable

Solution

1. Step 1: Check topBar parameter type

   topBar expects a composable lambda, so it must be passed as topBar = { TopAppBar(...) }.

2. Step 2: Verify content usage

   The content lambda correctly uses the padding parameter to prevent overlap with the top bar.

3. Final Answer:

   topBar should be a lambda: topBar = { TopAppBar(...) } -> Option C

4. Quick Check:

   topBar = { ... } required for composables [OK]

Hint: Always wrap topBar content in curly braces { } [OK]

Common Mistakes:

• Passing composable directly without lambda
• Ignoring padding parameter in content
• Misunderstanding title parameter type

5. You want to create a screen with a TopAppBar that has a title and an action icon button on the right. Which of the following code snippets correctly implements this inside a Scaffold?

hard

A. Scaffold(topBar = TopAppBar(title = { Text("Home") }, actions = { IconButton(onClick = {}) { Icon(Icons.Default.Favorite) } }))

B. Scaffold(topBar = { TopAppBar(title = "Home", actions = IconButton(onClick = {}) { Icon(Icons.Default.Favorite) }) })

C. Scaffold(topBar = { TopAppBar(title = { Text("Home") }, action = IconButton(onClick = {}) { Icon(Icons.Default.Favorite) }) })

D. Scaffold(topBar = { TopAppBar(title = { Text("Home") }, actions = { IconButton(onClick = {}) { Icon(Icons.Default.Favorite, contentDescription = "Favorite") } }) })

Solution

1. Step 1: Confirm topBar lambda syntax

   topBar must be a lambda: topBar = { ... } wrapping TopAppBar composable.

2. Step 2: Check TopAppBar parameters

   Title must be a composable lambda: title = { Text("Home") } and actions is a lambda with IconButton inside.

3. Step 3: Validate IconButton usage

   IconButton requires onClick lambda and Icon with contentDescription for accessibility.

4. Final Answer:

   Scaffold(topBar = { TopAppBar(title = { Text("Home") }, actions = { IconButton(onClick = {}) { Icon(Icons.Default.Favorite, contentDescription = "Favorite") } }) }) -> Option D

5. Quick Check:

   topBar and actions use lambdas with composables [OK]

Hint: Use lambdas for title and actions in TopAppBar [OK]

Common Mistakes:

• Passing title or actions as direct values, not lambdas
• Omitting contentDescription in Icon
• Not wrapping topBar in a lambda