[안드로이드] Material DropDown Menu(드롭다운 메뉴) 만들기

이전에 안드로이드에서 선택가능한 메뉴를 만들기 위해 Spinner를 사용하거나 Dialog를 통해 메뉴 항목을 구성했습니다.

Menu Item을 커스텀하려면 style을 설정하고 수정해야 하는 부분이 많았는데 최근 굉장히 편리하게 DropDown 메뉴를 구성할 수 있는 방법을 알게되어 공유합니다.

---

실행화면

activity_main.xml

<?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"
    
    ...
    
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:boxBackgroundColor="@color/white"
        app:boxStrokeColor="@color/main_green"
        app:layout_constraintEnd_toEndOf="@+id/textInputLayout5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="@+id/textInputLayout5"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout5">

        <AutoCompleteTextView
            android:id="@+id/autoCompleteTextView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="none"
            android:text="지역을 선택해주세요." />
    </com.google.android.material.textfield.TextInputLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

string.xml

<string-array name="signup_select_region">
    <item>서울특별시</item>
    <item>인천광역시</item>
    <item>대전광역시</item>
    <item>광주광역시</item>
    <item>대구광역시</item>
    <item>울산광역시</item>
    <item>부산광역시</item>
    <item>세종특별자치시</item>
    <item>광주광역시</item>
    <item>강원도</item>
    <item>충청북도</item>
    <item>충청남도</item>
    <item>전라북도</item>
    <item>전라남도</item>
    <item>경상북도</item>
    <item>경상남도</item>
    <item>제주특별자치도</item>
</string-array>

저는 지역을 선택하는 드롭다운 메뉴를 구현하기 위해 지역명을 item으로 작성했습니다.

필요에 맞게 string-array를 설정합니다.

dropdown_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:textColor="@color/black"
    android:textStyle="bold"
    android:padding="14dp"
    android:layout_height="wrap_content"
    android:text="TextView" />

layout 폴더에 dropdown_item.xml 파일에 Layout을 감싸지 않고 TextView만 배치합니다.

xml 파일명을 xxx_item으로 설정하지 않으니 단일 TextView만 배치되지 않았고, TextView를 Layout에 포함시키니 "androidx.constraintlayout.widget.ConstraintLayout cannot be cast to android.widget.TextView" 해당 오류가 발생했습니다.

activity_main.xml에서 TextInputLayout 내부에서 AutoCompleteTextView로 뷰를 구성하고 있기 때문에 Layout이 TextView로 캐스팅되지 않는 것으로 추정합니다.

MainActivity

...
val regionArray = resources.getStringArray(R.array.signup_select_region)
val arrayAdapter = ArrayAdapter(requireContext(), R.layout.dropdown_item, regionArray)
binding.autoCompleteTextView.setAdapter(arrayAdapter)

string에서 작성한 string-array를 선언하고, ArrayAdapter에 연결합니다.

 

참고

Material Design