[Android] 버튼 스타일 변경

---

안드로이드에서 기본적으로 지원해주는 버튼의 형식은 회색 바탕의 네모 박스 모양입니다.

대게 테스트용 프로그램 등을 작성할때 사용하고 디자인이 입혀지는 경우에는 버튼 이미지

디자인을 따로 진행하기 때문에 이러한 버튼의 스타일이나 모양을 신경 쓰지 않습니다.

 

하지만 디자인을 할만한 규모의 프로젝트가 아니라 간단하게 모서리가 약간만 둥글게 그리고

색상이 달랐으면 좋겠다고 할 때에는 버튼의 스타일을 직접 만들어 써야 합니다.

 

이번 글에서는 버튼의 모양중에서 모서리를 둥글게 깎아내고 색상을 회색톤이 아닌 다른 색상으로

변경하는 방법에 대해 한번 알아보도록 하겠습니다.

 

먼저 기본적인 버튼을 구성할 때 소스코드는 다음과 같습니다.

 

<Button
android:id="@+id/page1_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="버튼"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:textSize="25dp"
android:textStyle="bold"
android:textColor="#ffffff"></Button>

 

해당 코드를 XML파일에 작성하고 실행하면 기본 모양의 버튼이 생성됩니다.

이 자체로도 나쁘지는 않지만 너무 성의 없어 보인다고 해야 할까요

어쨌든 버튼의 모양을 한번 커스텀 마이징 해보도록 하겠습니다.

 

 

먼저 res 폴더 하위에 drawable폴더 내에 button_patter.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="#0D5500"
                android:endColor="#0D5500"
                android:angle="270" />  
            <stroke  
                android:width="2dp"  
                android:color="#0D5500" />
            <corners  
                android:radius="20dp" />  
            <padding  
                android:left="10dp"  
                android:top="10dp"  
                android:right="10dp"  
                android:bottom="10dp"/>
        </shape> 
    </item>

        <!-- pressed -->
    
        
    <item android:state_focused="true">
        <shape>  
            <gradient  
                android:startColor="#14B61A"
                android:endColor="#14B61A"
                android:angle="270" />  
            <stroke  
                android:width="2dp"  
                android:color="#14B61A" />
            <corners  
                android:radius="2dp" />  
            <padding  
                android:left="10dp"  
                android:top="10dp"  
                android:right="10dp"  
                android:bottom="10dp"/>
        </shape>  
    </item>
       <!-- focused -->
    
       
    <item>
	<shape>  
            <gradient  
                android:startColor="#14B61A"
                android:endColor="#14B61A"
                android:angle="90" />  
            <stroke  
                android:width="2dp"  
                android:color="#14B61A" />
            <corners  
                android:radius="20dp" />  
            <padding  
                android:left="10dp"  
                android:top="10dp"  
                android:right="10dp"  
                android:bottom="10dp"/>
        </shape>  
    </item> 
    <!-- default -->
</selector>

 

첫 번째 아이템은 버튼이 눌렸을 때 모양을 정의합니다.

기본적인 색상보다 더욱 진한 색상을 하여 눌렸다는 것을 인지할 수 있도록 했습니다.

 

두 번째 아이템은 눌리지 않은 상황의 모양으로 첫 번째 아이템보다

밝은 색조로 설정하여 두 개의 차이점을 주었습니다.

이렇게 하면 눌렸을 때와 눌리지 않았을 때 색상이 차이가 나기 때문에 좀 더 역동적인 버튼 구현이 가능합니다.

 

마지막 아이템은 버튼의 기본 상태로 Default 모양을 설정합니다.

이 부분은 눌리지 않은 상태인 두 번째 상태와 색상을 동일하게 하였습니다.

 

자 이제 다시 맨 처음 버튼을 구현했던 xml파일에서 다음과 같이 변경됩니다.

 

<Button
android:id="@+id/page1_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="버튼"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:textSize="25dp"
android:textStyle="bold"
android:textColor="#ffffff"
android:background="@drawable/button_pattern"></Button>

 

여기서는 맨 아래에 background 쪽에 button_pattern으로 만들어 둔 스타일을 적용시킵니다.

이제 프로젝트를 실행시켜 보면 기존 회색 바탕에 네모였던 버튼의 모양이 둥글게 변경되고

색상도 녹색으로 변경된 것을 확인할 수 있습니다.

 

색상은 원하시는 색상으로 변경하셔 사용하시면 됩니다.