In this blog post we will learn how to use different types of drawers in Jetpack Compose.
If you are interested in exploring other components in Jetpack Compose you can check out the series of articles that I have written.
Series Pit Stops
- How to make a Scrollable list in Jetpack Compose?
- Handling Clicks in Jetpack Compose
- Creating AppBars in Jetpack Compose
- How to use Tabs in Jetpack Compose?
- Exploring Drawers in Jetpack Compose (You are here)
- Exploring AdapterList in Jetpack Compose
- Animations in Jetpack Compose using Transition
There are two types of drawers in Jetpack Compose:
ModalDrawerLayoutis used to implement the Navigation drawer.
BottomDrawerLayoutis used to implement Bottom Sheets.
Let’s explore these drawers one by one
Here’s the method signature of
DrawerState is an enum which has two values
Closed, this is used to tell us the default state of our drawer whether it is open or closed.
onStateChange is a lambda which gets invoked when the state of the drawer is being changed like when we are swiping the drawer to open or close it.
gesturesEnabled tells us whether the swiping of drawers should be enabled or disabled.
drawerContent is a composable where you can define how the drawer looks when it is opened.
bodyContent is where we define our rest of the UI.
drawerContent will always be drawn on top of
bodyContent so this is something that we don’t need to worry about. Let’s have a look at an example.
In the above example we provide the drawer with the initial value of
onStateChange and then we build up the UI for
bodyContent. For the sake of brevity I did not add the UI code in the above code snippet. How
ModalDrawerLayout looks can be seen in the GIF below.
If you want to implement Bottom Sheets in Jetpack Compose you can use
BottomDrawerLayout. Let’s have a look at its method signature.
The method signature is same as that of
ModalDrawerLayout. The difference between these two components is that in one you can swipe the drawer from left to right and the other is used to swipe in up down manner. Let’s have a look at an example.
Again this is similar to
ModalDrawerLayout, we specify the initial state of the drawer and then build up the UI for
BottomDrawerLayout looks can be seen in the GIF below.
I had a lot of fun exploring different types of drawers and just like any other component in Jetpack Compose, it was really easy and if you compare the amount of code that is required to make these components with the code you would have to write in XML, you will realise how quickly you can make layouts in Jetpack Compose!
Jetpack Compose is still in developer preview, there will be breaking changes in the future so some of the things that I mentioned might change over time.
Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others!
If you have any kind of feedback, feel free to connect with me on Twitter.