[안드로이드] xml selector - 버튼 눌림(클릭) 효과 커스텀하여 만들기

안드로이드 버튼(Button) 위젯은 클릭(터치)했을때 버튼이 눌리는 효과가 발생한다.

 

하지만 이는 단조로운 색으로 한 가지의 버튼 클릭 효과만 제공한다.

 

그럼 둔탁한 회색의 버튼만 사용해야 되는 것인가? 

 

아니다. 버튼의 속성중에 android:background 에 이미지나 색을 넣어주면 된다..

 

하지만 이 방법도 썩 좋은 방법은 아니다. 

 

버튼에 이미지 또는 색을 넣어도 버튼이 눌렸을때의 효과를 볼 수 없다. 그러면 어찌하면 되는가?

 

이 때 바로 쓰이는 방법이 selector를 만드는 것이다.

 

 

 

 

 

selector xml의 이벤트 종류중 일반적으로 많이 쓰는 것은 6개 정도로 추릴 수 있다.

 

android:state_pressed = [true(눌렸을때) , false(안눌렸을때)]

 

android:state_checked = [true(체크했을때) , false(체크해제시)]

 

android:state_enabled = [true(사용가능할때) , false(사용불가할때)]

 

android:state_focused = [true(포커스 되었을때) , false(포커스되지 않았을때)]

 

android:state_selected = [true(선택 되었을때) , false(선택되지 않았을때)]

 

 

우선 이미지 두장으로 state_pressed 이벤트가 정의된 selector를 만들어보겠다.

 

 

 

위의 button01_normal.png 와 button01_press.png 이미지를 준비하여  res/drawable/ 폴더에 넣어준다.

 

button01_normal.png 이미지는 눌리지 않고 이벤트가 없을 때의 이미지이다.

 

buton01_press.png  이미지는 눌렸을때의 이벤트가 생길 때 사용할 이미지이다.

 

 

* selector_image.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- selector가 눌렸을때 @drawable/button01_press 를 보여준다.-->
    <item android:state_pressed="true" android:drawable="@drawable/button01_press"/>

    <!-- selector가 눌리지 않았을때 @drawable/button01_normal 를 보여준다.-->
    <item android:state_pressed="false" android:drawable="@drawable/button01_normal"/>

</selector>

설명은 위에 주석달은 것을 보면 쉽다.

 

android:state_presed 와 같은 이벤트 발생시 android:drawable 에 해당 이미지를 넣어주면 되는것이다.

 

 

 

위와 같이 다른 이벤트의 selector도 만들 수 있다.

 

* selector_checked.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/button01_press"/>
    <item android:state_checked="false" android:drawable="@drawable/button01_normal"/>
</selector>

 

* selector_enabled.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="@drawable/button01_press"/>
<item android:state_enabled="false" android:drawable="@drawable/button01_normal"/>
</selector>

* selector_focused.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/button01_press"/>
    <item android:state_focused="false" android:drawable="@drawable/button01_normal"/>
</selector>

 

* selector_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_selected="true" android:drawable="@drawable/button01_press"/>
    <item android:state_selected="false" android:drawable="@drawable/button01_normal"/>
</selector>

 

 

그리고 효과 이미지대신 개발자가 직접 그려 만들 수가 있다.

 

resource 용량이 많을때 아래와 같은 방법으로 selector를 만들면 꽤 많이 resource 를 절약할 수 있을 것이다.

 

* selector_pressed.xml

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

        <!--image대신 직접 selector를 그리겠다고 선언한다. -->
        <shape >

            <!--도형안에 채워질 색을 정의한다.-->
            <solid android:color="#FF0000"/>

            <!-- width = 테두리 선의 굴기, color = 테두리 선의 색을 정의한다.-->
            <stroke android:width="2dp" android:color="#4b4c4c"/>

            <!--각 모서리의 라운드 처리 - 값이 클수록 라운드의 각이 커진다.-->
            <corners android:bottomLeftRadius="12dp" android:bottomRightRadius="12dp" android:topLeftRadius="12dp" android:topRightRadius="12dp"/>

        </shape>
    </item>

    <!--위와 동일하다.
    -->
    <item android:state_pressed="false">
        <shape >
            <gradient android:angle="270" android:endColor="#ff0000" android:startColor="#00ff00"/>
            <stroke android:width="2dp" android:color="#0000ff"/>
            <corners android:bottomLeftRadius="12dp" android:bottomRightRadius="12dp" android:topLeftRadius="12dp" android:topRightRadius="12dp"/>
        </shape>
    </item>
</selector>

 

 

위 selector 들을 하나의 화면에서 보여보겠다.

 

* activity_main.xml - 여기에 모두 선언한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="15dp"
    android:orientation="vertical">

    <!--selector_image-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="170dp"
            android:layout_height="50dp"
            android:gravity="center_vertical|left"
            android:textColor="#000000"
            android:textSize="16dp"
            android:text="selector image => "/>
        <Button
            android:id="@+id/selector_image"
            android:layout_width="140dp"
            android:layout_height="50dp"
            android:textColor="#000000"
            android:text="Hello World!"
            android:background="@drawable/selector_image">
        </Button>
    </LinearLayout>

    <!--selector_pressed-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="170dp"
            android:layout_height="50dp"
            android:gravity="center_vertical|left"
            android:textColor="#000000"
            android:textSize="16dp"
            android:text="selector pressed => "/>
        <Button
            android:id="@+id/selector_pressed"
            android:layout_width="140dp"
            android:layout_height="50dp"
            android:textColor="#ffffff"
            android:text="Hello World!"
            android:background="@drawable/selector_pressed">
        </Button>
    </LinearLayout>

    <!--selector_focused-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="170dp"
            android:layout_height="50dp"
            android:gravity="center_vertical|left"
            android:textColor="#000000"
            android:textSize="16dp"
            android:text="selector focused => "/>
        <EditText
            android:id="@+id/selector_focused"
            android:layout_width="140dp"
            android:gravity="center"
            android:textColor="#ffffff"
            android:layout_height="50dp"
            android:text="Hello World!"
            android:background="@drawable/selector_focused">

        </EditText>
    </LinearLayout>

    <!--selector_selected-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="170dp"
            android:layout_height="50dp"
            android:gravity="center_vertical|left"
            android:textColor="#000000"
            android:textSize="16dp"
            android:text="selector selected => "/>
        <TextView
            android:id="@+id/selector_selected"
            android:layout_width="140dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="Hello World!"
            android:background="@drawable/selector_selected">
        </TextView>
     </LinearLayout>

    <!--selector_endabled-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="170dp"
            android:layout_height="50dp"
            android:gravity="center_vertical|left"
            android:textColor="#000000"
            android:textSize="16dp"
            android:text="selector enable => "/>
        <TextView
            android:id="@+id/selector_enabled"
            android:layout_width="140dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="Hello World!"
            android:background="@drawable/selector_endabled">
        </TextView>
     </LinearLayout>

    <!--selector_checked-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="170dp"
            android:layout_height="50dp"
            android:gravity="center_vertical|left"
            android:textColor="#000000"
            android:textSize="16dp"
            android:text="selector chcked => "/>
        <CheckBox
            android:id="@+id/selector_checked"
            android:layout_width="140dp"
            android:layout_height="50dp"
            android:background="@drawable/selector_checked"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="Hello World!">
        </CheckBox>
    </LinearLayout>

    <!--초기 실행시 포커스를 여기로 초기화 한다.-->
    <EditText
        android:layout_width="100dp"
        android:layout_height="50dp" >
        <requestFocus/>
    </EditText>
</LinearLayout>

 

 

* MainActivity.java

package com.studio572.sampleselector;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        final TextView selector_selected = (TextView) findViewById(R.id.selector_selected);
        final TextView selector_endabled = (TextView) findViewById(R.id.selector_enabled); 
        final EditText selector_focused = (EditText) findViewById(R.id.selector_focused);


        // 클릭시 포커스를 준다.
        selector_focused.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                selector_focused.requestFocus();
            }
        });

        // 클릭시 비사용 모드로 바꾼다.
        selector_endabled.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                selector_endabled.setEnabled(false);
            }
        });

        // 클릭시 선택된다.
        selector_selected.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                selector_selected.setSelected(true);
            }
        });
    }
}