How To Studio

Navigation Drawer using Jetpack Compose | by Avinash Agarwal | Apr, 2021

Avinash Agarwal

Jetpack Compose is Google’s latest cool Android toolkit for developing native Android UI. If you haven’t tried it yet, the library is still in beta (as of April 2021), so it’s a great time to get started, but you’ll see a stable release soon.The official code lab to get started is: Basics of creation..

In this article, we’ll look at how to create a navigation drawer and use Compose’s navigation components to navigate between different screens.

First, create a UI that will be used as a drawer.


Here we have created a list of three screens for navigating the drawer. A configurable drawer is a simple column containing these three screens and the image at the top. The preview of the drawer looks like this:


Let’s create TopBar For apps:

TopBar uses a component provided by Compose to create a TopBar called TopAppBar. Pass the title and navigation icon. Clicking on the navigation icon triggers an onButtonClicked callback to open the drawer or return to the previous screen. Use this on all screens. You can customize the TopAppBar to suit your needs. Check the TopAppBar documentation for available customizations.

Next, let’s create a UI for the three screens we added to the drawer.


These three screens Help screen.The· Help The screen uses the back button instead of the TopBar menu button. Pass NavController to Help Click the back button to return to the previous screen.for Home home And account On the screen, pass the callback “openDrawer” that opens the drawer that will be called when the menu button is clicked.

Navigation host

You need a navigation host to host and navigate these screens.From Official document About navigation at the time of creation:

Creation NavHost Is required NavController Previously created rememberNavController() The route to start the graph. NavHost Creation uses the lambda syntax from Navigation Kotlin DSL Create a navigation graph.Can be added to the navigation structure using composable() Method. This method requires you to specify the routes and composables that need to be linked to the destination.

The next step is to create a NavController, but first let’s define the screen route to use with NavHost.

Let’s update the sealed class of DrawerScreens with route information.

The NavHost looks like this:

This NavHost is created with a “home” start. Added all three screens to the navigation graph.

Before we put it all together, we need to do one last thing. The drawer composable needs to be updated to handle the required screen navigation when each item is clicked. The updated drawer composables are:

Added callback onDestinationClicked to accept route parameters. Each time an item in the drawer is clicked, this callback is called and passed the corresponding root string.

And this is how we put everything together:

For this composable, we created a navigation host and created a NavController that is used to navigate between different composable screens. I’m using Compose’s ModalDrawer composable component to add a navigation drawer. This composable is a convenient way to create drawers. The parameters used here for ModalDrawer are:

Drawer state: Controls the open / closed state of the drawer.

Gesture support: Used to enable gestures to open and close drawers. Enable gestures when the drawer is open so you can swipe to close it.

Withdrawal content: This takes the composable used to display the drawer’s UI when the drawer opens. Here, we will pass the drawer composable that we created first.

The last one is the content passed as lambda.. This is a composable that appears as the rest of the screen. Pass NavHost here. This will bring up all the screens you need.

Drawer callback OnDestinationClicked closes the drawer and takes you to the required screen. It also pops the back stack to your home destination (doesn’t pop home) so that when you press back, it appears on your home screen. The new screen is launched as a singleTop, so even if an item is selected multiple times in the drawer, it will only have one instance.

The activity uses a configurable AppMainScreen.

And this is how it works.

In this post, I used ModalDrawercomposable to create a navigation drawer. With Compose’s Scaffold, you can do more than just a navigation drawer. The following post shows navigation using a navigation drawer and bottom navigation created using Scaffold.

Jetpack Compose is in beta, but Compose navigation is in alpha. However, both will soon have a stable release. Now jump right in and check out this amazing library.

thank you for reading.

Check the full code on GitHub.



Leave a Reply

Your email address will not be published. Required fields are marked *