[안드로이드] 버튼 만들기 (Button, TextView) + ripple

 

Button 예시

 

Button 클래스를 이용하여 xml 파일에서 버튼을 만들 수 있다. 사용자가 버튼을 클릭하면 발생할 이벤트의 내용도 정할 수 있다. 기본적으로 TextView 를 상속받고 있기 때문에 TextView 에서 사용하는 속성들을 이용할 수 있다.

 

 

xml 에서의 Button 예시)

<android.widget.Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="로그인"
    android:focusable="true"
    android:padding="20sp"
    android:enabled="true"
    android:textSize="20sp"
    android:background="@drawable/box_bottom_sheet_stroke_circle" />

 

 

Activity 코드에서 이벤트 수신하기

setOnClickListener 로 버튼이 사용자에 의해 클릭됐을 경우를 수신하여 원하는 작업을 수행할 수 있다.

btn.setOnClickListener {
    // 버튼이 눌렸을 때 발생하는 활동 기재
    print("click event");
}

 

 

😶 버튼 꾸미기

 

버튼의 배경을 꾸미는 방법은 android:background 속성으로 drawable 디렉터리의 xml 파일을 지정해 주면 된다. 버튼 배경으로 다음과 같이 xml 파일을 지정했다고 하면, state_pressed 는 버튼이 눌렸을 때를 의미하고 state_focused 는 버튼에 초점이 잡혔을 경우를 의미한다. 위에서부터 해석하므로 어느 쪽도 해당되지 않을 경우, 마지막  <item> 태그의 button_basic 파일의 디자인으로 보일 것이다.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_press"
        android:state_pressed="true" />
    <item android:drawable="@drawable/button_basic"
        android:state_focused="true" />
    <item android:drawable="@drawable/button_basic" />
</selector>

 

 

버튼 모양을 디자인하는 간단한 xml 코드를 알아보면,

<!-- button_basic -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#B4B4B4" /> <!-- background color -->
            <corners android:radius="8dp"/>
            <stroke android:color="@color/black"
                android:width="1dp"/>
        </shape>
    </item>
</selector>

shape 태그로 전체 모양을 잡고 solid 태그의 color 로 바탕색을 지정할 수 있다. corners 태그로 테두리 부분의 둥근 정도를 설정하고 stroke 태그로 테두리 선을 나타낼 수 있다. 

 

 

😶 Ripple

 

버튼을 클릭하면 ripple 효과를 내게 할 수 있는데 <ripple> 태그를 이용하면 된다. 단, 위에서 설명한 버튼이 눌렸을 때, 초점이 잡혔을 때와 같이 따로 설정하는 게 아니라 android:background 속성에 바로 단일로 설정해줘야 한다.

 

 

<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="#FFAAAA"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" /> <!-- background color -->
            <corners android:radius="8dp"/>
            <stroke android:color="@color/black"
                android:width="1sp"/>
        </shape>
    </item>
</ripple>

 

 

 

+ TextView 에서도 마찬가지로 background 를 버튼처럼 설정해 주고 Activity 코드에서 setOnclickListener 를 설정해 주면 버튼처럼 작동한다. 한 가지 다른 점은 Button 은 기본적으로 사용자가 클릭했을 때 그림자 효과가 살짝 있다. TextView 는 그런 효과가 없다.