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.