We can have Navigation Drawer in JetpackCompose by using Scaffold as below
Scaffold(
drawerContent = { Text(text ="Drawer") }
) {}
I want to make the width of the drawer smaller. How can I do so?
We can have Navigation Drawer in JetpackCompose by using Scaffold as below
Scaffold(
drawerContent = { Text(text ="Drawer") }
) {}
I want to make the width of the drawer smaller. How can I do so?
You can modify the shape (including width and height) using drawerShape parameter in Scaffold method.
So for instance
Scaffold(
scaffoldState = scaffoldState,
drawerContent = { Text("Drawer content") },
drawerShape = customShape(),
content = {inner padding -> /* Body*/}
)
Then your customShape function
fun customShape() = object : Shape {
override fun createOutline(
size: Size,
layoutDirection: LayoutDirection,
density: Density
): Outline {
return Outline.Rectangle(Rect(0f,0f,100f /* width */, 131f /* height */))
}
}
You can also use Outline.Rounded to get rounded corners
Scaffold(
topBar = {
topBar()
},
scaffoldState = scaffoldState,
drawerContent = {
drawer()
},
drawerGesturesEnabled = true
) { innerPadding ->
NavigationHost(navController = navController)
}
}
Have you tried adding a modifier inside your drawer composable ?
Something like this:
Scaffold(drawerContent = {
Box(modifier = Modifier.fillMaxWidth(0.9f){
Text(text = "Drawer")
}
}) {}