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