Scaffold and TopAppBar in Android Kotlin

Introduction

Scaffold helps you build a basic app screen layout easily. TopAppBar shows a bar at the top with a title and actions.

When you want a simple screen with a top bar and content below.

When you need a consistent app bar across different screens.

When you want to add buttons or menus in the top bar.

When you want to handle screen layout with a standard structure.

Syntax

Android Kotlin

Scaffold(
  topBar = {
    TopAppBar(
      title = { Text("Title") },
      navigationIcon = { /* optional icon */ },
      actions = { /* optional buttons */ }
    )
  },
  content = { paddingValues ->
    // Your screen content here
  }
)

Scaffold arranges the screen with slots like topBar and content.

TopAppBar is placed inside topBar slot to show the app bar.

Examples

A simple scaffold with a top bar titled "Home" and text content below.

Android Kotlin

Scaffold(
  topBar = {
    TopAppBar(title = { Text("Home") })
  },
  content = { padding ->
    Text("Welcome to the home screen", Modifier.padding(padding))
  }
)

TopAppBar with a back button on the left and a title "Profile".

Android Kotlin

Scaffold(
  topBar = {
    TopAppBar(
      title = { Text("Profile") },
      navigationIcon = {
        IconButton(onClick = { /* go back */ }) {
          Icon(Icons.Default.ArrowBack, contentDescription = "Back")
        }
      }
    )
  },
  content = { padding ->
    Text("User profile details", Modifier.padding(padding))
  }
)

TopAppBar with a menu button on the right side.

Android Kotlin

Scaffold(
  topBar = {
    TopAppBar(
      title = { Text("Settings") },
      actions = {
        IconButton(onClick = { /* open menu */ }) {
          Icon(Icons.Default.MoreVert, contentDescription = "Menu")
        }
      }
    )
  },
  content = { padding ->
    Text("Settings options", Modifier.padding(padding))
  }
)

Sample App

This app shows a screen with a top bar titled "My App" and a greeting text below with proper padding.

Android Kotlin

import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: android.os.Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      MaterialTheme {
        MyApp()
      }
    }
  }
}

@Composable
fun MyApp() {
  Scaffold(
    topBar = {
      TopAppBar(
        title = { Text("My App") }
      )
    },
    content = { paddingValues ->
      Text(
        text = "Hello, Scaffold and TopAppBar!",
        modifier = Modifier.padding(paddingValues).padding(16.dp)
      )
    }
  )
}

@Preview(showBackground = true)
@Composable
fun PreviewMyApp() {
  MaterialTheme {
    MyApp()
  }
}

Important Notes

Always add padding from content parameter to avoid content under the app bar.

Use navigationIcon for back or menu buttons on the left side.

Use actions to add buttons on the right side of the app bar.

Summary

Scaffold helps create a basic screen layout with slots like topBar and content.

TopAppBar shows a bar at the top with a title and optional icons or buttons.

Use padding from content to keep content visible below the app 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