How to position Floating Action Button to Left or Start in Jetpack Compose

Question

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

Drug

Answer 1

I guess this is not a good approach as we are changing the layout direction, but you can modify the layout direction from LTR to RTL using CompositionLocalProvider

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl ) {
       BottomBarSample()
}

Imco

Answer 2

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

Crossland

Answer 3

Also if you want to place the FAB in a custom location you can make use of the offset modifier.

Ex:

FloatingActionButton(
  ...
  modifier = Modifier.offset(x=16.dp, y=16.dp)
) { ... }

Theatrics