[Android] Customizing Spinner arrow icon

[잊어버릴까봐 기록]

 

Android Application 개발 과정에서 Spinner의 화살표 아이콘을 바꿔야 했다.

 

 

우선, layout에 Spinner를 등록한다.

해당 Spinner의 background를 customizing한 xml 파일을 등록한다.

또한, Spinner에서 arrow icon을 클릭해서 펼쳐졌을 때, 해당 형태를 그대로 유지하기 위해 popupBackground에도 customizing한 xml 파일을 등록한다.

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="64dp"
        android:layout_height="27dp"
        android:layout_centerInParent="true"
        android:background="@drawable/convert_spinner_arrow"
        android:spinnerMode="dropdown"
        android:dropDownWidth="64dp"
        android:popupBackground="@drawable/convert_spinner_arrow"
        />

 

다음은 customizing한 convert_spinner_arrow.xml 파일이다. 

preview로 확인해보면 아래와 같은 결과를 확인할 수 있다.

@drawable/ic_baseline_keyboard_arrow_down_24는 drawable 폴더에서 오른쪽 마우스 > new > vector asset 에서 얻을 수 있다.

이 방식의 단점이 있다면, 스마트폰 별로 해상도가 다른데, 이 해상도에 따라 모양이 일그러질 가능성이 존재한다.

또한, Spinner의 사이즈에 따라서도 달라지므로, Spinner의 사이즈가 크다면, 아래 파일의 width와 height 값을 적절히 수정해주어야 한다.

res/drawable/convert_spinner_arrow.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape>
                    <solid
                        android:color="@color/colorWhite">
                    </solid>
                    <corners
                        android:radius="3dp"/>
                    <stroke
                        android:width="1dp"
                        android:color="@color/colorBlack"/>
                </shape>
            </item>
            <item android:drawable="@drawable/ic_baseline_keyboard_arrow_down_24"
                android:width="24dp" android:height="24dp" 
                android:gravity="right|top" android:start="10dp" android:top="1dp">
            </item>

        </layer-list>
    </item>
</selector>

 

사용은 다음과 같이 한다.

ArrayList<String> arrayList = new ArrayList<>();
for(int i = 0; i < 7; i++){
	arrayList.add("test" + i);
}
Spinner spinner = (Spinner)findViewById(R.id.spinner);
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(this, R.layout.support_simple_spinner_dropdown_item, arrayList);
spinner.setAdapter(arrayAdapter);

 

이렇게 사용할 수 있으나, Spinner 안의 Text가 너무 왼쪽에 붙어있어 보기 불편하다는 생각이 들었다.

따라서, Padding을 주기 위해 다음과 같은 layout을 만들어 adapter에 등록하였다.

 

res/layout/spinner_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:text="@+id/TextView01"
    android:id="@+id/TextView01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingStart="5dp"
    android:paddingTop="2dp"
    android:paddingBottom="2dp"
    android:textSize="12dp"
    android:textColor="#000000">
</TextView>

 

위와 같은 xml 파일을 생성한 후, 아래 코드와 같이 adapter 부분을 수정한다.

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(this, R.layout.spinner_item, arrayList);

 

실행을 해보면 다음과 같이 나온다.