How to add a TopAppBar in Jetpack Compose

In Jetpack Compose, TopAppBar is a pre-defined UI component that represents the top app bar in a user interface. It is part of the Material Design components and provides a standard way to include a top app bar in your Android app.

First add the following dependencies in build.gradle(Module: App) if you don’t have them.

dependencies {
    implementation 'androidx.compose.ui:ui:1.5.4'
    implementation 'androidx.compose.material:material:1.5.4'
    
    //Use this in .kts
    //implementation ("androidx.compose.ui:ui:1.5.4")
    //implementation ("androidx.compose.material:material:1.5.4")
}

Now create the CustomTopAppBar class in the components folder. And copy the following code.

import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview

/**
 * A customizable [TopAppBar] for the application.
 *
 * @param modifier Modifier for styling or positioning the [TopAppBar].
 * @param currentScreen The title to be displayed on the app bar.
 * @param showBackButton Flag indicating whether the back navigation button should be shown.
 * @param onBackButtonClick Callback for the back navigation button click event.
 */
@Composable
fun CustomTopAppBar(
    modifier: Modifier = Modifier,
    currentScreen: String = "",
    showBackButton: Boolean = true,
    onBackButtonClick: () -> Unit
) {
    TopAppBar(
        title = { Text(currentScreen) },
        modifier = modifier,
        navigationIcon = {
            if (showBackButton) {
                // Show back navigation button if allowed
                IconButton(onClick = onBackButtonClick) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        tint = Color.White,
                        contentDescription = stringResource(R.string.back_button)
                    )
                }
            }
        }
    )
}

/**
 * A preview function for [CustomTopAppBar].
 */
@Preview
@Composable
fun PreviewCustomTopAppBar() {
    // Example usage with navigation controller
    CustomTopAppBar(
                currentScreen = "TopAppBar",
                showBackButton = true,
                onBackButtonClick = {  }
            )
}

With this code you can add the currentScreen name, modifier, show or hide back button with a boolean flag and onClick event.

Add in strings.xml the following code.

<string name="back_button">Back button</string>

To use it, you should use the following code where you need it, for example:

Scaffold(
         topBar = {
                CustomTopAppBar(
                currentScreen = "TopAppBar",
                showBackButton = true,
                onBackButtonClick = {  }
            )
            }
        ) { innerPadding ->
Log.d("", innerPadding.toString())
//Add your logic here
}

Run your project, observe the results, and that’s it! Enjoy modifying this component to suit your needs. Until next time!

Bellow, you will find the URL for the project.

GitHub - munbonecci/TopAppBar: This app was created to learn more about Android compose using the…