【Android】Kotlinで簡単にボタン（Button）を表示して、カスタマイズ（サイズ、グラデーション、輪郭線、角丸）する方法

2024年1月25日2024年4月2日

すだ

こんにちは！株式会社メモリアインクの須田です！

KotlinでAndroidアプリを開発中のみなさま、
今日は一緒にボタンの表示やカスタマイズについて、実際にコードを書きながら学んでいきましょう！

この記事を読んでわかること…
・シンプルなボタン(Button)の表示方法
・ボタン(Button)のデザインをカスタマイズする方法

環境

Kotlin (ver 1.9.0)
Android Studio (Giraffe | 2022.3.1 Patch 3)

シンプルなボタン(Button)の表示方法

Kotlinに用意されている「Button」という便利なタグを使用します。

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ボタン"
/>

ボタンを表示したいレイアウトファイルに、まずは上記のコードを埋め込んでみましょう。

実際に画面に表示してみると…↓

【Android】Kotlinで簡単にボタン（Button）を表示して、カスタマイズ（サイズ、グラデーション、輪郭線、角丸）する方法

画面左上にボタンを設置できました！

<Button />タグの中に、以下の設定を記述することで、簡単にボタンを表示することができます。

1. 横幅と高さを設定

android:layout_width="wrap_content"
android:layout_height="wrap_content"

layout_widthでボタンの横幅を、layout_heightで高さを指定します。

wrap_content は内容（”ボタン”と表示されるテキスト）に合わせて自動的に調整してくれるものです。

たとえばこの部分に「”10dp”」「 “20dp”」のように具体的な数値を設定することもできます。

2. ボタンのテキストを設定

android:text="ボタン"

「text」に文字列をセットすることで、ボタンの中に表示する文字を設定できます。

ちなみに、「textSize=””」や「textColor=””」をセットすることで、文字のサイズや色も変更できますよ！

すだ

Kotlinの場合、ボタンは「Button」タグを使って設定していくんですね〜！簡単に表示できちゃいました！

次は表示したボタンを好きにデザインしてみましょう！

ボタン(Button)のデザインをカスタマイズする方法

さらに自由なボタンを作るために、様々な項目を設定することができます。

たとえば1つ、こんなふうにカスタムしてみました！

先ほどのシンプルなボタンから、一気にデザイン性を帯びました〜

早速どのような設定を書いたのか見ていきましょう！

1. ボタンの色を設定

android:backgroundTint="#ff6347"

<Button />タグ内に、上記のコードを追加します。

backgroundTintにカラーコードを設定することによって、ボタンに自由に色を持たせることができます。

ボタンの色だけ設定したい場合は、このコードだけでOKです！

2. 専用のxmlファイルを作成して、その他のデザインを設定

色以外にも、もっと装飾したい場合は

ボタンのカスタマイズ用にXMLファイルを作成してみてください！

作成場所は、app > src > main > res > drawble の中です。上で表示したデザインは、下記のように記述しました。

drawble/custom_button.xml

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 角の丸みを指定 -->
    <corners android:radius="8dp"/>

    <!-- グラデーションを定義 -->
    <gradient
        android:startColor="#000080"
        android:endColor="#87ceeb"
        android:angle="50"/>

    <!-- サイズ -->
    <size
        android:width="100dp"
        android:height="50dp" />

    <!-- ストローク（輪郭線）を指定 -->
    <stroke
        android:width="2dp"
        android:color="#40e0d0"/>
</shape>

drawbleの中に作成したXMLファイル内に <shape />タグ（図形を定義するためのXML要素）を置くことで、

アプリ内のUIを構築することができます。

上記のコードを少し細かく見ていくと…↓

android:shape="rectangle"はボタンの形状を設定しています。

“retctangle“（長方形）の他に、”oval“（楕円）、”line“（線型）、”ring“（円形）を指定することも可能です。

<corners />はボタンの角の丸さを設定しています。

radius にセットする数値が大きいほど、角の丸みが増していきます。

<gradient />はボタンの色をグラデーションに設定しています。

startColor（開始色）、endColor（終了色）、angle（角度）を調整して好みのグラデーションを作ることができます。

<size />はボタンの大きさを設定しています。

ボタンの大きさの指定場所は<Button />タグの中でもよし、カスタマイズ用XMLファイルの中でもよしです。

<stroke />はボタンの輪郭線を設定しています。

width（輪郭線の幅）とcolor（輪郭線の色）をセットして、線を自由にカスタマイズできます。

また、ボタンの状態に応じてデザインが変わるよう設定することもできます。↓

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 押下時 -->
    <item android:state_pressed="true">
        <shape>
            <!-- ここに押下時に適用するデザインを設定 -->
        </shape>
    </item>

    <!-- 非活性時 -->
    <item android:state_enabled="false">
        <shape>
            <!-- ここに非活性時（ボタンが押せない状態のとき）に適用するデザインを設定 -->
        </shape>
    </item>

    <!-- デフォルト -->
    <item>
        <shape>
           <!-- ここに通常時に適用するデザインを設定 -->
        </shape>
    </item>

</selector>

<selector />タグを使用することで、その中の<item>タグに書かれたボタンの状態ごとにデザインを変更することができます。

<item android:state_pressed="true"> はボタンが押された時に動的にデザインが変わるようになります。

<item android:state_enabled="false">はボタンが押せない状態の時に適用される記述です。

そして、カスタマイズ用のファイルを作成し終えたら、

ボタンを設置しているレイアウトファイルの<Button />タグ内に、custom_button.xml を読み込ませる記述を忘れないようにしてください。

android:backgroundに作成したカスタム用XMLファイルを指定することで、設定したカスタムを反映させることができます。

<Button
    <!-- ここ -->
    android:background="@drawable/custom_button"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ボタン"
/>

すだ

簡単な記述だけで、色々と装飾できるんですね…！
すてきなボタンが置いてあるだけで、画面の見え方もかなり変わってきますね！