[Android] image와 text가 있는 버튼(Button) (feat. 테두리 변형)

해당 포스팅은 이미지(image)와 텍스트(text)가 모두 있는 버튼을 만드는 방법에 대해 설명한다.

보통 버튼에 이미지를 넣기 위해서는 ImageButton 위젯을 사용하는데,

아래와 같이 이미지와 텍스트가 모두 넣고 싶은 경우에는 Button을 사용한다.

 

        <Button
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@drawable/btn_signin_round"
            android:backgroundTint="@color/colorFacebookSingIn"
            android:drawableLeft="@drawable/btn_signin_facebook_logo"
            android:paddingLeft="10dp"
            android:textColor="@color/white"
            android:text="@string/signin_facebook"
            android:layout_marginBottom="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"/>

위의 코드는 화면 캡쳐 이미지의 가장 아래에 위치한 FACEBOOK LOGIN 버튼이다.

Button에 이미지와 텍스트를 넣기 위해서는 android:drawable~ 속성과 android:text 속성이 필요하다.

아래에서 볼 수 있듯이 drawableLeft, drawableStart, drawableBottom 등이 있어 필요에 맞게 사용하면 된다. 예시 이미지의 경우 버튼의 왼쪽에 배치하고자 했기 때문에 drawableLeft를 사용하였다.

위의 버튼 예시의 경우 테두리를 둥글게 만든 형태이다.

이 경우에는 drawable 폴더에 Drawable Resource File을 생성하여 원하는 모양을 커스텀할 수 있다. 

물론 버튼 뿐만 아니라 Edittext 등 여러 위젯에 적용할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp"/>
    <solid android:color="@color/white"/>
</shape>

<shape> 태그 안에 여러 가지 속성을 사용하여 커스텀할 수 있다.

• <corners> : 테두리 코너의 radius 속성을 사용하여 전체 테두리나, 4개의 테두리의 radius를 각각 설정할 수 있다.
• <solid> : 도형의 색상을 설정할 수 있다.
• <stroke> : 테두리 선의 색상, 넓이, 대시 모양 등을 설정할 수 있다.
• <gradient> : 도형에 그라데이션을 설정할 수 있다.

 

👆 만약 같은 모양에 여러 가지 색상을 적용하고 싶다면?

🤷‍♀️ <solid> 속성만 변경한 같은 코드의 파일을 여러 개 생성해야 하나?

🙅‍♀️ NO! 해당 drawable 파일을 적용할 위젯에서 backgroundTint 속성을 사용하여 색상만 변경할 수 있다!

위의 코드에서도 android:backgroundTint 속성을 사용하여 android:background 속성에서 지정한 drawable 파일의 solid 색상인 white가 아닌 사용자 지정 색상인 colorFacebookSignIn으로 지정하고 있다.