Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Navigation Drawer using Jetpack Compose

Navigation Drawer using Jetpack Compose - Coding Bihar
Navigation Drawer using Jetpack Compose

What is Navigation Drawer?

Navigation Drawer is the most important components of Material Design. There are two types of navigation drawers: standard and modal. 

Navigation Drawer is a sliding left menu that is used to display the important links in the application. Navigation drawer makes it easy to navigate to and fro between those links. It’s not visible by default and it needs to opened either by sliding from left or clicking its icon in the Action Bar.

In this tutorial we will learn to create a simple Modal Navigation Drawer. Here we are using Android Studio Koala version.

Steps-












MainActivity

Copy this code →

package com.example.navigationdrawercompose

import...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationDrawerComposeTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    NavDrawer(innerPadding)
                 }
            }
        }
    }
}

NavDrawer

Copy this code →

package com.example.navigationdrawercompose

import...

@Composable
fun NavDrawer(innerPadding: PaddingValues) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    ModalNavigationDrawer(
        drawerState=drawerState,
        drawerContent = {
        ModalDrawerSheet {
            Row (Modifier.padding(16.dp)
                .fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween){
                Text("Drawer title")
                IconButton(onClick = { scope.launch { drawerState.close() }  }) {
                    Icon(imageVector = Icons.Default.ArrowBack,
                        contentDescription = null)
                }

            }
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ })
        }

    }) {
        IconButton(onClick = { scope.launch {drawerState.apply {
            if (isClosed) open() else close()}
        } },Modifier.padding(18.dp)) {
            Icon(imageVector = Icons.Default.Menu,
                contentDescription = null)

        }
        Box(
            modifier = Modifier
                .fillMaxSize(),
               // .background(MaterialTheme.colorScheme.background),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Content Page")
        }

    }

}

OUTPUT:



 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!