Using ListPopupWindow for dropdown menu in Android

Spinner is the default option for creating dropdown menu in Android, but Spinner doesn’t place the dropdown menu exactly underneath the list header. Here is an alternative to Spinner which makes the dropdown menu to show up exactly underneath the list header.

It’s a RelativeLayout containing a TextView, an ImageView and a View. The TextView for showing the header of the list, the ImageView is a dropdown arrow icon placed on top of the TextView to the right, and the View is a 1dp height filled with a background color to use as a bottom border. When the TextView receives a click event, a ListPopupWindow will be placed right under the TextView giving an illusion of dropdown motion.

MainActivity.kt

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.ListPopupWindow
import kotlinx.android.synthetic.main.activity_main.*
import java.util.ArrayList

class MainActivity : AppCompatActivity() {

    private lateinit var placeTypes: ArrayList
    private lateinit var placeTypesDropdownView: ListPopupWindow

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val dropDownHeight = 800
        placeTypes = getResources().getStringArray(R.array.place_types).toCollection(ArrayList())
        if (placeTypes.get(0) != getString(R.string.pick_place_type)) {
            placeTypes.add(0, getString(R.string.pick_place_type))
        }
        placeTypesDropdownView = ListPopupWindow(this)
        placeTypesDropdownView.setAdapter(ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, placeTypes))
        placeTypesDropdownView.setAnchorView(tv_place_type)
        placeTypesDropdownView.setHeight(dropDownHeight)
        placeTypesDropdownView.setModal(true)
        tv_place_type.post({
            placeTypesDropdownView.setWidth(tv_place_type.getMeasuredWidth())
        })
        placeTypesDropdownView.setOnItemClickListener({ adapterView, view, position, viewId ->
            tv_place_type.setText(placeTypes.get(position))
            placeTypesDropdownView.dismiss()
        })
        tv_place_type.setOnClickListener({
            placeTypesDropdownView.show()
        })

    }
}

strings.xml, the list items are defined here in the strings resource file.

    Dropdown ListPopupWindow

    Select Place Type
    
        Restaurant
        Cafe
        Gas Stations
        Shopping
        Hotels
        Airport
        Transit Stations
        Banks
        School
        Church
    

activity_main.xml, the dropdown list layout.

drop down arrow icon: https://material.io/icons/#ic_arrow_drop_down

Complete example in Github