In modern Android app development, creating a seamless and intuitive user experience is paramount. One crucial component that contributes to this experience is the TopAppBar. In this blog post, we will delve into the world of Jetpack Compose and explore the capabilities and flexibility offered by the top app bar in creating stunning and functional user interfaces.
What is Top App Bar?
The top app bar is a fundamental UI element that resides at the top of the screen, providing users with quick access to essential features and navigation options. It typically contains a title, navigation icon, and various action items such as search, settings, or user profile icons.
There are four types of top app bars as per Material 3 guidelines.
- Centre-Aligned
- Small
- Medium
- Large
Creating a small TopAppBar
To create a top app bar in the jetpack compose, we will use TopAppBar composable function.
Note: By default, TopAppBar API makes the top bar width equal to the available width of the device.
Simple TopAppBar
Adding only text to the top app bar. A title
parameter where you can pass a Text
composable to display the title of your app.
TopAppBar(
title = { Text(text = "Top Bar") }
)
![image showing a text topappbar in jetpack compose](https://jetpackcomposeworld.com/wp-content/uploads/2023/06/simpletopbar-1024x167.webp)
Adding Navigation Icon
The navigationIcon
parameter allows you to specify a navigation icon, such as a menu or back arrow, which can be wrapped with an IconButton
for handling click events.
TopAppBar(
title = { Text(text = "Top Bar") },
navigationIcon = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = null
)
}
}
)
![image showing topappbar with navigation icon in jetpack compose](https://jetpackcomposeworld.com/wp-content/uploads/2023/06/appbarwithnav-1024x167.webp)
Adding Action Items
To add action items to the top app bar, the actions
parameter of TopAppBar
accepts a composable lambda. Within this lambda, you can add multiple IconButton
composables, each representing an action item. By providing an onClick
lambda, you can define the action to be performed when the user interacts with the respective action item.
TopAppBar(
title = { Text(text = "Top Bar") },
navigationIcon = {...},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.DateRange,
contentDescription = null
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.Settings,
contentDescription = null
)
}
}
)
![image showing full topappbar in jetpack compose using actions button as well.](https://jetpackcomposeworld.com/wp-content/uploads/2023/06/fulltopbar-1024x167.webp)
Adding color to TopAppBar
To add color to the top app bar, we use the color parameter of TopAppBar API.
TopAppBar(
title = { Text(text = "Top Bar") },
navigationIcon = {...},
actions = {...},
colors = TopAppBarDefaults.smallTopAppBarColors(Color.Green)
)
![colored topappbar in jetpack compose](https://jetpackcomposeworld.com/wp-content/uploads/2023/06/colortopappbar-1024x167.webp)
Note: Just passing single color to smallTopAppBarColors
function will apply that color to the container of the top app bar. But if you want to manipulate every component of the top app bar then pass in optional parameters of smallTopAppBarColors
function. Let’s take an example:
TopAppBar(
title = { Text(text = "Top Bar") },
navigationIcon = {...},
actions = {...},
colors = TopAppBarDefaults.smallTopAppBarColors(
containerColor = Color.Green,
titleContentColor = Color.Blue,
navigationIconContentColor = Color.Red,
actionIconContentColor = Color.Magenta
)
)
The name of the parameters is self-explanatory.
![image showing color for each component of topappbar](https://jetpackcomposeworld.com/wp-content/uploads/2023/06/differentcolortopappbar-1024x167.webp)
Note: As the parameters are the same for all four types of TopAppBar, we will just provide code and output images of the other top app bars.
Centre-Aligned TopAppBar
CenterAlignedTopAppBar(
title = { Text(text = "Top Bar") },
navigationIcon = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.Search,
contentDescription = null
)
}
},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.AccountCircle,
contentDescription = null
)
}
}
)
![image showing center aligned topappbar in jetpack compose](https://jetpackcomposeworld.com/wp-content/uploads/2023/06/centertopappbar-1024x167.webp)
Medium TopAppBar
MediumTopAppBar(
title = { Text(text = "Top Bar")},
navigationIcon = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = null
)
}
},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.DateRange,
contentDescription = null
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.AccountCircle,
contentDescription = null
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.Settings,
contentDescription = null
)
}
}
)
![image showing medium topappbar](https://jetpackcomposeworld.com/wp-content/uploads/2023/06/mediumrtopappbar-1024x292.webp)
Large TopAppBar
LargeTopAppBar(
title = { Text(text = "Top Bar")},
navigationIcon = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = null
)
}
},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.DateRange,
contentDescription = null
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.AccountCircle,
contentDescription = null
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.Settings,
contentDescription = null
)
}
}
)
![image showing large topappbar](https://jetpackcomposeworld.com/wp-content/uploads/2023/06/largetopappbar-1024x396.webp)
Note: To use the top app bar in your app, you will use a scaffold layout. If you don’t know how to use scaffold then check out my previous post on Scaffold. Links are given below.
In this blog post, we have explored the basics of creating a top app bar in Jetpack Compose. By diving deeper into the available options, customizations, and advanced features, you can take full advantage of this powerful UI element and create stunning user interfaces for your Android apps.
Some Useful Links
Happy Coding 🙂