Jetpack Compose Show and Hide TopAppBar at Each Screen

November 7, 2021

I recommend to put TopAppBar at each screen (if necessary), rather than sharing a common TopAppBar and modify it based on whichever screen is shown.

If you are using a main screen with BottomNavigation and TopAppBar, you need to hide both the BottomNavigation and TopAppBar when a new screen is shown. Refer to Hide BottomNavigation When Navigate to New Screen.

In main screen with BottomNavigation, you would probably use a Scaffold to position TopAppBar.

@Composable
fun JourneyApp(
    val navController = rememberNavController()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Hello") },
                navigationIcon = {
                    IconButton(onClick = { onBack() }) {
                        Icon(
                            imageVector = Icons.Filled.ArrowBack,
                            contentDescription = "Navigate Up",
                            // tint = MaterialTheme.colors.primary
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { navController.navigate("importPhoto") }) {
                        Icon(
                            // imageVector = Icons.Filled.Person,
                            painterResource(id = R.drawable.ic_baseline_perm_media_24),
                            contentDescription = "Import Photos"
                        )
                    }
                }
            )
        },
        bottomBar = {
            BottomNavigation { ... }
        }
    } {
        ...
    }

In other screen, you can also use a Scaffold to put TopAppBar (remember to hide TopAppBar in main screen). A Scaffold can be in another Scaffold.

Else, you can just use a Column layout to put TopAppBar. I have yet to figure out what is the differences/advantages of using a Scaffold vs normal layout to position TopAppBar.

@Composable
fun NewScreen(
    onBack: () -> Unit,
    navigateToImportPhoto: () -> Unit
) {
    Column {
        TopAppBar(
            title = { Text("Hello") },
            navigationIcon = {
                IconButton(onClick = { onBack() }) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        contentDescription = "Navigate Up",
                        // tint = MaterialTheme.colors.primary
                    )
                }
            },
            actions = {
                IconButton(onClick = { navigateToImportPhoto() }) {
                    Icon(
                        // imageVector = Icons.Filled.Person,
                        painterResource(id = R.drawable.ic_baseline_perm_media_24),
                        contentDescription = "Import Photos"
                    )
                }
            }
        )
        LazyColumn() {
            items((1..10)) { index ->
                Text("Item #${index}")
            }
        }
    }
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.