[android] Button의 color변경 (pressed, focus, default) 과 그라데이션 주기.

출처 : http://www.cyworld.com/prizm0911/3284619

아래 xml파일을 res/values 에 생성.

 

1.--------------------------------------------------------------------------------------------

 

color.xml

 

<?xml version="1.0" encoding="UTF-8"?> 
<resources>          
 <color name="pressed1">#959ca4</color> 
 <color name="pressed2">#646d79</color>
 
 <color name="focused1">#959ca4</color> 
 <color name="focused2">#646d79</color> 
  
 <color name="default1">#686e77</color> 
 <color name="default2">#40474f</color> 
 
 <color name="stroke">#00000000</color> 
</resources>

 

2.--------------------------------------------------------------------------------------------

 

아래 xml파일을 res 에 해당 drawable 에 생성.

여기서는 위 1 번에서 설정된 색을 가져와서 셋팅하게됩니다.

 

예> @color/pressed1 = color = xml파일, pressed1 = name

 

selector.xml

 

<?xml version="1.0" encoding="utf-8"?> 
<selector 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
 
    <item android:state_pressed="true" > 
        <shape> 
            <gradient 
                android:startColor="@color/pressed1" 
                android:endColor="@color/pressed2" 
                android:angle="270" /> 
            <stroke 
                android:width="3dp" 
                color="@color/stroke" /> 
            <corners 
                android:radius="3dp" /> 
            <padding 
                android:left="10dp" 
                android:top="10dp" 
                android:right="10dp" 
                android:bottom="10dp" /> 
        </shape> 
    </item>

    <item android:state_focused="true" > 
        <shape> 
            <gradient 
                android:endColor="@color/focused1" 
                android:startColor="@color/focused2" 
                android:angle="270" /> 
            <stroke 
                android:width="3dp" 
                color="@color/stroke" /> 
            <corners 
                android:radius="3dp" /> 
            <padding 
                android:left="10dp" 
                android:top="10dp" 
                android:right="10dp" 
                android:bottom="10dp" /> 
        </shape> 
    </item> 
 
    <item>         
        <shape> 
            <gradient 
                android:endColor="@color/default1" 
                android:startColor="@color/default2" 
                android:angle="270" /> 
            <stroke 
                android:width="3dp" 
                color="@color/stroke" /> 
            <corners 
                android:radius="3dp" /> 
            <padding 
                android:left="10dp" 
                android:top="10dp" 
                android:right="10dp" 
                android:bottom="10dp" /> 
        </shape> 
    </item>

</selector>

 

3.--------------------------------------------------------------------------------------------

 

해당 레이아웃 xml 파일 Button에 selector.xml 적용.

Button의 background에 drawable에 생성해둔 selector.xml 을 적용함으로써...

클릭, 포커스, 기본 색이 selector.xml 의 설정된 gradient 칼라로 적용되고, 코너라운드, 테두리, 간격등의 설정이 함께 적용됩니다.

 

main.xml

 

<--  생략  -->

 

   <Button
   android:layout_width="215px"
   android:layout_height="wrap_content"
   android:layout_marginTop="5px"
   android:layout_marginLeft="5px"
   android:layout_alignParentLeft="true"
   android:background="@drawable/selector"
   />

 

<-- 생략 -->

 

--------------------------------------------------------------------------------------------

 

아래는 제가 만들어본 버튼에 위 과정을 토대로 입혀본 결과.

왼쪽은 기본, 오른쪽은 포커스 되었을때와 클릭했을때 결과입니다.

color.xml 에서 색을 적절하게 변경하고 selector.xml 에서 설정등을 적절하게 변경해서 쓰면 좀더 이쁘고 유용하겠지요.