How do i create overflow menu (Popup Menu) in Jetpack compose
Last updated Oct 08, 2021 In this Jetpack compose tutorial we will learn how to create overflow menu (Popup Menu) with Jetpack compose in Android application.
Let's get started
Step 1: Create android application in android studio
Step 2: Follow step for setup Jetpack Compose with Android Studio
Let's create app bar with simple title "Overflow Menu"
val scaffoldState = rememberScaffoldState()
Scaffold(
scaffoldState = scaffoldState,
content = {
},
topBar = {
TopAppBar(title = { Text("Overflow Menu") },
backgroundColor = Color.Blue,
contentColor = Color.White,
)
},
)
|
To show popup menu we need to create Appbar and appbar action items with a button, on click on this button we will show popup menu window. To create Appbar we will use TopAppBar compose function
TopAppBar(title = { Text("Overflow Menu") },
backgroundColor = Color.Blue,
contentColor = Color.White,
actions = {
IconButton(
onClick = {
}
) {
Icon(
imageVector = Icons.Default.MoreVert,
contentDescription = "image",
tint = Color.White,
)
}
}
)
|
Now we need to create list of items which will display inside overflow menu. These are menu items.
On clicking action button we are going to show this list in overflow menu
val menuItems = listOf("Cancel", "Delete", "View")
|
To store the selected popup menu item we have to create Compose Remember function
create a remember composable which will store true or false value depending on which overflow menu will be shown. Default value will be false.
val expanded = remember { mutableStateOf(false) }
|
Let's add UI for our Overflow menu
val context = LocalContext.current
DropdownMenu(
expanded = expanded.value,
offset = DpOffset((-40).dp, (-40).dp),
onDismissRequest = { expanded.value = false }) {
menuItems.forEach {
DropdownMenuItem(onClick = {
Toast.makeText(
context,
"You clicked $it menu",
Toast.LENGTH_LONG
).show()
expanded.value = false
}) {
Text(text = it)
}
}
|
Full code
package com.example.jetpack
import android.os.Bundle
import android.view.WindowManager
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
setContent {
OverFlowMenuDemo()
}
}
}
@Composable
fun OverFlowMenuDemo() {
val context = LocalContext.current
val expanded = remember { mutableStateOf(false) }
val menuItems = listOf("Cancel", "Delete", "View")
val scaffoldState = rememberScaffoldState()
Scaffold(
scaffoldState = scaffoldState,
content = {
},
topBar = {
TopAppBar(title = { Text("Overflow Menu") },
backgroundColor = Color.Blue,
contentColor = Color.White,
actions = {
IconButton(
onClick = {
expanded.value = true
}
) {
Icon(
imageVector = Icons.Default.MoreVert,
contentDescription = "image",
tint = Color.White,
)
}
DropdownMenu(
expanded = expanded.value,
offset = DpOffset((-40).dp, (-40).dp),
onDismissRequest = { expanded.value = false }) {
menuItems.forEach {
DropdownMenuItem(onClick = {
Toast.makeText(
context,
"You clicked $it menu",
Toast.LENGTH_LONG
).show()
expanded.value = false
}) {
Text(text = it)
}
}
}
})
},
)
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
OverFlowMenuDemo()
}
|
Images
