【Android開発】XMLスタイルでカスタムボタンを作成する方法をステップ解説

はじめに

本記事では、Androidアプリ開発においてXMLスタイル（Drawableリソース）を使用してカスタムボタンを作成する方法を、ステップごとにわかりやすく解説します。枠線のみのボタン、グラデーションボタン、角丸ボタンの3種類のデザインを、実際のコード例とともに紹介します。

手順1：新規プロジェクトの作成

まず、Android Studioを起動し、メニューから File → New Project を選択して新しいプロジェクトを作成します。必要事項をすべて入力し、プロジェクトのセットアップを完了させてください。

手順2：レイアウトファイルの編集

次に、res/layout/activity_main.xml に以下のコードを追加します。ここでは、3つのカスタムボタンを画面中央付近に配置しています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/customButton"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/custom_button"
        android:text="My Custom button"/>

    <Button
        android:id="@+id/customButton2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/customButton"
        android:layout_marginTop="24sp"
        android:background="@drawable/custom_button2"
        android:text="My Custom button"/>

    <Button
        android:id="@+id/customButton3"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:layout_above="@id/customButton"
        android:layout_marginBottom="24sp"
        android:layout_marginTop="24sp"
        android:background="@drawable/custom_button3"
        android:text="My Custom button"/>
</RelativeLayout>

手順3：枠線付きボタン用のDrawableを作成

res/drawable を右クリックし、「New → Drawable resource file」を選択して custom_button.xml を作成し、以下のコードを記述します。strokeタグで枠線の色と太さを指定し、cornersタグで角丸を実現しています。

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

    <stroke android:color="#66F9B9" android:width="4dp"/>
    <corners android:radius="16sp"/>
</shape>

手順4：グラデーション付きボタン用のDrawableを作成

同様に custom_button2.xml を作成し、以下のコードを追加します。gradientタグで開始色・中間色・終了色を指定することで、美しいグラデーション背景と大きな角丸を持つボタンが完成します。

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

    <gradient android:startColor="#2AF598" android:centerColor="#ff1493"
        android:endColor="@color/colorPrimary"/>
    <corners android:radius="50dp"/>
</shape>

手順5：単色＋フル角丸ボタン用のDrawableを作成

続いて custom_button3.xml を作成し、以下のコードを記述します。solidタグで塗りつぶし色を指定し、radiusを大きめの値に設定することで、楕円形のような柔らかな印象のボタンになります。

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

    <solid android:color="#80121a" />
    <corners android:radius="999dp"/>
</shape>

手順6：MainActivity.java の実装

src/MainActivity.java に以下のコードを追加します。今回は見た目のカスタマイズが主題のため、Java側では標準的なonCreateメソッドのみで十分です。なお、新しいプロジェクトでは androidx ライブラリ（androidx.appcompat.app.AppCompatActivity）が使用されます。

package app.com.sample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

手順7：AndroidManifest.xml の設定

最後に、androidManifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリの実行と結果の確認

それでは、アプリケーションを実行してみましょう。実機のAndroid端末をパソコンに接続していることを前提とします。Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。実行対象のデバイスを選択すると、モバイル端末の画面に以下のようにカスタマイズされたボタンが表示されます。