This is a navigation drawer UI made with Android Jetpack Compose. It uses the Scaffold layout. The source code is available for free below.
The navigation drawer is made with several APIs like Scaffold, LazyColumn list, Image, Icon, Text, Coroutines, TopAppBar, etc. It consists of the user’s image, name, email, and options like home, notifications, payments, settings, logout, and messages. I have added the click listener on the list items.
The lists are implemented with lazy column API so that all the items are visible on small devices. The UI state is managed by the scaffold. The navigation drawer is opened and closed by using the scaffold state object.
The Jetpack Compose navigation drawer consists of a gradient background. It is implemented using the Brush API. The messages and notifications options consist of a bubble which indicates that there are unread messages and notifications.
The open() and close() methods of navigation drawer are the suspend functions. So, they are inside the coroutine scope. I have added a delay before closing the drawer. It is to display the onClick ripple effect fully.
The Scaffold layout comes with prebuilt animations. They are helpful while changing the state of the drawer. You can open it by clicking on the navigation icon on the top app bar or by swiping right. To close the drawer, tap outside of it or swipe left.
You need to download the latest version of the android studio because the Jetpack Compose doesn’t work in the older versions.
Final Output:
If the video isn’t working, watch it on the YouTube.
Helpful Links to Understand the Code:
- Understanding State in Jetpack Compose
- Scaffold Layout with Example
- How to Create Gradient Backgrounds?
- How to Set Margin and Padding?
Resources Used in the Project:
Here are the Gradle files used in the project.
All the icons are downloaded from feathericons.com. But they are in the SVG format. You should convert them to XML in Android Studio.
You can download the women picture from Pixabay. Crop it into a square shape before adding to the project.
Jetpack Compose Navigation Drawer with Scaffold Source Code:
MainActivity.kt:
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
/*
You can use the following code for commercial purposes with some restrictions.
Read the full license here: https://semicolonspace.com/semicolonspace-license/
For more designs with source code, visit:
https://semicolonspace.com/jetpack-compose-samples/
*/
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme(darkTheme = false) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
val scaffoldState = rememberScaffoldState()
val coroutineScope = rememberCoroutineScope()
val contextForToast = LocalContext.current.applicationContext
Scaffold(
modifier = Modifier.fillMaxSize(),
scaffoldState = scaffoldState,
topBar = {
MyTopAppBar {
coroutineScope.launch {
scaffoldState.drawerState.open()
}
}
},
drawerContent = {
DrawerContent { itemLabel ->
Toast
.makeText(contextForToast, itemLabel, Toast.LENGTH_SHORT)
.show()
coroutineScope.launch {
// delay for the ripple effect
delay(timeMillis = 250)
scaffoldState.drawerState.close()
}
}
}
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Rest of the App UI Here")
}
}
}
}
}
}
}
@Composable
private fun MyTopAppBar(onNavIconClick: () -> Unit) {
TopAppBar(
title = { Text(text = "SemicolonSpace") },
navigationIcon = {
IconButton(
onClick = {
onNavIconClick()
}
) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Open Navigation Drawer"
)
}
}
)
}
@Composable
private fun DrawerContent(
gradientColors: List<Color> = listOf(Color(0xFFF70A74), Color(0xFFF59118)),
itemClick: (String) -> Unit
) {
val itemsList = prepareNavigationDrawerItems()
LazyColumn(
modifier = Modifier
.fillMaxSize()
.background(brush = Brush.verticalGradient(colors = gradientColors)),
horizontalAlignment = Alignment.CenterHorizontally,
contentPadding = PaddingValues(vertical = 36.dp)
) {
item {
// user's image
Image(
modifier = Modifier
.size(size = 120.dp)
.clip(shape = CircleShape),
painter = painterResource(id = R.drawable.people1),
contentDescription = "Profile Image"
)
// user's name
Text(
modifier = Modifier
.padding(top = 12.dp),
text = "Hermione",
fontSize = 26.sp,
fontWeight = FontWeight.Bold,
color = Color.White
)
// user's email
Text(
modifier = Modifier.padding(top = 8.dp, bottom = 30.dp),
text = "[email protected]",
fontWeight = FontWeight.Normal,
fontSize = 16.sp,
color = Color.White
)
}
items(itemsList) { item ->
NavigationListItem(item = item) {
itemClick(item.label)
}
}
}
}
@Composable
private fun NavigationListItem(
item: NavigationDrawerItem,
unreadBubbleColor: Color = Color(0xFF0FFF93),
itemClick: () -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.clickable {
itemClick()
}
.padding(horizontal = 24.dp, vertical = 10.dp),
verticalAlignment = Alignment.CenterVertically
) {
// icon and unread bubble
Box {
Icon(
modifier = Modifier
.padding(all = if (item.showUnreadBubble && item.label == "Messages") 5.dp else 2.dp)
.size(size = if (item.showUnreadBubble && item.label == "Messages") 24.dp else 28.dp),
painter = item.image,
contentDescription = null,
tint = Color.White
)
// unread bubble
if (item.showUnreadBubble) {
Box(
modifier = Modifier
.size(size = 8.dp)
.align(alignment = Alignment.TopEnd)
.background(color = unreadBubbleColor, shape = CircleShape)
)
}
}
// label
Text(
modifier = Modifier.padding(start = 16.dp),
text = item.label,
fontSize = 20.sp,
fontWeight = FontWeight.Medium,
color = Color.White
)
}
}
@Composable
private fun prepareNavigationDrawerItems(): List<NavigationDrawerItem> {
val itemsList = arrayListOf<NavigationDrawerItem>()
itemsList.add(
NavigationDrawerItem(
image = painterResource(id = R.drawable.home),
label = "Home"
)
)
itemsList.add(
NavigationDrawerItem(
image = painterResource(id = R.drawable.message_square),
label = "Messages",
showUnreadBubble = true
)
)
itemsList.add(
NavigationDrawerItem(
image = painterResource(id = R.drawable.bell),
label = "Notifications",
showUnreadBubble = true
)
)
itemsList.add(
NavigationDrawerItem(
image = painterResource(id = R.drawable.user),
label = "Profile"
)
)
itemsList.add(
NavigationDrawerItem(
image = painterResource(id = R.drawable.credit_card),
label = "Payments"
)
)
itemsList.add(
NavigationDrawerItem(
image = painterResource(id = R.drawable.settings),
label = "Settings"
)
)
itemsList.add(
NavigationDrawerItem(
image = painterResource(id = R.drawable.log_out),
label = "Logout"
)
)
return itemsList
}
data class NavigationDrawerItem(
val image: Painter,
val label: String,
val showUnreadBubble: Boolean = false
)Related: