CODEWITHSUNDEEP
androidandroid-jetpack-composefloating-action-buttonandroid-layout-direction
Richard Víquez Pérez
Richard Víquez Pérez

Reputation: 250

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

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 : enter image description here

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

Upvotes: 10

Views: 10441

Answers (3)

Achintha Isuru
Achintha Isuru

Reputation: 3307

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)
) { ... }

Upvotes: 2

Thracian
Thracian

Reputation: 66869

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

Upvotes: 4

z.g.y
z.g.y

Reputation: 6217

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

enter image description here

Upvotes: 2

Related Questions