Material 3 App Bars in Jetpack Compose

Get started with Material 3 app bars in Jetpack Compose to create user-friendly interfaces for navigation and key actions.

Explore App Bar Styles

Learn to implement five Material 3 app bar types for structuring navigation and actions.

Small Top App Bar

Shows a simple top bar with a title.

@Composable
fun SmallTopAppBarExample() {
    // Creates a simple top app bar with a title
    TopAppBar(
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer, // Sets background color
            titleContentColor = MaterialTheme.colorScheme.primary // Sets title text color
        ),
        title = {
            Text("Small Top App Bar") // *Required: Sets the title
        }
    )
}
  

Use a Small Top App Bar when you want to show a simple top bar with a title.

Examples:

• Show a title in a settings screen
• Display an app name in a home screen
• Present a header in a profile page

---

Center Aligned Top App Bar

Shows a centered title with navigation and actions.

@Composable
fun CenterAlignedTopAppBarExample() {
    // Creates a top app bar with a centered title
    CenterAlignedTopAppBar(
        colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer, // Sets background color
            titleContentColor = MaterialTheme.colorScheme.primary // Sets title text color
        ),
        title = {
            Text(
                "Centered Top App Bar", // *Required: Sets the title
                maxLines = 1,
                overflow = TextOverflow.Ellipsis // Handles long titles
            )
        },
        navigationIcon = {
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    imageVector = Icons.AutoMirrored.Filled.ArrowBack, // Displays navigation icon
                    contentDescription = "Localized description" // Describes icon for accessibility
                )
            }
        }, // Adds navigation icon
        actions = {
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    imageVector = Icons.Filled.Menu, // Displays action icon
                    contentDescription = "Localized description" // Describes icon for accessibility
                )
            }
        } // Adds action icons
    )
}
  

Use a Center Aligned Top App Bar when you want to show a centered title with navigation and actions.

Examples:

• Show a title with a back button in a details screen
• Display a menu icon in a main screen
• Present navigation in a news app

---

Medium Top App Bar

Shows a title below icons with navigation and actions.

@Composable
fun MediumTopAppBarExample() {
    // Creates a top app bar with title below icons
    MediumTopAppBar(
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer, // Sets background color
            titleContentColor = MaterialTheme.colorScheme.primary // Sets title text color
        ),
        title = {
            Text(
                "Medium Top App Bar", // *Required: Sets the title
                maxLines = 1,
                overflow = TextOverflow.Ellipsis // Handles long titles
            )
        },
        navigationIcon = {
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    imageVector = Icons.AutoMirrored.Filled.ArrowBack, // Displays navigation icon
                    contentDescription = "Localized description" // Describes icon for accessibility
                )
            }
        }, // Adds navigation icon
        actions = {
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    imageVector = Icons.Filled.Menu, // Displays action icon
                    contentDescription = "Localized description" // Describes icon for accessibility
                )
            }
        } // Adds action icons
    )
}
  

Use a Medium Top App Bar when you want to show a title below icons with navigation and actions.

Examples:

• Show a title with navigation in a gallery app
• Display action icons in a productivity app
• Present a header in a messaging app

---

Large Top App Bar

Shows a spacious title below icons with navigation and actions.

@Composable
fun LargeTopAppBarExample() {
    // Creates a spacious top app bar with title below icons
    LargeTopAppBar(
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer, // Sets background color
            titleContentColor = MaterialTheme.colorScheme.primary // Sets title text color
        ),
        title = {
            Text(
                "Large Top App Bar", // *Required: Sets the title
                maxLines = 1,
                overflow = TextOverflow.Ellipsis // Handles long titles
            )
        },
        navigationIcon = {
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    imageVector = Icons.AutoMirrored.Filled.ArrowBack, // Displays navigation icon
                    contentDescription = "Localized description" // Describes icon for accessibility
                )
            }
        }, // Adds navigation icon
        actions = {
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    imageVector = Icons.Filled.Menu, // Displays action icon
                    contentDescription = "Localized description" // Describes icon for accessibility
                )
            }
        } // Adds action icons
    )
}
  

Use a Large Top App Bar when you want to show a spacious title below icons with navigation and actions.

Examples:

• Show a prominent title in a media app
• Display navigation in a dashboard app
• Present actions in a complex settings screen

---

Bottom App Bar

Shows navigation and actions at the bottom.

@Composable
fun BottomAppBarExample() {
    // Creates a bottom app bar with actions and FAB
    BottomAppBar(
        actions = {
            IconButton(onClick = { /* do something */ }) {
                Icon(Icons.Filled.Check, contentDescription = "Localized description") // Displays action icon
            }
            IconButton(onClick = { /* do something */ }) {
                Icon(Icons.Filled.Edit, contentDescription = "Localized description") // Displays action icon
            }
            IconButton(onClick = { /* do something */ }) {
                Icon(Icons.Filled.Mic, contentDescription = "Localized description") // Displays action icon
            }
            IconButton(onClick = { /* do something */ }) {
                Icon(Icons.Filled.Image, contentDescription = "Localized description") // Displays action icon
            }
        }, // *Required: Defines action icons
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /* do something */ },
                containerColor = BottomAppBarDefaults.bottomAppBarFabColor, // Sets FAB background color
                elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation() // Sets FAB elevation
            ) {
                Icon(Icons.Filled.Add, "Localized description") // Defines FAB icon
            }
        } // Adds floating action button
    )
}
  

Use a Bottom App Bar when you want to show navigation and actions at the bottom.

Examples:

• Show navigation icons in a social media app
• Display action buttons in a note-taking app
• Present a FAB in a productivity app

---

App Bar Properties

Understand the key properties used in the app bar examples.

Property	Usage
title*	Required (Top App Bars): Sets the title text
content*	Required (Bottom App Bar): Defines content via actions
navigationIcon	Adds a navigation icon, like a back arrow (Top App Bars)
actions	Adds action icons, like a menu (Top/Bottom App Bars)
floatingActionButton	Adds a FAB, like an add button (Bottom App Bar)
colors	Sets background and text colors (Top App Bars)
containerColor	Sets the background color (Bottom App Bar, FAB)
contentColor	Sets the text/icon color (Top App Bars)
contentDescription	Describes icons for accessibility
elevation	Sets the FAB shadow elevation (Bottom App Bar)