android selector xml 사용 (뷰를 터치시 색상 효과 주기)

selector라는 엘리먼트를 사용하면 뷰를 선택했을 때와 안했을 때의 색상을 다르게 줄 수 있다.

마치 웹프로그래밍 시에 css에서 hover와 같은 효과라고 볼 수 있다.

우선 selector엘리먼트를 정의 할 xml 파일을 하나 만들어야 되니

res/drawable 디렉토리에서 마우스 오른쪽을 클릭해서 resource파일 추가로 해서 만든다.

selector_ex.xml

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


    <item
          android:drawable="@color/colorPrimary" />

</selector>

위가 selector의 기본 구조이며, 안에 item엘리먼트가 존재하는데 여기에서 어떤 상태에 따라서 색상을 줄 수 있는가를 지정할 수 있다.

상태의 목록

android:state_enable : 사용 가능 상태

android:state_selected : 선택 상태

android:state_pressed : 클릭 상태 (눌려있는 경우)

android:state_focused : 포커스 상태

android:state_checked : 체크된 상태

다음은 layout xml파일에서 뷰들에게 이 selector를 지정한다.

  <Button
        android:id="@+id/showButton"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:textSize="20dp"
        android:background="@drawable/selector_ex"/>

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="텍스트를 입력하세요."
        android:textSize="20dp"
        android:background="@drawable/selector_ex"/>

background속성에 selector파일을 지정하면 된다.

버튼과 텍스트에딧 뷰 둘 전부에 만들어 둔 selector_ex.xml파일을 따르라고 background에 지정해 주었다.

이제 이 둘의 뷰는 터치하고 있으면 색상이 변하게 된다.

결과화면

- 버튼 뷰는 터치하고 있는 상태이다.