Material 3 Scaffold in Jetpack Compose

Get started with Material 3 scaffold in Jetpack Compose to create user-friendly interfaces for structuring UI with app bars and a floating action button.

Explore Scaffold Style

Learn to implement a Material 3 scaffold for structuring app UI.

Standard Scaffold

Structures UI with app bars and a floating action button.

@Composable
fun ScaffoldExample() {
    // Creates a scaffold with app bars and a floating action button
    var presses by remember { mutableIntStateOf(0) } // Tracks button presses
    Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer, // Sets top bar background color
                    titleContentColor = MaterialTheme.colorScheme.primary // Sets title text color
                ),
                title = {
                    Text("Top app bar") // Sets top bar title
                }
            )
        }, // Defines top app bar
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer, // Sets bottom bar background color
                contentColor = MaterialTheme.colorScheme.primary // Sets bottom bar text color
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar" // Sets bottom bar text
                )
            }
        }, // Defines bottom app bar
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Default.Add, contentDescription = "Add") // Defines FAB icon
            }
        } // Defines floating action button
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding), // *Required: Applies scaffold padding
            verticalArrangement = Arrangement.spacedBy(16.dp) // Adds spacing between items
        ) {
            Text(
                modifier = Modifier.padding(8.dp), // Adds text padding
                text =
                """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button $presses times.
                """.trimIndent() // *Required: Defines main content
            )
        }
    }
}
  

Examples:

• Structure a main screen in a productivity app
• Organize navigation in a social media app
• Present key actions in a note-taking app

---

Scaffold Properties

Understand the key properties used in the scaffold example.

Property	Usage
content*	Required: Defines the main content, like a Column with Text
topBar	Defines the top app bar, like TopAppBar with a title
bottomBar	Defines the bottom app bar, like BottomAppBar with text
floatingActionButton	Defines the floating action button, like FloatingActionButton with an icon
modifier	Customizes content layout, like applying padding from innerPadding
verticalArrangement	Sets spacing between content items (e.g., spacedBy(16.dp))
contentColor	Sets the text color for app bars (e.g., primary color)
containerColor	Sets the background color for app bars (e.g., primaryContainer)
contentDescription	Describes the FAB icon for accessibility (e.g., "Add")