How to Implement TopAppBar in Jetpack Compose?

In this article, we will learn how to implement TopAppBar in Jetpack Compose. If you are familiar with XML layouts, it is the Toolbar.

Prerequisites:

• Jetpack Compose State
• Row, Column, and Box Layouts

This article talks about the Material 2 TopAppBar. If you want the latest Material 3 version, follow this link.

What is TopAppBar in Android?

The top app bar provides the information about the content and actions related to the current screen. It is used for branding, screen titles, navigation, and actions.

Example:

Let’s see how to implement it in the Android Studio.

First, create an empty Compose project and open MainActivity. Create a composable called MyUI() and call it from the onCreate().

// add the following packages
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material.icons.outlined.MoreVert
import androidx.compose.material.icons.outlined.Search
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
private fun MyUI() {
    
}

We will write our code in the MyUI().

Jetpack Compose has a prebuilt TopAppBar() API.

@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
) 

It takes multiple parameters:

title – Title to be displayed. We use the Text() composable.

modifier – The modifier to be applied.

navigationIcon – The navigation icon to be displayed at the start. This should typically be an IconButton or IconToggleButton.

actions – The actions displayed at the end. These are the icons that are arranged in a row.

backgroundColor – The background color for the TopAppBar. Use Color.Transparent to have no color.

contentColor – The preferred color for the children.

elevation – The shadow behind the app bar.

TopAppBar Example:

The title is a mandatory parameter. To add it, use the Text() composable.

@Composable
fun MyUI() {
    TopAppBar(
        title = {
            Text(text = "SemicolonSpace")
        }
    )
}

Output:

Related: 5 Simple Text Animations in Jetpack Compose

Navigation Icon:

The navigationIcon parameter provides the functionality to add an icon at the start of the top app bar. Generally, there are two use cases:

1. Display a menu icon to open the navigation drawer.
2. An arrow icon for the back button.

1. Menu Icon:

You need to add material icon dependency to get the icons.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    TopAppBar(
        title = {
            Text(text = "SemicolonSpace")
        },
        navigationIcon = {
            IconButton(onClick = {
                Toast.makeText(contextForToast, "Navigation Icon Click", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(imageVector = Icons.Filled.Menu, contentDescription = "Navigation icon")
            }
        }
    )
}

Output:

Related: IconButton in Jetpack Compose (with Examples)

2. Back Button:

For the back icon, simply change the Menu to ArrowBack.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    TopAppBar(
        title = {
            Text(text = "SemicolonSpace")
        },
        navigationIcon = {
            IconButton(onClick = {
                Toast.makeText(contextForToast, "Back Icon Click", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = "Go Back")
            }
        }
    )
}

Output:

Actions:

The actions parameter helps us to add icons at the end of the TopAppBar. By default, they are arranged in a row.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    TopAppBar(
        title = {
            Text(text = "SemicolonSpace")
        },
        actions = {
            // search icon
            IconButton(onClick = {
                Toast.makeText(contextForToast, "Search Click", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(imageVector = Icons.Outlined.Search, contentDescription = "Search")
            }

            // lock icon
            IconButton(onClick = {
                Toast.makeText(contextForToast, "Lock Click", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(imageVector = Icons.Outlined.Lock, contentDescription = "Lock")
            }
        }
    )
}

Output:

TopAppBar with OverFlowMenu:

Currently, there is no support for the overflow menu. But, there is a work around. Jetpack Compose provides DropdownMenu. We can add it to the our app bar and adjust its position.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    var dropDownMenuExpanded by remember {
        mutableStateOf(false)
    }

    TopAppBar(
        title = {
            Text(text = "SemicolonSpace")
        },
        actions = {
            // search icon
            IconButton(onClick = {
                Toast.makeText(contextForToast, "Search Click", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(imageVector = Icons.Outlined.Search, contentDescription = "Search")
            }

            // lock icon
            IconButton(onClick = {
                Toast.makeText(contextForToast, "Lock Click", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(imageVector = Icons.Outlined.Lock, contentDescription = "Lock")
            }

            // options icon (vertical dots)
            IconButton(onClick = {
                // show the drop down menu
                dropDownMenuExpanded = true
            }) {
                Icon(imageVector = Icons.Outlined.MoreVert, contentDescription = "Options")
            }

            // drop down menu
            DropdownMenu(
                expanded = dropDownMenuExpanded,
                onDismissRequest = {
                    dropDownMenuExpanded = false
                },
                // play around with these values
                // to position the menu properly
                offset = DpOffset(x = 10.dp, y = (-60).dp)
            ) {
                // this is a column scope
                // items are added vertically

                DropdownMenuItem(onClick = {
                    Toast.makeText(contextForToast, "Refresh Click", Toast.LENGTH_SHORT)
                        .show()
                    dropDownMenuExpanded = false
                }) {
                    Text("Refresh")
                }

                DropdownMenuItem(onClick = {
                    Toast.makeText(contextForToast, "Settings Click", Toast.LENGTH_SHORT)
                        .show()
                    dropDownMenuExpanded = false
                }) {
                    Text("Settings")
                }

                DropdownMenuItem(onClick = {
                    Toast.makeText(contextForToast, "Send Feedback Click", Toast.LENGTH_SHORT)
                        .show()
                    dropDownMenuExpanded = false
                }) {
                    Text("Send Feedback")
                }
            }
        }
    )
}

Run the app and tap on the vertical dots icon. You will see the drop-down menu.

TopAppBar Colors:

There are two parameters to change the app bar colors:

backgroundColor – for background.

contentColor – for title and icons.

For more information about the colors, look at the theme colors article.

@Composable
private fun MyUI() {
    TopAppBar(
        title = {
            Text(text = "SemicolonSpace")
        },
        backgroundColor = Color.Green,
        contentColor = Color.White
    )
}

Output:

Related: How to Create Gradient Backgrounds in Jetpack Compose?

TopAppBar with Transparent Background:

We can make the top app bar transparent by setting Color.Transparent as the background color. But, you won’t be happy with the output.

@Composable
private fun MyUI() {
    TopAppBar(
        title = { Text(text = "SemicolonSpace") },
        backgroundColor = Color.Transparent
    )
}

Output:

There is an elevation around it. We can fix it in 2 ways:

1. Instead of setting Color.Transparent, set the background color. In the above case, it is white.

@Composable
private fun MyUI() {
    TopAppBar(
        title = { Text(text = "SemicolonSpace") },
        backgroundColor = Color.White
    )
}

Output:

2. Remove the elevation.

@Composable
private fun MyUI() {
    TopAppBar(
        title = { Text(text = "SemicolonSpace") },
        backgroundColor = Color.Transparent,
        elevation = 0.dp
    )
}

Output:

Custom TopAppBar:

There is another overload of TopAppBar():

@Composable
fun TopAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

It doesn’t provide slots for title, navigation icon, and trailing actions. It is used to create app bars with a custom layout. Let’s set the title at the center using it.

@Composable
fun MyUI() {

    TopAppBar {
        // this is row scope
        // add your layout here
        Row(
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(
                text = "SemicolonSpace",
                fontWeight = FontWeight.Bold,
                fontSize = 20.sp
            )
        }
    }
}

Output:

This is all about TopAppBar in Jetpack Compose. I hope you have learned new things. If you have any doubts, comment below.

Related Articles:

References:

• Material Design
• Android Docs