I want to have different topapp bars for different screens in android app but have same bottom bar
this is my current setup
@Composable
fun MainCompose(){
AppTheme {
Navigator(ProjectScreen()) {navigation ->
Scaffold(
bottomBar = {
BottomNavigationBar()
},
){innerPadding ->
SlideTransition(
navigator = navigation,
modifier = Modifier.padding(innerPadding)
)
}
}
}
}
and this is my bottom bar
@Composable
fun BottomNavigationBar() {
val navigator = LocalNavigator.currentOrThrow
BottomAppBar(
actions = {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
allScreens.forEach { navLinks ->
TextButton(onClick = {
navigator.push(navLinks.screen)
}) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
Row {
navLinks.icon()
}
Spacer(Modifier.padding(4.dp))
Row {
Text(navLinks.name, style = MaterialTheme.typography.labelMedium)
}
}
}
}
}
}
)
}
What i need is different top bar for every screen i navigate
Ex: home page top bar title say home and settings screen say settings
///////////// Edit /////////////
This is the way i did it
@Composable
fun MainCompose(){
AppTheme {
Navigator(ProjectScreen()) {navigation ->
val currentScreen = navigation.lastItem
Scaffold(
bottomBar = {
BottomNavigationBar()
},
topBar = {
TopBarForCurrentScreen(currentScreen ,navigation)
}
){innerPadding ->
SlideTransition(
navigator = navigation,
modifier = Modifier.padding(innerPadding)
)
}
}
}
}
top app bar fun
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarForCurrentScreen(currentScreen: Screen ,navigation: Navigator) {
when (currentScreen) {
is ProjectScreen -> {
TopAppBar(
navigationIcon = {
Icon(
painter = painterResource(R.drawable.project), contentDescription = "icon",
Modifier.size(20.dp)
)
},
title = {
Text(
"Projects",
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold
)
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
titleContentColor = MaterialTheme.colorScheme.onSecondaryContainer
),
actions = {
IconButton(onClick = {}) {
Icon(Icons.Filled.Search, contentDescription = "search")
}
Button (
onClick = {
navigation.push(FormScreen())
},
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
contentColor = MaterialTheme.colorScheme.onTertiaryContainer
)
) {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Column {
Icon(
Icons.Filled.Add,
contentDescription = "Create"
)
}
Column {
Text("Create")
}
}
}
}
)
}
is FormScreen -> {
TopAppBar(
navigationIcon = {
Icon(
painter = painterResource(R.drawable.form), contentDescription = "icon",
Modifier.size(20.dp)
)
},
title = {
Text(
"Forms",
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold
)
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
titleContentColor = MaterialTheme.colorScheme.onSecondaryContainer
),
)
}
else -> {
TopAppBar(
navigationIcon = {
Icon(
painter = painterResource(R.drawable.project), contentDescription = "icon",
Modifier.size(20.dp)
)
},
title = {
Text(
"Projects",
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold
)
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
titleContentColor = MaterialTheme.colorScheme.onSecondaryContainer
),
actions = {
IconButton(onClick = {}) {
Icon(Icons.Filled.Search, contentDescription = "search")
}
}
)
}
}
}