Android material dropdown menu
Menus display a list of choices on temporary surfaces.
Contents
A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
Before you can use Material menus, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.
A typical menu resource looks like this:
A typical exposed dropdown menu looks like this:
See the dropdown menus and exposed dropdown menus sections for detailed usage information.
Making menus accessible
Menus are readable by most screen readers, such as TalkBack. Text rendered in menus is automatically provided to accessibility services. Additional content labels are usually unnecessary.
Android’s exposed dropdown menu component APIs support both label text and helper text, which tell the user what information is requested for a menu. While optional, their use is strongly encouraged. For more information about this component’s accessibility, check out the text field’s a11y section.
Menus allow users to make a selection from multiple options. They are less prominent and take up less space than selection controls, such as a set of radio buttons.
There are two types of menus: 1. Dropdown menus (overflow, context, popup, and list popup window menus), 2. Exposed dropdown menus.
Dropdown menus display a list of options, triggered by an icon, button, or action. Their placement varies based on the element that opens them.
Dropdown menu examples
API and source code:
The following example shows an overflow menu.
The following example shows a context menu that appears when a TextView is pressed for a designated amount of time.
Alternatively, you can inflate a context menu in onCreateContextMenu (as with the overflow menu):
with a res/menu/context_menu.xml :
The following example shows a popup menu that displays when a button is clicked.
Adding icons to popup menus
Currently, there is no public API to add icons to popup menus. The following workaround is for API 21+, and uses library-only APIs, and is not guaranteed to work in future versions.
The following example shows a popup menu with icons.
List popup window menus
The following example shows a list popup window menu that appears when a button is clicked.
In the item layout res/layout/list_popup_window_item.xml :
Anatomy and key properties
The following are menu anatomy diagrams showing all possible elements:
- List item
- Leading icon
- Trailing icon
- Trailing text
- Container
- Divider
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Background | android:popupMenuBackground | N/A | ?attr/popupMenuBackground |
| Color | N/A | N/A | ?attr/colorSurface |
| Elevation | android:popupElevation | N/A | 3dp |
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Text label | android:title | getMenu().add getMenu().addSubMenu getMenu().getItem | N/A |
| Typography | ?attr/textAppearanceLargePopupMenu ?attr/textAppearanceSmallPopupMenu | N/A | ?attr/textAppearanceBodyLarge |
| Element | Theme attribute | Default value |
|---|---|---|
| Popup menus | ?attr/popupMenuStyle | @style/Widget.Material3.PopupMenu |
| List popup window style | ?attr/listPopupWindowStyle | @style/Widget.Material3.PopupMenu.ListPopupWindow |
| Context menus | ?android:contextPopupMenuStyle | @style/Widget.Material3.PopupMenu.ContextMenu |
| Overflow menus | ?attr/actionOverflowMenuStyle | @style/Widget.Material3.PopupMenu.Overflow |
See the full list of styles and attrs.
Exposed dropdown menus
Exposed dropdown menus display the currently selected menu item above a list of options. Some variations can accept user-entered input.
Note: The exposed dropdown menu is implemented through the TextInputLayout . For detailed information on Material text fields and their usage, see the TextInputLayout documentation.
Exposed dropdown menu example
API and source code:
Note: MaterialComponentsViewInflater auto-inflates to when using Theme.Material3.* themes.
The following is an example of a filled exposed dropdown menu:
In the item layout ( list_item.xml ):
To use the exposed dropdown menu with an outlined text field, set the style to @style/Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu :
Non editable variation
For a non-editable menu, disable the user input in the AutoCompleteTextView by setting android:inputType=»none» on the AutoCompleteTextView .
Setting a default value
In order to have a pre-selected value displayed, you can call setText(CharSequence text, boolean filter) on the AutoCompleteTextView with the filter set to false .
Anatomy and key properties
The exposed dropdown menu is an AutoCompleteTextView within a TextInputLayout . It displays a dropdown menu below a text field.
- Text
- Container
- Label
- Selection/Input text
- Trailing icon
TextInputLayout attributes (container, label, trailing icon)
For all attributes that apply to the TextInputLayout , see the TextInputLayout documentation.
AutoCompleteTextView attributes (input text, dropdown menu)
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Input text | android:text | setText getText | @null |
| Typography | android:textAppearance | setTextAppearance | ?attr/textAppearanceBodyLarge |
| Input accepted | android:inputType | N/A | framework’s default |
| Input text color | android:textColor | setTextColor getTextColors getCurrentTextColor | ?android:textColorPrimary |
| Cursor color | N/A (color comes from the theme attr ?attr/colorControlActivated ) | N/A | ?attr/colorPrimary |
| Dropdown menu container color | N/A | N/A | ?attr/colorSurface |
| Dropdown menu elevation | android:popupElevation | N/A | 8dp |
| Element | Style |
|---|---|
| Filled style | Widget.Material3.TextInputLayout.FilledBox.ExposedDropdownMenu |
| Outlined style | Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu |
| Filled dense | Widget.Material3.TextInputLayout.FilledBox.Dense.ExposedDropdownMenu |
| Outlined dense | Widget.Material3.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu |
Default style theme attribute: ?attr/textInputStyle
See the full list of styles and attrs.
Menus drawers support Material Theming which can customize color, typography and shape.
Menu theming examples
Popup, overflow, and list popup window menus support Material Theming which can customize typography.
API and source code:
The following example shows a menu with Material Theming.
Implementing menu theming
Use default style theme attributes, which affect all menus but do not affect other components:
Use a custom style instead of overriding ?attr/popupMenuBackground if you want to set a custom background for one type of menu:
Exposed dropdown menu theming example
Exposed dropdown menus support Material Theming which can customize color, typography, and shape.
Note: The exposed dropdown menu is implemented through the TextInputLayout . For detailed information on how Material text fields work, see the TextInputLayout documentation.
API and source code:
The following example shows filled and outlined exposed dropdown menu types with Material Theming.
Implementing exposed dropdown menu theming
Use default style theme attributes, styles and theme overlays which adds themes to all menus but does not affect other components:
or use the style in the layout, which affects only this menu:
Источник
Material Menus – Material Component For Android
A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
Before getting into details. Check out my other post on material design,
To work with material design, First, we need to add material design dependency.
Table of Contents
Types of menus
- Dropdown menus
- Exposed dropdown menus
Dropdown Menus
Dropdown menus display a list of options, triggered by an icon, button, or action. Their placement varies based on the element that opens them.
Based on the usage and design, dropdown menus are used in four different ways.
- Overflow menus
- Context menus
- Popup menus
- List popup window menus
Overflow menus
The menu which appears after tapping these 3 dots located in the action bar.
To create the overflow menu, First create a menu XML file.
option_menu.xml:
Then, inflate the menu XML layout on onCreateOptionsMenu.
in your MainActivity.kt:
Context menus
The context menu that appears when a TextView is long pressed.
First, create Textview in your activity_main.xml layout,
In your code, inflate the context menu layout in onCreateContextMenu.
Also, you can override the onContextItemSelected to handle context menu item click.
Popup menus
The popup menu shows when a button is clicked.
Create a button in activity_main.xml,
With the click of the button, we need to create a PopupMenu() and inflate the menu layout into the popup menu.
Also, you can add click listener for the popup menu by setting setOnMenuItemClickListener into the popup menu.
Adding icons on popup menus
Currently, there is no public API to add icons on popup menus. The following workaround is for API 21+, and uses library-only APIs, and is not guaranteed to work in future versions.
create a menu layout with icon,
List popup window menus
We can show the list items in popup menu using the ListPopupWindow() .
In code, First create a listPopupWindow with list of menu items.
Then, show the list popup menu on by clicking of the button.
Exposed dropdown menus
Exposed dropdown menus display the currently selected menu item above the list of options. the exposed dropdown menus behavior same as a spinner. So, this will be the best alternative for the spinners.
The exposed dropdown menu is implemented through the TextInputLayout.
in code, set the arrayAdapter into autoCompleteTextView.
In the item layout (list_item.xml):
To have an outlined variation of the exposed dropdown menu, set the style to @style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu:
Non-editable variation
Disable the user input in the AutoCompleteTextView to have a non editable variation of the menu by setting android:inputType=”none” on the AutoCompleteTextView.
Setting a default value
In order to have a pre-selected value displayed, you can call setText(CharSequence text, boolean filter) on the AutoCompleteTextView with the filter set to false.
Источник
