안드로이드 프로그래밍 모서리 둥근 버튼 만들기 (색상, 그라데이션, 테두리, 스타일, 이미지 버튼 가장자리를 둥글게 만들기)

안드로이드 프로그래밍에서 버튼을 디자인하는 방법에는 여러가지가 있습니다. 가장 많이 사용하는 방식이 이미지 파일(JPG, PNG 파일 등)을 사용하는 방식으로, 이것은 디자이너의 도움이 필요한 부분입니다. 예쁜 이미지 하나면 모든게 해결 가능하며, 그것을 9 Patch 이미지로 만들었을 때는 화면 크기가 변해도 대응이 가능합니다. 이미지 제작이 어려우면 이것을 코드로 해결해야 하는데 한계는 있지만 조금 노력을 기울이면 이미지 버튼과 비슷한 퀄리티의 버튼을 만들 수가 있습니다. 그리고 코드로 만들면 아무래도 디자인은 별로지만 이미지보다 레이아웃면에서 유연한 점은 있습니다. 이번에는 포토샵을 잘 못한다는 전제하에 프로그래밍으로 모서리가 둥근 버튼을 만들어 보겠습니다.

 

안드로이드 프로그래밍에서 모서리가 둥근 버튼 만들기

우선 실행 결과 화면을 먼저 봅시다. 화면에 총 6개의 버튼이 있는데 디자인이 영 별로네요. 예쁜 색을 사용할 수도 있었지만 귀찮아서 RGB로만 꾸며보았습니다. 버튼의 모서리가 둥근 것이 포인트이며, 버튼 6개에 조금씩 변화(solid, corners, padding, stroke, gradient, size, style 등)를 줬습니다. 결과물을 봤으니 어떻게 해서 이런 화면이 나왔는지 소스코드를 살펴봅시다. 디자인만 살펴보는 것이라서 자바(.java) 파일은 볼 필요가 없습니다. 

 

round_button1.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
<!-- 평상시 -->
   <item android:state_focused="false" android:state_pressed="false">
      <shape>
         <solid android:color="#FFFF0000" />
         <corners android:radius="10dp" /> 
      </shape>
   </item>

<!-- 클릭했을 때 -->
   <item android:state_focused="false" android:state_pressed="true">
      <shape>
         <solid android:color="#FF00FF00" />
         <corners android:radius="10dp" />
      </shape>
   </item>    
   
</selector>

안드로이드에서 모서리가 둥근 버튼을 만들기 위해서는 셀렉터(selector)라는 것을 사용합니다. 셀렉터는 또 다시 버튼의 상태에 따라 아이템(item) 엘리먼트(태그)를 만들어야 하며, 또 그안에 shape태그를 사용해서 버튼의 모양을 정의하게 됩니다. 주석을 보면 알겠지만 android:state_pressed가 true라는 것은 클릭(터치)한 상태를 말합니다. 여기서는 평상시와 클릭했을 때로 구분했지만 필요하다면 더 다양한 상태(state)를 제어할 수 있습니다. (보통 스마트폰에서는 평상시 버튼과 클릭했을 때의 버튼 2가지만 정의해도 충분한 합니다.)

버튼1은 가장 기본이 되는 둥근 버튼인데, shape태그 안에 solid와 corners만 사용해서 만들었습니다. solid에서는 버튼의 색상을 지정할 수 있고, corners에서는 버튼의 둥근 정도를 조절할 수 있습니다.

 

round_button2.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
<!-- 평상시 -->
   <item android:state_focused="false" android:state_pressed="false">
      <shape>
         <solid android:color="#FF00FF00" />
         <corners android:radius="1000dp" /> 
         <padding android:bottom="30dp" android:left="30dp"
                  android:right="30dp" android:top="30dp" />
      </shape>
   </item>
   
<!-- 클릭했을 때 -->
   <item android:state_focused="false" android:state_pressed="true">
      <shape>
         <solid android:color="#FF00FF00" />
         <corners android:radius="10dp" />
         <padding android:bottom="30dp" android:left="30dp"
                  android:right="30dp" android:top="3dp" />
      </shape>
   </item>   
    
</selector>

버튼2에서는 solid, corners 태그에 padding 태그(버튼의 테두리와 내용물 사이의 빈공간)를 추가하였고, corners의 android:radius 속성에 큰 값(1000dp)을 줘서 완전 둥근원에 가깝게 버튼 모양을 설정했습니다.

 

round_button3.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
<!-- 평상시 -->
   <item android:state_focused="false" android:state_pressed="false">
      <shape>
         <solid android:color="#FFFF0000" />
         <corners android:radius="10dp" />
         <stroke android:color="#FF00FF00" android:width="5dp" /> 
         <padding android:bottom="20dp" android:left="20dp"
                       android:right="20dp" android:top="20dp" />
      </shape>
   </item>

<!-- 클릭했을 때 -->
   <item android:state_focused="false" android:state_pressed="true">
      <shape>
         <solid android:color="#FF00FF00" />
         <corners android:radius="10dp" />
      </shape>
   </item>    

</selector>

버튼3에서는 stroke 태그에 color속성, width속정을 정의하여 버튼 테두리를 만들었습니다.

 

round_button4.xml

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

    <!-- 평상시 -->
    <item android:state_focused="false" android:state_pressed="false">
        <shape>
            <corners android:radius="10dp" />
            <stroke android:width="5dp" android:color="#FF00FF00" />
            <gradient android:angle="45" android:centerColor="#FF00FF00" 
                      android:endColor="#FF0000FF" android:startColor="#FFFF0000" 
                      android:type="sweep" />
            <padding android:bottom="20dp" android:left="20dp" android:right="20dp" android:top="20dp" />
        </shape>
    </item>

    <!-- 클릭했을 때 -->
    <item android:state_focused="false" android:state_pressed="true">
        <shape>
            <solid android:color="#FF00FF00" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</selector>

버튼4에서는 버튼에 그레디언트(gradient)효과를 줬습니다. gradient 태그에는 다양한 속성이 있는데 처음색, 중간색, 끝색, 각도, 타입 등을 설정할 수 있습니다.

 

round_button5.xml

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

    <!-- 평상시 -->
    <item android:state_focused="false" android:state_pressed="false">
        <shape>
            <corners android:radius="10dp" />
            <stroke android:width="2dp" android:color="#FF0000FF" />
            <size android:height="100dp" android:width="50dp" />
        </shape>
    </item>

    <!-- 클릭했을 때 -->
    <item android:state_focused="false" android:state_pressed="true">
        <shape>
            <solid android:color="#FF00FF00" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</selector>

버튼5에서는 size 태그로 버튼 크기를 조절했고, activity_main.xml의 버튼 위젯에 drawableTop을 지정하여 버튼에 아이콘이 출력되도록 만들어 보았습니다.

 

round_button6.xml

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

    <!-- 평상시 -->
    <item android:state_focused="false" android:state_pressed="false">
        <shape>
            <corners android:radius="10dp" />
            <stroke android:width="3dp" android:color="#FF00FF00" />
        </shape>
    </item>

    <!-- 클릭했을 때 -->
    <item android:state_focused="false" android:state_pressed="true">
        <shape>
            <solid android:color="#FF00FF00" />

            <corners android:radius="10dp" />
        </shape>
    </item>

</selector>

버튼6은 별다는 코드는 없고, activity_main.xml에서 style.xml 스타일을 적용시켜 보았습니다.

 

styles.xml

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    
    <style name="button_style">
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_margin">20dp</item>
        <item name="android:padding">20dp</item>
        <item name="android:textSize">12sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#ff998877</item>
    </style>

</resources>

style.xml에서는 버튼6에서 사용할 button_style을 정의했습니다.

 

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context="com.example.helloworld.MainActivity" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_button1"
        android:layout_margin="5dp"
        android:text="버튼1"
        />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_button2"
        android:layout_margin="5dp"
        android:text="버튼2"
        />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_button3"
        android:layout_margin="5dp"
        android:text="버튼3"
        />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_button4"
        android:layout_margin="5dp"
        android:text="버튼4"
        />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_button5"
        android:layout_margin="5dp"
        android:text="버튼5"
        android:textColor="#FFFFFFFF"
        android:drawableTop="@drawable/ic_launcher"
        />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/button_style"
        android:background="@drawable/round_button6"
        android:layout_margin="5dp"
        android:text="버튼6"
        />

</LinearLayout>

activity_main.xml에서는 LinearLayout 안에 단순하게 버튼6개를 배치하고 있습니다. 버튼5에서 drawableTop속성을 사용하고, 버튼6에서 style속성을 사용하는 것 말고는 특이한 점이 없습니다.

 

너무 간단한 내용이라 뭐라 설명할 내용이 없네요. 잘 모르겠으면 그냥 소스코드를 가져다 쓰면 됩니다. 예제를 간단하게 하기 위해 dimens.xml과 string.xml파일을 사용하지 않았는데, 실전에서는 꼭 적용하는 것이 좋습니다. 그래야 변경사항이 있을 때 한큐에 모든 수정할 수 있으니까요. 여기까지 제대로 알았다면, 이제는 디자인 감각을 끌어내 최대한 버튼을 예쁘게 만드는 일만 남았습니다. 색상을 잘 선택하고, 마진(margin), 패딩(padding) 값을 적당히 주면 꽤 괜찮은 결과물이 나올 것으로 생각됩니다. 그래도 버튼이 마음에 들지 않는다면, 코드로 표현할 수 있는 디자인에는 한계가 있으니, 디자이너와 친하게 지내던가 아니면 포토삽, 일러스트를 공부하시길 바랍니다. 그럼 행복한 코딩하세요!

 

[Android] - 안드로이드 프로그래밍 정사각형 버튼 만들기 (TextView, Button, ImageView 등 다양한 위젯에서 응용 가능, Button 상속 사용)

[Android] - 안드로이드 ImageView 멀티터치 핀치 줌(Pinch Zoom) 기능 구현하기 (PhotoView 라이브러리 사용법, 두 손가락으로 이미지 확대 축소하기)

[Android] - 안드로이드 개발환경 이클립스ADT(Eclipse ADT)에서 블럭선택(Toggle block Selection) 편집모드 사용하여 소스코드 편집하기 (블록선택 기능 단축키 설정 변경)

[Android] - 안드로이드 프로그래밍 샘플 소스코드 실행 방법 (Android Sample Project ApiDemos 예제 프로젝트 만들기)

[Android] - 안드로이드 프로그래밍 프로젝트 백업, 복구, 삭제 방법 (이클립스 Export, Import, Delete 사용법, 프로젝트 관리)