Create and design drop-down menus on Android
Stelios Papamichail
Focus on
July 26-5 minutes reading
I recently had to implement a custom drop-down menu for my application, and it took me a long time to figure out what style is and how to implement it correctly to achieve the look and feel I want. So, in this article, I’ll show you how to customize an exposed drop-down menu using TextInputLayout and AutoCompleteTextView. We’re going to start here.
Slightly customized exposed drop-down menu
To this.
The ultimate exposed drop-down menu
What is an exposed drop-down menu?
An exposed drop-down menu displays the currently selected menu item at the top of the list of options. Some changes accept user input. On Android, this can be done with a TextInputLayout and a nested AutocompleteTextView, both of which are part of the Android material library. Let’s import this library into our project.
Implementation 'com. Google. Android. Material: material: 1.4.0'Copy the codeI’ll also use ViewBinding in this tutorial, so make sure you enable it in your module’s build.gradle by adding the following.
android { ... buildFeatures { viewBinding true }}
Copy the codeDesign the basic layout
Let’s first declare the basic layout of a material exposed drop-down menu.
<com.google.android.material.textfield.TextInputLayout android:id="@+id/dateFilterContainer" style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/label"> <AutoCompleteTextView android:id="@+id/datesFilterSpinner" android:layout_width="match_parent" android:layout_height="match_parent" android:inputType="none" tools:text="All Time"" /></com.google.android.material.textfield.TextInputLayout>
Copy the codeHere, we just add a TextInputLayout that contains an AutoCompleteTextView, which will serve as our drop-down menu. Note that inputType=” None “, because it tells the AutoCompleteTextView that we are not going to enter any text details by hand. This, combined with the custom style we assigned to TextInputLayout, will allow the AutoCompleteTextView to act like a spinner when clicked.
To learn more about the various styles and customization options available, see Google’s menus-Material Design documentation.
Give our dropdown menu a more custom look
Let’s start with the color we’ll use for the drop-down menu background.
<color name="pastel_orange_light">#FBE8DF</color>
Copy the codeNext, we will create a new filter_spinner_dropdown_bg.xml and shape it using the following code.
<? The XML version = "1.0" encoding = "utf-8"? ><shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/pastel_orange_light" /> <corners android:radius="20dp" /></shape>Copy the codeThe last thing we need is a drop down icon that will be placed at the end of the TextInputLayout. I used the drop down arrow in the free feather icon pack. Ok, now that we have all the resources, let’s further design our drop-down menu.
First, we need to set the background of the TextInputLayout to the drawable we created earlier.
Next, we will make the corners of the boxes placed around the TextInputLayout round (due to the style we chose) by changing the radius of each corner, and set the boxStrokeWidth and boxStrokeWidthFocused to 0dp. Because we don’t want any outline on our drop-down menu.
Also, let’s add our custom drop-down arrow icon using the endIconDrawable property and dye it to match our style using endIconTint.
Now that we’ve styled the TextInputLayout, let’s go to the AutoCompleteTextView. In this case, we want to set background=”@null” so that it does not overlap the TextInputLayout background.
Next, we specify a dropDownSelector drawable, which in this case will be the drawable we created earlier.
DropDownSelector is a drawable that is used to highlight an item when you click on it.
For my application, I don’t want anything like that to be visible, so I just set it to be the same as our background drawable.
Go ahead and add the following lines to simply limit the text to one line so that everything looks consistent, and ellipses (…) when the text is too long. Will be appended to the end of the text.
android:ellipsize="end"android:maxLines="1"android:singleLine="true"
Copy the codeWe’ll also add some padding at the top and bottom, because for some reason the nesting of the AutoCompleteTextView in TextInputLayout causes it to conflict a little with the boundaries of The TextInputLayout.
Finally, we want to center our text and style it a little bit, and that’s it. Here is the final code.
<com.google.android.material.textfield.TextInputLayout android:id="@+id/typesFilterContainer" style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu" android:layout_width="wrap_content" android:layout_height="40dp" android:background="@drawable/filter_spinner_dropdown_bg" app:boxBackgroundColor="@color/pastel_orange_light" app:boxCornerRadiusBottomEnd="20dp" app:boxCornerRadiusBottomStart="20dp" app:boxCornerRadiusTopEnd="20dp" app:boxCornerRadiusTopStart="20dp" app:boxStrokeWidth="0dp" app:boxStrokeWidthFocused="0dp" app:endIconDrawable="@drawable/ic_arrow_down" app:endIconTint="@color/pastel_orange_txt_highlight"> <AutoCompleteTextView android:id="@+id/typesFilter" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@null" android:fontFamily="@font/lato" android:dropDownSelector="@drawable/filter_spinner_dropdown_bg" android:ellipsize="end" android:inputType="none" android:maxLines="1" android:paddingTop="10dp" android:paddingBottom="10dp" android:singleLine="true" android:text="All Types" android:textAlignment="center" android:textColor="@color/pastel_orange_txt_highlight" tools:ignore="LabelFor" /></com.google.android.material.textfield.TextInputLayout>
Copy the codeYou should now have something that looks a lot like this.
The output
Next, let’s see how to populate our drop-down menu with items
Specify drop-down items
To set up drop-down items for our menu, we need to use an ArrayAdapter<>() and pass in the context, project layout, and list of items. In this case, we’ll use the predefined Android.r.layout.simple_spinner_dropdown_item layout, because it fits our needs right now, but you can also use a custom layout, And further customize in a custom ArrayAdapter subclass. Let’s take a look at the code so far.
val adapter = ArrayAdapter( requireContext(), android.R.layout.simple_spinner_dropdown_item, arraylistOf("All Types", "Assignments", "Exam", "Lab"))binding? .typesFilterSpinner? .setAdapter(adapter)binding? .typesFilterSpinner? .setText("All Types")Copy the codeGood, now that our drop-down menu is full of items, we need to define a custom drawable to be the background for the drop-down menu, since the default white background will now be used.
Use a custom drop – down menu for background drawing
Once again, we’ll use our filter_spinner_dropdown_bg.xml drawable. Simply call on AutoCompleteTextView setDropDownBackgroundDrawable (), it can be used as a background.
binding? .typesFilterSpinner.setDropDownBackgroundDrawable( ResourcesCompat.getDrawable( resources, R.drawable.filter_spinner_dropdown_bg, null ))Copy the codeOk, we have finally finished styling our drop-down menu. It should now look something like this.
The final result
In the final section, we’ll look at how to handle click events for projects.
Handles item click events
In order to be notified when click the drop-down project, we will simply defining our own AdapterView. OnItemClickListener, and use it in our AutoCompleteTextView.
binding? .typesFilterSpinner.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id-> // do something with the available information }Copy the codeThat’s the end of the tutorial, and you should now have a fully functional, nice-looking drop-down menu/spreader. If you have any suggestions, improvements or comments, let me know in the comments and I’ll do my best to include them. Happy coding!
