When to use Material3 toolbar
- This is used when we need to distinguish between the screens we are at
- We also notice when used with a list-composable, when we slowly scroll the toolbar color lightens. This is a match with material-3 standards.
- The toolbar contains actions like
back-action on the left and any other actions on right similar to menu that we had in xml.
Light Theme |
 |
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScreenContent(modifier: Modifier = Modifier) {
Column(
modifier = Modifier,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
// State for the snack-bar
val snackBarHostState = remember { SnackbarHostState() }
val coroutineScope = rememberCoroutineScope()
// Scroll behaviour
val scrollBehaviour = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
modifier = Modifier
.fillMaxSize()
.nestedScroll(scrollBehaviour.nestedScrollConnection),
topBar = {
TopAppBar(
title = {
Text(text = "Hello")
},
navigationIcon = {
IconButton(onClick = {
coroutineScope.launch {
snackBarHostState.showSnackbar(
message = "Navigate back clicked",
duration = SnackbarDuration.Short
)
}
}) {
Icon(
imageVector = Icons.Default.ArrowBackIosNew,
contentDescription = "Navigate back"
)
}
},
actions = {
IconButton(onClick = {
coroutineScope.launch {
snackBarHostState.showSnackbar(
message = "Light Mode clicked",
duration = SnackbarDuration.Short
)
}
}) {
Icon(
imageVector = Icons.Default.LightMode,
contentDescription = "Light Mode"
)
}
IconButton(onClick = {
coroutineScope.launch {
snackBarHostState.showSnackbar(
message = "Dark Mode clicked",
duration = SnackbarDuration.Short
)
}
}) {
Icon(
imageVector = Icons.Default.DarkMode,
contentDescription = "Dark Mode"
)
}
},
scrollBehavior = scrollBehaviour
)
},
snackbarHost = {
SnackbarHost(hostState = snackBarHostState)
}
) { values ->
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(values)
) {
items(100) {
Text(
modifier = Modifier.padding(16.dp),
text = "Row No -> $it"
)
}
}
}
}
}