Android Selector 만들기

안드로이드 Selector 만들기 입니다.

EditText를 이용해서, 입력중인 EditText의 밑줄 색깔만 바꿔보겠습니다.

Selector는 특정 액션 (버튼 누르기, 현재 focus중인 View 표시 등)이 있을 때, 해당 View에 효과를 주는 기능입니다.

selector를 만들기 위해서는 3개의 drawable xml 파일이 필요합니다.

1. 평상시 EditText

2. focus가 된 EditText

3. 1번과 2번을 섞어서 만들어진 selector

 

먼저 평상시 EditText에 적용할 백그라운드를 만들어보겠습니다.

inputbox_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#123456"/>
        </shape>
    </item>

    <item
        android:bottom="2px">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>

</layer-list>

흰색 바탕에 #123456 색깔의 밑줄이 들어갔습니다. 밑줄의 두께는 2px입니다.

 

다음으로, 텍스트 입력을 위해 선택되어진 EditText에 적용할 백그라운드입니다.

inputbox_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#654321"/>
        </shape>
    </item>

    <item
        android:bottom="2px">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>

</layer-list>

inputbox_normal.xml과 똑같고, 밑줄 색깔만 #654321로 변경되었습니다.

 

이제 이 두개를 섞어서 selector를 만들어보겠습니다.

inputbox_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"  android:drawable="@drawable/inputbox_focused"/>
    <item android:drawable="@drawable/inputbox_normal"/>
</selector>

android:state_focused="true" --> 이 xml 파일을 background로 하는 뷰가 focused 됐을 때,

android:drawable="@drawable/inputbox_focused" --> 해당 뷰의 background를 이 drawable로 교체

android:drawable="@drawable/inputbox_normal" --> 해당 뷰의 기본 background는 이 drawable

이렇게 만들어진 inputbox_selector.xml을 EditText의 background로 지정해주면 끝입니다.

 

EditText에 백그라운드 적용

<EditText
        android:id="@+id/input_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:nextFocusDown="@id/input_pw"
        android:background="@drawable/inputbox_selector"/>