Jetpack Compose Show and Hide TopAppBar at Each Screen

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.

@Composablefun 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.

@Composablefun 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}")            }        }    }}

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.