Exploring Drawers in Jetpack Compose
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 ModalDrawerLayout:
DrawerState is an enum which has two values Open and 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 drawerState and onStateChange and then we build up the UI for drawerContent and 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.
Exploring BottomDrawerLayout
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 drawerContent and bodyContent. How 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.
