18

I have been trying to implement navigation drawer in Jetpack compose. The following code shows a simple way to do it:

@Composable
fun ModalDrawerSample() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            Column {
                Text("Text in Drawer")
                Button(onClick = {
                    scope.launch {
                        drawerState.close()
                    }
                }) {
                    Text("Close Drawer")
                }
            }
        },
        content = {
            Column {
                Text("Text in Bodycontext")
                Button(onClick = {

                    scope.launch {
                        drawerState.open()
                    }

                }) {
                    Text("Click to open")
                }
            }
        }
    )
}

But how do I make navigation drawer open from right to left?

1 Answer 1

22

You can use LocalLayoutDirection providing a LayoutDirection.Rtl value.

Something like:

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl ) {
    ModalDrawer(
        drawerState = drawerState,
        drawerContent = { /* ...*/ },
        content = { /* ..*/ }
    )
}

enter image description here

7
  • 6
    doing that caused my layout to get inverted right to left, too. Commented Jun 17, 2021 at 11:08
  • 6
    Solved it by additionally using "CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr)" inside content parameter. Commented Jun 17, 2021 at 11:18
  • 3
    How to implement two drawer from left and right
    – Rahul
    Commented Aug 7, 2021 at 2:48
  • 4
    I combined Gabriele and Sparsh's posts and found that I needed to wrap the drawerContent with a Column first, since the Rtl was applied to the Column that is used under the hood. I created a gist with what I have so far, including a screenshot: gist.github.com/free2bcreative/7c9befbeaf0b6155b3b83d43af968b01
    – free2ask
    Commented Jan 11, 2023 at 18:05
  • 3
    This is rather a hack than an actual solution. Commented Feb 11, 2023 at 9:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.