Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add drawer toggle button in Jetpack compose

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") }
      )
    },
  ) {}

like image 743
Mahdi-Malv Avatar asked Sep 04 '20 09:09

Mahdi-Malv


People also ask

What is Scaffold state in jetpack compose?

A Scaffold is a layout which implements the basic material design layout structure. You can add things like a TopBar, BottomBar, FAB or a Drawer.

Is jetpack compose a library?

Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.


1 Answers

Use rememberScaffoldState() to modify drawer state.

  1. create a variable:
val state = rememberScaffoldState()
val scope = rememberCoroutineScope() // in 1.0.0-beta `open()` and `close` are suspend functions
  1. Pass the state to Scaffold
Scaffold(
   scaffoldState = state,
   // ...
)
  1. Use state.drawerState.open() or state.drawerState.close() in an onClick to open/close the drawer.

  2. 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
}
like image 121
Mahdi-Malv Avatar answered Oct 02 '22 14:10

Mahdi-Malv