Jetpack Compose TopAppBar
The Jetpack Compose TopAppBar is a Material Design component that represents the top app bar (formerly known as the action bar or toolbar in the view system). In Jetpack Compose, this component is implemented as a composable function that you can easily add to your application's UI hierarchy.
The basic Jetpack Compose TopAppBar includes:
- A title area that displays the screen title
- Optional navigation icon (typically a menu or back button)
- Optional actions that appear in the top-right area
Let's look at the properties that make up the Jetpack Compose TopAppBar:
Key Properties of Jetpack Compose TopAppBar
The Jetpack Compose TopAppBar offers several properties that allow you to customize its appearance and behavior:
1. Title
The title property is where you specify the main text displayed in your Jetpack Compose TopAppBar.
TopAppBar(
title = { Text("My Application") }
)
2. NavigationIcon
The navigationIcon parameter allows you to add an icon, typically on the left side of the Jetpack Compose TopAppBar. This is commonly used for a back button or drawer menu icon:
TopAppBar(
title = { Text("My Application") },
navigationIcon = {
IconButton(onClick = { /* Handle navigation icon click */ }) {
Icon(Icons.Filled.Menu, contentDescription = "Menu")
}
}
)
3. Actions
The actions parameter lets you add action icons to the right side of your Jetpack Compose TopAppBar:
TopAppBar(
title = { Text("My Application") },
actions = {
IconButton(onClick = { /* Handle search click */ }) {
Icon(Icons.Filled.Search, contentDescription = "Search")
}
IconButton(onClick = { /* Handle more options click */ }) {
Icon(Icons.Filled.MoreVert, contentDescription = "More options")
}
}
)
4. Colors
You can customize the colors of your Jetpack Compose TopAppBar using the backgroundColor and contentColor parameters:
TopAppBar(
title = { Text("My Application") },
backgroundColor = MaterialTheme.colors.primary,
contentColor = MaterialTheme.colors.onPrimary
)
5. Elevation
The elevation parameter controls the shadow depth beneath the Jetpack Compose TopAppBar:
TopAppBar(
title = { Text("My Application") },
elevation = 4.dp
)
Types of Jetpack Compose TopAppBar
Jetpack Compose offers different variants of the TopAppBar to meet various design requirements:
1. Standard TopAppBar
This is the default Jetpack Compose TopAppBar that we've been discussing so far:
TopAppBar(
title = { Text("Standard TopAppBar") },
navigationIcon = {
IconButton(onClick = { /* Handle navigation */ }) {
Icon(Icons.Filled.ArrowBack, contentDescription = "Back")
}
}
)
2. Small TopAppBar
The Small TopAppBar is similar to the standard one but with specific height and styling guidelines that match Material Design specifications:
SmallTopAppBar(
title = { Text("Small TopAppBar") },
navigationIcon = {
IconButton(onClick = { /* Handle navigation */ }) {
Icon(Icons.Filled.ArrowBack, contentDescription = "Back")
}
}
)
3. Medium TopAppBar
The Medium TopAppBar provides more vertical space with the title position adjusted accordingly:
MediumTopAppBar(
title = { Text("Medium TopAppBar") },
navigationIcon = {
IconButton(onClick = { /* Handle navigation */ }) {
Icon(Icons.Filled.ArrowBack, contentDescription = "Back")
}
}
)
4. Large TopAppBar
The Large TopAppBar offers even more vertical space with a larger title:
LargeTopAppBar(
title = { Text("Large TopAppBar") },
navigationIcon = {
IconButton(onClick = { /* Handle navigation */ }) {
Icon(Icons.Filled.ArrowBack, contentDescription = "Back")
}
}
)
5. CenterAlignedTopAppBar
The CenterAlignedTopAppBar centers the title in the Jetpack Compose TopAppBar:
CenterAlignedTopAppBar(
title = { Text("Centered TopAppBar") },
navigationIcon = {
IconButton(onClick = { /* Handle navigation */ }) {
Icon(Icons.Filled.ArrowBack, contentDescription = "Back")
}
}
)
Working with Scroll Behavior
One of the powerful features of the Jetpack Compose TopAppBar is its ability to respond to scroll events, creating dynamic and interactive interfaces. The Jetpack Compose TopAppBar can collapse, expand, or change appearance as the user scrolls through content.
To implement scroll behavior with your Jetpack Compose TopAppBar, you'll need to use the scrollBehavior parameter:
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
Scaffold(
topBar = {
TopAppBar(
title = { Text("Scrollable TopAppBar") },
scrollBehavior = scrollBehavior
)
},
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
) {
// Your scrollable content here
}
Common scroll behaviors in Jetpack Compose TopAppBar include:
-
enterAlwaysScrollBehavior: The Jetpack Compose TopAppBar will scroll up and out of view when scrolling down, and immediately return when scrolling up.
-
exitUntilCollapsedScrollBehavior: The Jetpack Compose TopAppBar will scroll up until it reaches its collapsed state, then stay visible.
-
pinnedScrollBehavior: The Jetpack Compose TopAppBar will stay pinned at the top of the screen regardless of scroll position.
Customizing Jetpack Compose TopAppBar with Themes
You can customize the default appearance of all Jetpack Compose TopAppBar instances in your application by modifying your theme:
@Composable
fun MyAppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) {
darkColors(
primary = Purple200,
primaryVariant = Purple700,
secondary = Teal200
)
} else {
lightColors(
primary = Purple500,
primaryVariant = Purple700,
secondary = Teal200
)
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
Complete Example of Jetpack Compose TopAppBar Implementation
Let's put everything together in a complete example that demonstrates how to implement a Jetpack Compose TopAppBar in a real application scenario:
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyAppScreen() {
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
Scaffold(
topBar = {
TopAppBar(
title = { Text("My Awesome App") },
navigationIcon = {
IconButton(onClick = { /* Handle navigation click */ }) {
Icon(Icons.Filled.Menu, contentDescription = "Menu")
}
},
actions = {
IconButton(onClick = { /* Handle search click */ }) {
Icon(Icons.Filled.Search, contentDescription = "Search")
}
IconButton(onClick = { /* Handle favorite click */ }) {
Icon(Icons.Filled.Favorite, contentDescription = "Favorite")
}
IconButton(onClick = { /* Handle share click */ }) {
Icon(Icons.Filled.Share, contentDescription = "Share")
}
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
),
scrollBehavior = scrollBehavior
)
},
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
) { innerPadding ->
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(innerPadding)
) {
// Generate sample items for demonstration
items(50) { index ->
Text(
text = "Item $index",
modifier = Modifier.padding(16.dp)
)
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun DetailScreenExample() {
MaterialTheme {
Scaffold(
topBar = {
TopAppBar(
title = { Text("Product Details") },
navigationIcon = {
IconButton(onClick = { /* Handle back navigation */ }) {
Icon(Icons.Filled.ArrowBack, contentDescription = "Back")
}
},
actions = {
IconButton(onClick = { /* Handle favorite click */ }) {
Icon(Icons.Filled.Favorite, contentDescription = "Favorite")
}
IconButton(onClick = { /* Handle share click */ }) {
Icon(Icons.Filled.Share, contentDescription = "Share")
}
}
)
}
) { innerPadding ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(innerPadding)
.padding(16.dp)
) {
Text("Product details content would go here")
}
}
}
}
This example demonstrates a complete implementation of the Jetpack Compose TopAppBar in two different scenarios:
- A main screen with a menu icon, search, favorite, and share actions
- A detail screen with a back button, favorite, and share actions
With this knowledge of the Jetpack Compose TopAppBar, you can now create sophisticated, responsive app bars that enhance your Android application's navigation and user experience.
Remember that the Jetpack Compose TopAppBar is constantly evolving as Material Design guidelines update and new features are added to Jetpack Compose. For the most up-to-date information, refer to the official Jetpack Compose documentation.