Top app bars display information and actions at the top of a screen. This Top App Bar has slots for a title, navigation icon, and actions.
title - the title to be displayed in the top app bar.
navigation Icon - the navigation icon displayed at the start of the top app bar. This should typically be an Icon Button or Icon Toggle Button.
actions - the actions displayed at the end of the top app bar. This should typically be Icon Buttons. The default layout here is a Row, so icons inside will be placed horizontally.
Scaffold
The Scaffold widget implements the basic material design visual layout structure in a jetpack compose application. Scaffold widget provides API to insert several material components to construct app screen such as Top App Bar, Bottom App Bar, Floating Action Button, etc. So that, we can show a Floating Action Button in our jetpack compose application using the Scaffold ‘floating Action Button’ parameter. Simply we can pass a Floating Action Button instance to this parameter to show a floating action button on our mobile device screen.
Also Read How to create compose check box
MainAcivity.kt
Copy this code →
package com.example.collapsingtoolbarcompose
import...
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackCompose3Theme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
MainContent()
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetpackCompose3Theme {
MainContent()
}
}
}
MainContent
Copy this code →
package com.example.collapsingtoolbarcompose
import....
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainContent(){
val result = remember { mutableStateOf("") }
val selectedItem = remember { mutableStateOf("share")}
val fabShape = RoundedCornerShape(50)
Scaffold(
topBar = {
TopAppBar(
title = {
Text(text = "Bottom app bar + FAB")
},
navigationIcon = {
IconButton(
onClick = {
result.value = "Drawer icon clicked"
}
) {
Icon(imageVector =Icons.Filled.Menu,
contentDescription = "")
}
},
)
},
content = {
Box(
Modifier
.background(Color(0XFFE3DAC9))
.padding(16.dp)
.fillMaxSize(),
) {
Text(
text = result.value,
fontSize = 22.sp,
fontFamily = FontFamily.Serif,
modifier = Modifier.align(Alignment.Center)
)
}
},
floatingActionButton = {
FloatingActionButton(
onClick = {result.value = "FAB clicked"},
shape = fabShape,
) { Icon(Icons.Filled.Add,"")
}
},
floatingActionButtonPosition = FabPosition.End,
bottomBar = {
BottomAppBar(
//cutoutShape = fabShape,
content = {
NavigationBarItem(
icon = {
Icon(Icons.Filled.Favorite , "")
},
label = { Text(text = "Favorite")},
selected = selectedItem.value == "favorite",
onClick = {
result.value = "Favorite icon clicked"
selectedItem.value = "favorite"
},
alwaysShowLabel = false
)
NavigationBarItem(
icon = {
Icon(Icons.Filled.Share , "")
},
label = { Text(text = "Share")},
selected = selectedItem.value == "share",
onClick = {
result.value = "Share icon clicked"
selectedItem.value = "share"
},
alwaysShowLabel = false
)
}
)
}
)
}
@Preview
@Composable
fun ComposablePreview(){
MainContent()
}
OUTPUT :-
