[Android] 안드로이드 버튼 효과 커스텀 - Selector

[Android] 버튼 효과 커스텀 하기

android button view custom

   Selector 속성

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

위 옵션은 ture/false형태로 작성 될 것이고 button에서는 주로 pressed 옵션으로 효과만 사용하여 만들 것이다.

참고 : Color State List Resource

android:state_pressed

Boolean. "true" if this item should be used when the object is pressed (such as when a button is touched/clicked); "false" if this item should be used in the default, non-pressed state.

android:state_focused

Boolean. "true" if this item should be used when the object is focused (such as when a button is highlighted using the trackball/d-pad); "false" if this item should be used in the default, non-focused state.

android:state_selected

Boolean. "true" if this item should be used when the object is selected (such as when a tab is opened); "false" if this item should be used when the object is not selected.

android:state_checkable

Boolean. "true" if this item should be used when the object is checkable; "false" if this item should be used when the object is not checkable. (Only useful if the object can transition between a checkable and non-checkable widget.)

android:state_checked

Boolean. "true" if this item should be used when the object is checked; "false" if it should be used when the object is un-checked.

android:state_enabled

Boolean. "true" if this item should be used when the object is enabled (capable of receiving touch/click events); "false" if it should be used when the object is disabled.

android:state_window_focused

Boolean. "true" if this item should be used when the application window has focus (the application is in the foreground), "false" if this item should be used when the application window does not have focus (for example, if the notification shade is pulled down or a dialog appears).

   안드로이드 버튼 이미지로 커스텀 하기

커스텀할 버튼 이미지를 res/drawable 폴더에 btn_normal.png와 btn_pressed.png를 넣어 둔다.

 

< btn_normal.png >

< btn_pressed.png >

res/drawable/button_selector.xml 파일을 생성한다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Button 눌렀을 때 -->
    <item android:drawable="@drawable/btn_pressed" android:state_pressed="true"></item>
    <!-- Button 이벤트 없을 때 --> 
    <item android:drawable="@drawable/btn_normal" android:state_pressed="false"></item>
</selector>

사용할 Button View에 background를 button_selector로 지정하여 이미지 버튼 커스텀을 완성한다.

<Button
	android:id="@+id/button"
	android:layout_width="82dp"
	android:layout_height="28dp"
	android:background="@drawable/button_selector" />

width와 heigt는 이미지 생성시 고려하여 생성하거나 생성된 이미지에 맞추서 제작하도록 한다. 

   안드로이드 버튼 xml만 사용하여 (Shape) 커스텀 하기

버튼을 이미지 생성없이 효과를 주기 위해 Shape의 속성만으로 버튼을 커스텀 효과를 줄 수 있다.

기본적으로 Shape에 대한 속성을 알고 있으면 다양한 효과를 줄 수 있다. 

아래 내용은 Gradient와 Corner효과만으로 효과적인 버튼을 만든다.

참고 : Shape Drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:state_pressed="true">
        <shape >
            <solid android:color="#c71a1a"/>
            <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="#c71a1a"
                android:startColor="#ffb9b9"/>            
            <stroke 
                android:width="2dp"
                android:color="#4b4c4c"/>
            <corners 
                android:bottomLeftRadius="12dp"
            	android:bottomRightRadius="12dp"
            	android:topLeftRadius="12dp"
            	android:topRightRadius="12dp"/>
        </shape>
    </item>
</selector>

selector xml 하나만 res/drawable에 생성해두고 위와 같이 Button Background 속성에 가져다 쓰면 xml만으로 다양한 효과를 버튼에 커스텀 할 수 있다.