
This is a Jetpack Compose TopAppBar with menu UI. I have added icons and text to the menu items.
The final output looks like this:


Helpful Links to Understand the Code:
Here are the Gradle files used in the project.
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.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.outlined.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.PopupProperties
/*
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
) {
Scaffold(
modifier = Modifier.fillMaxSize(),
topBar = {
MyTopAppBar()
}
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Rest of the UI")
}
}
}
}
}
}
}
@Composable
fun MyTopAppBar(
iconAndTextColor: Color = Color.DarkGray
) {
val listItems = getMenuItemsList()
val contextForToast = LocalContext.current.applicationContext
// state of the menu
var expanded by remember {
mutableStateOf(false)
}
TopAppBar(
title = {
Text(text = "SemicolonSpace")
},
actions = {
// 3 vertical dots icon
IconButton(onClick = {
expanded = true
}) {
Icon(
imageVector = Icons.Default.MoreVert,
contentDescription = "Open Options"
)
}
// drop down menu
DropdownMenu(
modifier = Modifier.width(width = 150.dp),
expanded = expanded,
onDismissRequest = {
expanded = false
},
// adjust the position
offset = DpOffset(x = (-102).dp, y = (-64).dp),
properties = PopupProperties()
) {
// adding each menu item
listItems.forEach { menuItemData ->
DropdownMenuItem(
onClick = {
Toast.makeText(contextForToast, menuItemData.text, Toast.LENGTH_SHORT)
.show()
expanded = false
},
enabled = true
) {
Icon(
imageVector = menuItemData.icon,
contentDescription = menuItemData.text,
tint = iconAndTextColor
)
Spacer(modifier = Modifier.width(width = 8.dp))
Text(
text = menuItemData.text,
fontWeight = FontWeight.Medium,
fontSize = 16.sp,
color = iconAndTextColor
)
}
}
}
}
)
}
fun getMenuItemsList(): ArrayList<MenuItemData> {
val listItems = ArrayList<MenuItemData>()
listItems.add(MenuItemData(text = "Notes", icon = Icons.Outlined.Bookmarks))
listItems.add(MenuItemData(text = "Options", icon = Icons.Outlined.Apps))
listItems.add(MenuItemData(text = "Mail", icon = Icons.Outlined.Mail))
listItems.add(MenuItemData(text = "About", icon = Icons.Outlined.Info))
return listItems
}
data class MenuItemData(val text: String, val icon: ImageVector)
Related:
- Jetpack Compose Radio Button
- Compose Animate Visibility
- SVG to XML Conversion in Android Studio
- Jetpack Compose Button Shapes
Reference: