I want to create animated bottomAppBar in jetpack compose (something like image) but Fab position in jetpack compose is only center or end and i need to move FAB to left at least, my code is:
@Composable
fun BottomBarSample() {
Scaffold(
floatingActionButton = {
FloatingActionButton(
shape = CircleShape,
onClick = {},
) {
Icon(imageVector = Icons.Filled.Add, contentDescription = "icon")
}
},
floatingActionButtonPosition = FabPosition.End,
isFloatingActionButtonDocked = true,
bottomBar = {
BottomAppBar(backgroundColor = Color.Cyan, cutoutShape = CircleShape) {
}
}
){
//body
}
}
Since there is no FabPosition.Start yet using LocalLayoutDirection is easiest way to create cutout at the beginning. Other option is to create your layout using path operations or blending modes.
In this example i show how to cut out using BlendModes but if you want elevation you need to use Path by creating shape as it's done in source code
After changing layout direction to right to left you should change direction inside content, bottomBar or other lambdas you use
@Composable
fun BottomBarSample() {
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
Scaffold(
floatingActionButton = {
FloatingActionButton(
shape = CircleShape,
onClick = {},
) {
Icon(imageVector = Icons.Filled.Add, contentDescription = "icon")
}
},
floatingActionButtonPosition = FabPosition.End,
isFloatingActionButtonDocked = true,
bottomBar = {
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
BottomAppBar(backgroundColor = Color.Cyan, cutoutShape = CircleShape) {
}
}
}
) {
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
//body
}
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.