[TextView] 안드로이드 TextView의 모든 것 2 - 모서리 둥글게 버튼 만들기

안드로이드 텍스트뷰의 모든것 2 - 모서리 둥글게 만들기, 버튼 만들기

TextView의 모든 것 1 - 기초편 보기

 안드로이드 앱을 만들다 보면 버튼이 필요한 경우가 많습니다. 예를들어 회원가입, 로그인 등의 화면을 띄우기 위해서는 버튼을 클릭하면 해당 화면을 띄워주게 됩니다. 하지만 굳이 버튼을 안쓰더라고 텍스트뷰로 충분히 버튼을 만들 수 있고 우리가 원하는대로 꾸밀 수 도 있습니다. 그래서 오늘은 텍스트뷰로 커스텀 버튼을 만드는 방법을 알아보도록 하겠습니다.

 텍스트뷰를 이용해 버튼을 만드는 것은 3단계의 작업만 수행하면 간단하게 만들 수 있습니다.

 첫 번째, TextView의 background를 drawable resource로 만들기. 이 작업이 커스텀 버튼 만들기의 핵심이라고 할 수 있는데 모서리(테두리) 둥글게, 버튼 색상, 테두리 색상 등 여러가지를 이 리소스를 이용해 구현합니다.

 두 번째, TextView의 기본속성(width, height, text, textSize, textColor, textStyle 등)을 지정 후 앞서 첫 번째 단계에서 만들었던 drawable resource를 TextView의 background 속성에 추가해줍니다.

 세 번째, TextView의 foreground, clickable, focusable 속성을 추가해줍니다. 이 작업은 TextView를 클릭 시 좀 더 버튼같은 효과를 내기위해 사용합니다.

 사실 3단계의 작업이라고 했지만 간단하게 보면 background resource를 만들기, TextView 만들기라고 말 할 수 있습니다. 그럼 아래에서 xml코드를 작성하고 결과화면을 보도록 하겠습니다.

TextView로 버튼만들기(모서리 둥글게)

1. background resource(bg_custom_button.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="@android:color/holo_red_light"/>
            <stroke android:color="@android:color/holo_red_dark"
                android:width="1dp"/>
            <corners android:radius="4dp" />
        </shape>
    </item>
</selector>

 - 각 속성을 보면 solid는 버튼의 색상, stroke는 버튼의 테두리, corners는 모서리 둥글게 하는 정도를 나타냅니다.

 더 알아보자면 stroke의 dashGap, dashWidth 속성을 이용하여 테두리를 점선으로 만들 수 있고 corners의 topLeftRadius,

 topRightRadius, bottomLeftRadius, bottomRightRadius 속성을 이용하여 원하는 모서리만 둥글게 만들 수 있습니다. 속성

 이름에서도 쉽게 알 수 있듯이 왼쪽위, 왼쪽아래, 오른쪽위, 오른쪽아래 모서리를 원하는 만큼 둥글게 만들 수 있습니다.

2. TextView의 기본속성과 background 리소스 추가

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:background="@drawable/bg_custom_button"
    android:text="Custom Button"
    android:textSize="20sp"
    android:textColor="@android:color/white"
    android:textStyle="bold"/>

 - 텍스트뷰의 크기는 width, height를 이용하여 설정해도 되지만 저는 padding 값을 16dp를 줘서 크기를 키워줬습니다.

 그리고 1번에서 만든 bg_custom_button resource를 background 속성에 추가시켜 줍니다.

3. TextView 클릭효과 주기

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:background="@drawable/bg_custom_button"
    android:text="Custom Button"
    android:textSize="20sp"
    android:textColor="@android:color/white"
    android:textStyle="bold"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"/>

 - 2번 코드에서 마지막 세 줄이 추가 됐습니다. clickable과 focusable은 이름에서 알 수 있듯이 클릭 할 수 있게, 포커스를 받을 수 있게라는 속성이고 true를 줍니다. 그리고 마지막 foreground 속성이 텍스트뷰의 클릭 효과를 주기 위한 속성이고 위 코드를 그대로 복사하셔서 사용하시면 됩니다.

결과

 - 깔끔하게 텍스트뷰로 버튼이 만들어졌습니다. 여기에 버튼과 같이 setOnClickListener를 이용하여 클릭 시 수행할 코드를 작성하시면 간단하게 텍스트뷰로 버튼 만들기가 완성됩니다!

 위 방법을 응용하여 LinearLayout이나 RelativeLayout등의 Layout에도 background와 클릭 효과를 주는 3가지 속성을 추가하여 버튼을 만들 수 있고 레이아웃 안에 이미지, 텍스트 등을 추가하여 더 이쁘고 심플한 버튼을 만들 수 있습니다.

 이것으로 텍스트뷰 모서리 둥글게하여 버튼 만드는 방법을 알아보았습니다!

 모두들 열코하시고 안드로이드 고수 되세요^^

* 궁금한점이 있으시면 댓글로 남겨주세요~ 최대한 빨리 답변드리도록 하겠습니다!

안드로이드 TextView의 모든 것 1 - 기초편 보러가기

안드로이드 TextView의 모든 것 3 - 특정문자열 속성바꾸기편 보러가기