Jetpack Compose TopAppBar Menu with Icons

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:
Reference:
Helpful Links to Understand the Code:

Source Code:

Leave a Comment Cancel reply
