[안드로이드] Custom Spinner 복붙용 (테두리, 선택표시, 구분선)

 

안드로이드에서 Spinner를 그대로 사용하기에는 많이 아쉬워요..

이번 글에서 목적은 기본적인 Custom Spinner를 작성하고,

위 그림과 같이 (내맘대로) 몇 가지 조작을 해보려고 합니다.

 

1. Spinner 테두리 만들기 (selector)

2. Dropdown 너비 / 위치 조정

3. Dropdown 배경색 변경

4. Dropdown 구분선 추가

5. Dropdown 선택표시 : 글자색 변경

본문 순서대로 따라가시면 같은 결과를 쉽게 확인하실 수 있습니다.

그리고 해당 코드를 활용해서 원하는 Spinner UI를 만들 수 있을거라고 생각합니다!

 

 

1. Custom Spinner Layout 만들기

spinner_item.xml

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvItemName"
            android:layout_width="match_parent"
            android:layout_height="@dimen/common_spinner_height"
            android:background="@drawable/abc_spinner_mtrl_am_alpha"
            android:backgroundTint="#000000"
            android:ellipsize="marquee"
            android:gravity="center_vertical"
            android:paddingStart="15dp"
            android:paddingEnd="15dp"
            android:singleLine="true"
            android:text="TEXT"
            android:textColor="#ED7A2B" />
    </LinearLayout>
</layout>

spinner_dropdown_item.xml

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ABAD"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvDropdownItemName"
            android:layout_width="match_parent"
            android:layout_height="@dimen/common_spinner_height"
            android:ellipsize="marquee"
            android:gravity="center_vertical"
            android:paddingStart="15dp"
            android:paddingEnd="15dp"
            android:singleLine="true"
            android:text="TEXT"
            android:textColor="#000000" />

        <!-- Divider -->
        <TextView
            android:id="@+id/tvDivider"
            android:layout_width="match_parent"
            android:layout_height=".1dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:background="#666666" />
    </LinearLayout>
</layout>

(참조) dimens.xml

<resources>
    <dimen name="common_spinner_width">300dp</dimen>
    <dimen name="common_spinner_height">50dp</dimen>
</resources>

 

 

 

 

 

 

 

2. (Custom) SpinnerAdapter 만들기

class SpinnerAdapter(private val context: Context, private val items: Array<String>) : BaseAdapter() {

    private lateinit var spinnerItemBinding: SpinnerItemBinding
    private lateinit var spinnerDropdownItemBinding: SpinnerDropdownItemBinding

    override fun getCount(): Int {
        return items.size
    }

    override fun getItem(position: Int): String {
        return items[position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        spinnerItemBinding = DataBindingUtil.inflate(LayoutInflater.from(context), R.layout.spinner_item, parent, false)
        spinnerItemBinding.tvItemName.text = items[position]

        return spinnerItemBinding.root
    }

    override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
        spinnerDropdownItemBinding = DataBindingUtil.inflate(LayoutInflater.from(context), R.layout.spinner_dropdown_item, parent, false)
        spinnerDropdownItemBinding.tvDropdownItemName.text = items[position]

        // Selected Item SetTextColor
        if (items[position] == spinnerItemBinding.tvItemName.text.toString()) {
            spinnerDropdownItemBinding.tvDropdownItemName.setTextColor(Color.parseColor("#ED7A2B"))
        } else {
            spinnerDropdownItemBinding.tvDropdownItemName.setTextColor(Color.parseColor("#000000"))
        }

        // Last Divider Hide
        if (position == (count - 1)) {
            spinnerDropdownItemBinding.tvDivider.visibility = View.GONE
        }

        return spinnerDropdownItemBinding.root
    }
}

 

 

 

 

 

 

 

3. Spinner 속성 설정

activity_main.xml

<layout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <Spinner
            android:id="@+id/spinner"
            android:layout_width="@dimen/common_spinner_width"
            android:layout_height="@dimen/common_spinner_height"
            android:background="@drawable/spinner_bg"
            android:dropDownWidth="@dimen/common_spinner_width"
            android:dropDownVerticalOffset="@dimen/common_spinner_height"
            android:paddingEnd="15dp" />
    </LinearLayout>
</layout>

 

spinner_bg.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_mediumAnimTime">
    <item android:drawable="@android:color/white" android:state_pressed="true" />
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#cccccc" />
            <solid android:color="#f0f0f0" />
        </shape>
    </item>
</selector>

 

 

 

 

 

 

 

4. 실행 결과

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val data = arrayOf("Spring", "Summer", "Fall", "Winter")
        val adapter = SpinnerAdapter(this, data)
        binding.spinner.adapter = adapter
        binding.spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {

            }

            override fun onNothingSelected(parent: AdapterView<*>?) {

            }
        }
    }
}

 

 

 

 

 

 

 [Reference]

Custom Spinner Android Styling Tutorial