Exposed Drop-Down Menu 만들기 - Kotlin

쓰게 된 이유

우리 팀이 만드는 음악 앱의 정체성은 사용자에 맞춰 음악에 선택 태그, 고정 태그가 붙는 것이다.

태그 중 선택 태그는 사용자가 이 노래에 대한 감정 태그를 고르는 것이다. 처음에는 사용자가 태그를 맘대로 만들 수 있는 방식으로 기획했다. 이러면 한 음악에 대해 다양한 사람들에 의해 각기 다른 태그가 만들어지는데 그러면 태그를 기반으로 추천 해주는데 문제가 생길 것으로 판단이 들었다. 그래서 한정된 감정 선택지에서 고르는 것으로 변경하였다.

이를 구현하기 위해 Exposed Drop-Down Menu를 이용하려고 한다.

---

완성본

 

코드

• 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="32dp"
        android:text="@string/how_dou_you_feel_today"
        android:textColor="@color/black"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
<-- 참고한 곳-->
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="32dp"
        android:hint="@string/feelings"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:startIconDrawable="@drawable/ic_feeling">

        <AutoCompleteTextView
            android:id="@+id/autoCompleteTextView" 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:inputType="none"
            tools:text="Happy" />
    </com.google.android.material.textfield.TextInputLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

• dropdown_item.xml

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textViewFeelings"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="15dp"
    android:text="TextView"
    android:textColor="@color/black"
    android:textSize="18sp"
    android:textStyle="bold" />

• MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ArrayAdapter
import com.example.exposeddropdownmenu.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

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

        val feelings = resources.getStringArray(R.array.feelings) // feelings는 감정을 적어둔 배열(values/strings.xml에 있음)
        val arrayAdapter = ArrayAdapter(this, R.layout.dropdown_item, feelings) // (feelings를 나타낼 눈에보이는 xml, feelings가 드랍다운되는 xml, 표시할배열 )
        binding.autoCompleteTextView.setAdapter(arrayAdapter) 
    }
}

• values/strings.xml

<resources>
    <string name="app_name">ExposedDropdownMenu</string>
    <string name="how_do_you_feel_today">How do you feel today?</string>
    <string name="feelings">Feelings</string>

    <string-array name="feelings">
        <item>Sad</item>
        <item>Dissatisfied</item>
        <item>Satisfied</item>
        <item>Happy</item>
        <item>Excited</item>
    </string-array>

</resources>

(지금 진행하고 있는 졸업작품에 넣었는데 BottomSheet으로 대체 될지 모른다.) 

코드 출처) https://github.com/emineinan/ExposedDropDownMenu

 

😊바텀싯으로 https://java0u0.tistory.com/10

하단 Dialog( Bottomsheet) 만들기 -Kotlin