Add drawer toggle button in Jetpack compose

Question

I want to add the hamburger icon to the Appbar and open/close drawer using the icon.

How would I achieve this?

Scaffold(
    drawerShape = RoundedCornerShape(topRight = 10.dp, bottomRight = 10.dp),
    drawerElevation = 5.dp,
    drawerContent = {
      // Drawer
    },
    topBar = {
      TopAppBar(
        navigationIcon = {
          Icon(
            Icons.Default.Menu,
            modifier = Modifier.clickable(onClick = {
              // Open drawer => How?
            })
          )
        },

        modifier = Modifier
          .fillMaxWidth()
          .clip(RoundedCornerShape(bottomLeft = 10.dp, bottomRight = 10.dp)),
        title = { Text(text = "Hello") }
      )
    },
  ) {}

Mahdi-Malv · Accepted Answer · 2021-03-19T10:50:47.710

16

Use rememberScaffoldState() to modify drawer state.

create a variable:

val state = rememberScaffoldState()
val scope = rememberCoroutineScope() // in 1.0.0-beta `open()` and `close` are suspend functions

Pass the state to Scaffold

Scaffold(
   scaffoldState = state,
   // ...
)

Use state.drawerState.open() or state.drawerState.close() in an onClick to open/close the drawer.
Create an Icon for navigationIcon in TopAppBar:

val state = rememberScaffoldState()
Scaffold(
  scaffoldState = state,
  topBar = {
    TopAppBar(
      title = { Text(text = "AppBar") },
      navigationIcon = {
        Icon(
          Icons.Default.Menu,
          modifier = Modifier.clickable(onClick = {
            scope.launch { if(it.isClosed) it.open() else it.close() }
          })
        )
      }
    )
  },
  drawerShape = RoundedCornerShape(topRight = 10.dp, bottomRight = 10.dp),
  drawerContent = {
    Text(text = "Drawer")
  }
) {
   // Scaffold body
}

edited Mar 19 '21 at 10:50

answered Sep 04 '20 at 11:27

Mahdi-Malv

16,677
10
70
117

What does `rememberScaffoldState` does? – wonsuc Sep 28 '20 at 10:40
It's an internal state in the Scaffold composable. [Reference](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#rememberscaffoldstate) – Mahdi-Malv Sep 28 '20 at 11:46
what is "it"??? – Yash Mar 16 '23 at 15:24
Been a long time. But I think `state.drawerState` – Mahdi-Malv Mar 17 '23 at 16:05

Gabriele Mariotti · Answer 2 · 2022-11-21T22:48:46.120

You can use:

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { Text("Drawer content") },
    topBar = {
        TopAppBar(
           modifier = Modifier
            .clip(RoundedCornerShape(bottomStart = 8.dp, bottomEnd = 8.dp))
        ) {
            IconButton(
                onClick = {
                    scope.launch { scaffoldState.drawerState.open() }
                }
            ) {
                Icon(Icons.Filled.Menu,"")
            }
        }
    },
    content = {
        //bodyContent()
    })

Add drawer toggle button in Jetpack compose

2 Answers2