xml로 버튼 커스텀 하기(shape)

 얼마전 xml이 아니라 kotlin을 통해 버튼을 커스텀하는 방법에 대해 글을 썼던 기억이 있습니다. 그런데 이번에는 xml을 통해 버튼의 이미지를 커스텀하는 방식에 대해 설명해보고자 합니다.

 실은 제가 많이 까먹더라구요. 자주 쓰는 부분이 아니라 한 번 만들어두면 계속 사용하다보니 새 프로젝트를 들어갈 때 마다 다른 글들을 봐야 해서 아예 새로 하나를 정리해두려고 합니다.

 

 먼저 xml로 만들 수 있는 기본적인 drawable은 shape와 selector 두 가지가 있습니다. 이번 글에서는 shape를 다루도록 하겠습니다.

---

 shape는 기본적으로 4가지 값을 지정할 수 있습니다. rectangle, oval, line, ring 인데 차례대로 사각형, 타원, 선, 링입니다. 사각형과 선에 대해서는 크게 특이할 것이 없지만, ring의 경우는 조금 특이하게 안쪽 반지름과 바깥쪽 반지름을 통해 2개의 원을 그리는 느낌이라고 생각할 수 있습니다.

 

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

 

 xmlns를 통해 기본적인 nameSpace를 설정한 후, shape를 통해 특성을 정의할 수 있습니다.

 

 그리고 설정을 하고 난 후, 이제 shape를 통해 자신이 만들 bg를 선택해야 합니다. 이를 위해 사용할 수 있는 코드는 corners, gradient, padding, solid, stroke등이 있습니다. 또한 ring에는 여러가지 추가 사항을 적용할 수 있는데 이는 조금 있다 확인해보겠습니다.

 

<corners
    android:radius="12dp" //한 번에 설정하는 개념
    android:bottomLeftRadius="15dp"
    android:bottomRightRadius="15dp"
    android:topLeftRadius="15dp"
    android:topRightRadius="15dp" />

 corners는 각 코너를 얼마나 깍을 것인가에 대해 설정하는 부분입니다. 이 속성을 지정하게 되면 가장 자리를 둥글게 만들 수 있습니다.

 

<gradient
    android:type="sweep" // 그라데이션 종류
    android:centerX="0.4" // 중심의 x 값
    android:centerY="0.6" // 중심의 y 값
    android:centerColor="#ffffff" // 가운데 색상
    android:startColor="#ff0000" // start로 설정된 부분의 색
    android:endColor="#0000ff" // end로 설정된 부분의 색
    android:angle="0" //각도
/>

 gradient는 그라데이션을 주기 위해 사용하는 코드입니다. (저는 개인적으로는 자주 사용하지 않습니다. 디자인 적인 것들은 대부분 이미지 처리를 하기 떄문에...)

 centerX, centerY와 같은 코드의 경우 type이 linear일 때 적용이 되지 않습니다. 

 

<padding
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp" />

 

 패딩의 경우에는 다른 xml 파일에서도 자주 사용하듯, 이미지 내부에 공간을 두겠다는 의미입니다. 만약 버튼의 배경에 패딩을 먹인다면 텍스트 같은 것들이 패딩이 먹은 상태로 나올 수 있습니다. (이 부분은 layout 부분에서 수정을 해주어도 괜찮기 때문에 저는 잘 사용하지 않습니다.)

 

<size
    android:width="200dp"
    android:height="200dp" />

 

 사이즈는 직접 만든 drawable의 크기를 지정해줍니다. wrap_content를 통해 layout에서 도형을 사용할 경우 이 사이즈로 고정이 된다고 볼 수 있습니다.

 

<stroke
    android:width="1dp"
    android:color="#000000" 
    android:dashGap="5.00dp"
    android:dashWidth="10.00dp"/>

 

 stroke은 선의 색상입니다. 색상이 바깥쪽 부분부터 시작해서 안쪽으로 들어오기 때문에 width를 잘 조절하면 원하는 크기의 테두리 색상을 만들어낼 수 있습니다. 또한 dashGap과 같은 속성을 통해 도형의 점선을 만들 수도 있습니다.

 

<solid android:color="@color/white" />

 면의 색상을 의미하는 solid는 도형의 안쪽 부분의 색상을 지정할 수 있습니다. stroke와 같이 사용할 경우 테두리와 안 쪽 색상을 다르게 적용할 수 있습니다.

 

---

 xml에 적용하는 부분은 어려운 부분은 없다고 생각합니다. 하지만 역시 아무것도 모르면 쓸 수가 없다보니 틈틈히 무엇이 있었는지 알아주는 것이 좋을 것 같습니다.