How to implement Exposed Drop-Down Menu

I cannot overestimate how tedious it is to create nice looking drop-down menu during the old days of Spinner, it was incredibly always looking ugly or out of shape with the other parts of your design but thanks to Material design that has come to our rescue with this easy to implement and customize menu.
Exposed drop-down menu just like a spinner is used to show a list of items.

All we have to do to get this menu up and running can be divided into the following steps, i am assuming that you have a project setup already.

1. Create custom layout you want the drop-down menu to show.

2. Create a string resource in your values folder, this string resource would contain the actual list we want to populate into the menu.

3. Add TextInputLayout and TextInputEditText into the Activity or Fragment layout file that you want to show the menu.

4. Finally create an ArrayAdapter for the menu.

With this very short steps we would have our menu working smoothly, to the very first step which is creating a custom layout go to your layout folder and create a new layout, I would name mine drop_down_layout

<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fontFamily="@font/muli_regular"
    android:text=""
    android:textColor="@color/colorBlack"
    android:padding="10dp"
    android:textSize="13sp"
    xmlns:android="http://schemas.android.com/apk/res/android" />

Number 1 done moving onto the next which is createing a string resource for that navigate to your values folder in res, create a new Value Resource File and name it drop_down_list

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="fruit_list">
        <item>Orange</item>
        <item>Pineapple</item>
        <item>Banana</item>
        <item>Mango</item>
        <item>Grapefruits</item>
        <item>Pears</item>
        <item>Coconut</item>
        <item>Watermelons</item>
        <item>Blueberries</item>
        <item>Lemon</item>
    </string-array>
</resources>

This next step is where we add the material design feel that the spinner lacked

.....
.....
.....


<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputFruits"

       style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            app:boxStrokeColor="@color/colorPrimary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <AutoCompleteTextView
                android:id="@+id/fruitAuto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:fontFamily="@font/muli_regular"
                android:text=""
                android:textColor="@color/colorBlack"
                android:inputType="none"/>
        </com.google.android.material.textfield.TextInputLayout>

Take note of the style attribute in TextInputLayout because it is the main ingredient in achieving the drop-down and also the AutoCompleteTextView.

The final piece of the puzzle is the ArrayAdapter which we would setup with the AutoCompleteTextView

class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding


 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)


val fruits = resources.getStringArray(R.array.drop_down_list)
val adapter = ArrayAdapter(this, R.layout.drop_down_layout, fruits)
binding.facultyAuto.setAdapter(adapter) 
}

All we did here is to get the arrays of fruits from the string resource which is saved into the variable fruits, then the ArrayAdapter is created passing in the context which is the activity or fragment you are in, the custom layout is also required followed by the array that has our data.

Do not forget to add the material theme to your layout like below else app would crash

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:theme="@style/Theme.MaterialComponents.Light.NoActionBar">

.....
.....
.....

And so we have our nice looking drop-down menu a lot more customization could be done but for simplicity I would stop here. If you face any issues implementing this feature, please leave a comment or send me a tweet @henry_ifechukwu. Thanks.