Android Meterial DropDown Menu 샘플

오늘은 안드로이드 머티리얼 디자인 드롭다운 메뉴 샘플을 만들어보겠습니다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="vertical">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout"
            style="@style/DropDownLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp">

            <AutoCompleteTextView
                android:id="@+id/text_item"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:text="item"
                android:inputType="none" />
        </com.google.android.material.textfield.TextInputLayout>
    </LinearLayout>
</LinearLayout>

 

item_list.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Sample"
    android:padding="16dp">
</TextView>

 

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.DropDownMenu" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <!-- 드롭다운 리스트 스타일 지정 -->
        <item name="android:dropDownListViewStyle">@style/DropDownItemStyle</item>
    </style>

    <!-- ripple effect 컬러 -->
    <style name="SelectableItemTheme">
        <item name="colorControlHighlight">@color/gray3</item>
    </style>

    <!-- 드롭다운 리스트 스타일 지정 -->
    <style name="DropDownLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu">
        <item name="android:theme">@style/SelectableItemTheme</item><!-- ripple effect 컬러 -->

        <item name="boxStrokeColor">@color/gray3</item>             <!-- 보더 라인 컬러 -->
        <item name="boxStrokeWidth">1dp</item>                      <!-- 선택 안했을때 보더 라인 -->
        <item name="boxStrokeWidthFocused">1dp</item>               <!-- 선택 했을때 보더 라인 -->

        <item name="endIconDrawable">@drawable/ic_baseline_arrow_back_24</item>      <!-- 오른쪽 아이콘 -->
        <item name="endIconTint">@color/black</item>                <!-- 오른쪽 아이콘 컬러 -->
    </style>

    <!-- 드롭다운 리스트 아이템 스타일 지정 -->
    <style name="DropDownItemStyle" parent="@android:style/Widget.ListView">
        <item name="android:divider">@color/gray3</item>            <!-- 밑줄 색상 -->
        <item name="android:dividerHeight">1dp</item>               <!-- 밑줄 사이즈 -->
    </style>
</resources>

 

TextInputLayout에 DropDownLayoutStyle 스타일을 지정하여

리플 이펙트 컬러와 보더 라인, 아이콘을 설정하고,

 

application 테마에 dropDownListViewStyle를 설정하여

리스트 뷰의 밑줄을 지정합니다.

 

 

MainActivity.java

public class MainActivity extends AppCompatActivity {
    Activity mActivity;

    TextInputLayout text_input_layout;
    AutoCompleteTextView textItem;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mActivity = this;
        text_input_layout = (TextInputLayout) findViewById(R.id.text_input_layout);
        textItem = (AutoCompleteTextView) findViewById(R.id.text_item);

        setDropMenu();
    }

    // drop menu
    private void setDropMenu() {
        String[] items = {"item1", "item2", "item3", "item4", "item5"};
        ArrayAdapter<String> itemAdapter = new ArrayAdapter<>(mActivity,
                R.layout.item_list, items);
        textItem.setAdapter(itemAdapter);

        //클릭 시
        textItem.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!textItem.isPopupShowing()) {
                    text_input_layout.setEndIconDrawable(R.drawable.ic_baseline_arrow_back_24);
                } else {
                    text_input_layout.setEndIconDrawable(R.drawable.ic_baseline_arrow_forward_24);
                }
            }
        });

        //닫힐 때
        textItem.setOnDismissListener(new AutoCompleteTextView.OnDismissListener() {
            @Override
            public void onDismiss() {
                text_input_layout.setEndIconDrawable(R.drawable.ic_baseline_arrow_back_24);
            }
        });

        // 아이템 클릭 시
        textItem.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                //(String)adapterView.getItemAtPosition(position)
            }
        });
    }
}

AutoCompleteTextView에 ArrayAdapter<String>를 설정하고

드롭박스를 닫거나 열때 TextInputLayout의 아이콘을 지정합니다.

 

해당 아이템 클릭의 값은 setOnItemClickListener에서 받아

(String)adapterView.getItemAtPosition(position)으로 값을 확인할 수 있습니다.