Android studio exposed dropdown menu

How to Add a Dropdown Menu in Android Studio

A dropdown or pull-down menu, also known as spinner, is one of the most essential UI elements for an app. In this tutorial I’ll tell you how to add one to your Android app using Java.

Dropdown menus organize an app and improve the user experience. Almost every app has a dropdown menu integrated into its user interface.

Even though adding a dropdown menu in your Android app is as simple as dragging and dropping it, it sure can get tricky, especially if you are new to using Android Studio. If you’re a fresh developer making your initial apps on Android Studio, this tutorial is for you.

Setting Up the Environment

Once you have created a project on Android Studio, open these files:

• res/layout/activity_main.xml
• res/values/strings.xml
• app/java/your.project.name/MainActivity.java

(The MainActivity.java file is opened by default when you create the project.)

With all the files open, your IDE should look like this:

Adding the Dropdown Menu Layout

Now, it’s time to add the dropdown menu layout. In Android Studio, the layouts are added to the layout XML files. For that, head over to activity_main.xml. While you’re in the activity_main.xml file, open the Design tab. You’ll find it in the upper right corner of your IDE.

Android pull-down menus in Android Studio are added using Spinners.

If there is default text present on your application screen, head back to the code section and remove all the TextViews . Now, from the design palette, select Containers. You’ll find Spinner there.

Once you’ve located the Spinner, drag and drop it on top of your mobile application. Android Studio will do the relevant coding for you, and you can later check it out by getting back to the code screen.

Depending on where you’ve dropped your Spinner, the layout code should look something like this:

However, Android Studio allows you to customize your dropdown menu by changing its height, width, and margins through the attributes panel without having to code all of it from scratch.

While you’re at it, make sure that spinnerMode is set to dropdown to create a dropdown menu. You’ll find this setting in the attributes panel.

Positioning the dropdown menu on your application screen is quite easy. The Android Studio GUI will provide you with all the constraints to let you specify where your dropdown menu sits.

Once you’re satisfied with the styling of your dropdown menu, switch to the code view and edit the Spinner id. This will be required later on, when we integrate the Spinner into the Java file.

The Spinner id is found in the first line of the tag. Give this an id that you’ll remember for use elsewhere in your app code.

Lastly, head back to the design section and press the Infer Constraints button—which I personally call the «magic button»—on the top to take care of all the missing constraints in our code:

Adding Elements to the Dropdown Menu

Now that you’ve added a dropdown menu to your screen, it’s time to populate it with a bunch of choices for the user to choose from.

For this, you need to open up the strings.xml file. This file will be empty initially, and it should look something like this:

To add elements to your Android dropdown menu, you need to declare a string array and give it a name. Declare a string-array under the already declared string using the following syntax:

The string array has to be declared within the resources tag. Otherwise, you will get a Syntax error. The string array can be declared within the main Java file as well, but putting it in a separate XML file increases the reusability of the code and enhances the efficiency of your application. There’s no limit to the number of items that you can have in your dropdown menu.

Calling the Spinner in the Java File

Before we begin the coding, have the following classes imported into your code:

It’s best that these classes are imported beforehand to avoid any syntax errors later on. However, if you still get a Syntax error, you can always hover your mouse over it and then press Alt-Enter to import the relevant class for your code.

To pass the Android dropdown menu to Java, you have to define a Spinner object. Use the Spinner class name and give the object an appropriate name. Next, instantiate the spinner by looking it up with the same id you declared in the activity_main.xml file:

In the next step, you’ll have to create an ArrayAdapter . The ArrayAdapter will be responsible for rendering every item in the languages string array to the screen when the Java dropdown menu is accessed.

createFromResources() is a built-in method for the ArrayAdapter class which takes three input parameters:

• the environment of the application—within an Activity, you can just use this
• the name of the StringArray that you declared in the strings.xml file
• the layout type

For this particular example, we’re using a basic spinner layout.

The adapter that we declared above is useless unless it is attached to our dropdown menu (spinner). Therefore, set the spinner to use that adapter.

With the ArrayAdapter declared and successfully bound to the spinner , you’ve successfully integrated your very first Android pull-down menu into your application.

You can now run your application on the emulator. It will look something like this:

With the Java dropdown menu all set, you can now play around with it a little in the activity_main.xml file. Try altering the height attribute and see how the dropdown menu moves across the screen.

Summary

You can add a dropdown menu to your Android application in a few simple steps.

For starters, you need to edit the XML files. Integrate the dropdown menu into them using Android Studio’s drag-and-drop feature. Next, you have to create a string array to add all the relevant items to your dropdown menu. Then, you need to get the Spinner instance in the main Java file, along with an ArrayAdapter . Lastly, you set your spinner up to use that adapter.

With all three code files working simultaneously, you’ll have an Android dropdown menu fully functional in your first Android app.

Источник

Android studio exposed 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:

1. List item
2. Leading icon
3. Trailing icon
4. Trailing text
5. Container
6. 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.

1. Text
2. Container
3. Label
4. Selection/Input text
5. 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:

Источник