TECOTEC Advent Calendar 2018 의 19일째 담당의 사노입니다.

올해도 이 날에 써 드리겠습니다.
이번에는 초보자용으로 안드로이드에서 사용할 수 있는 버튼을 커스텀하여 둥글게 하거나 경계선을 붙이는 방법을 간단하게 소개합니다.

※ 11일째 iOS 의 기사와 조금 만져 버리는 것은 용서해 주세요 w
(올랐을 때는 이미 쓰고 있었으니까…

개발 환경

■AndroidStudio3.01

일반 버튼

우선은 통상의 버튼으로부터.
아무것도 사용자 정의하지 않고 버튼을 배치하면 이러한 버튼이됩니다.



레이아웃에서는 이렇게 됩니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="test.test.MainActivity">

    <!-- 通常のボタン -->
    <Button
        android:id="@+id/default_button"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:text="default_button"
        android:textSize="12sp"
        android:textColor="#000000"/>

</LinearLayout>

둥근 버튼

계속해서, 모서리 모두를 둥글게 한 버튼입니다.



activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="test.test.MainActivity">

　　 <!-- 四隅角丸ボタン -->
    <Button
        android:id="@+id/all_radius_button"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/frame_gray_rad20dp"
        android:text="all_radius_button"
        android:textSize="12sp"
        android:textColor="#000000"/>

</LinearLayout

위와 같이 android:background에 drawable로 정의한 파일을 연관시킴으로써 둥글게 할 수 있습니다.
frame_gray_rad20dp의 내용은 다음과 같습니다.

frame_gray_rad20dp.xml

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

    <!-- 塗りつぶし color:塗りつぶしの色 -->
    <solid
        android:color="#c0c0c0"/>

    <!-- 角の丸み設定 -->
    <corners
        android:radius="20dp"/>

</shape>

solid가 채우기의 설정, corners가 둥근의 설정이 되어, 각각에 색·둥근의 값을 세트 하는 것으로 방금전의 버튼에 반영시킬 수 있게 되어 있습니다.

덧붙여서, corners에서는 네 모퉁이 전부 이외에도, 이하와 같이 하는 것으로, 각 모퉁이에 대해서만 둥근을 부여할 수도 있습니다.

frame_gray_left_rad20dp.xml

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

    <!-- 塗りつぶし color:塗りつぶしの色 -->
    <solid
        android:color="#c0c0c0"/>

    <!-- 角の丸み設定 -->
    <corners
        android:topLeftRadius="20dp"
        android:bottomLeftRadius="20dp"/>

</shape>

둥근 + 테두리가있는 버튼

마지막으로, 모퉁이 원＋α로 테두리를 붙인 버튼이 됩니다.



설정 방법은 방금 배경에 지정한 파일을 다음과 같이 합니다.

frame_stroke_gray_rad20dp.xml

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

    <!-- 塗りつぶし color:塗りつぶしの色 -->
    <solid
        android:color="#c0c0c0"/>

    <!-- 角の丸み設定 -->
    <corners
        android:radius="20dp"/>

    <!-- 枠線 width:線の幅、color:線の色 -->
    <stroke
        android:width="2dp"
        android:color="#FFFFFF" />
</shape>

solid, corners는 이전과 같습니다만, 새롭게, 테두리를 지정하기 위한 stroke를 호출해, 굵기・색을 지정하고 있습니다.

요약

어땠습니까?
꽤 엉망이 되었지만 이상입니다.
solid, corners, stroke 이외에도 여러가지, 할 수 있는 일은 많이 있습니다만,
세세하게 쓰면 꽤 길어져 버리므로, 이번은 여기까지…
신경이 쓰이는 분은 꼭 조사해 보세요.

버튼을 사용자 정의하고 더 나은 Android 구현을 즐기세요!

덤

눈치채는 분도 계실까라고 생각합니다만, background에의 설정 파일의 지정은, Button이 아니어도 가능합니다!
TextView나 LinearLayout등에도 사용할 수 있으므로, 꼭 꼭-.