【Android】押すと色が変わるカスタム円形ボタンの作り方を解説

本記事では、Androidアプリでカスタムの円形（サークル）ボタンを作成・実装する方法を、実際のコード例とともにわかりやすく解説します。drawableリソースにセレクターXMLを定義することで、ボタンを押したときに色が変化する丸いボタンを簡単に作れます。

ステップ1：新規プロジェクトを作成する

まずはAndroid Studioで新しいプロジェクトを作成しましょう。メニューから「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを作成してください。

ステップ2：レイアウトファイルにボタンを配置する

次に、res/layout/activity_main.xml に以下のコードを追加します。

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

    <Button
        android:id = "@+id/text"
        android:textSize = "18sp"
        android:textAlignment = "center"
        android:background = "@drawable/round_button"
        android:layout_width = "150dp"
        android:textColor = "#000"
        android:layout_height = "150dp" />

</LinearLayout>

上記のコードでは、round_button を背景に設定したButtonを中央に配置しています。幅と高さを同じ150dpにすることで正円の形になります。次に、res/drawable フォルダ内に round_button.xml というファイルを新規作成し、以下のコードを追加してください。

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

    <item android:state_pressed = "false">
        <shape android:shape = "oval">
            <solid android:color = "#ffff00"/>
        </shape>
    </item>

    <item android:state_pressed = "true">
        <shape android:shape = "oval">
            <solid android:color = "#fff000"/>
        </shape>
    </item>

</selector>

このコードでは、ボタンが「押されている状態（pressed）」と「離されている状態（released）」の2つの状態を <selector> で定義しています。ユーザーがボタンをクリックすると、現在の状態に応じて対応する楕円形（oval）の形状と色が自動的に適用されます。通常時は黄色（#ffff00）、押下時はやや濃い黄色（#fff000）に切り替わる仕組みです。

ステップ3：MainActivity.javaを実装する

続いて、src/MainActivity.java に以下のコードを追加します。

package com.example.andy.myapplication;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    int view = R.layout.activity_main;
    Button button;

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(view);
        button = findViewById(R.id.text);
        button.setText("Button");
    }
}

このアクティビティでは、レイアウトを読み込み、IDが text のボタンを取得してテキストを「Button」に設定しているだけです。特別な処理は不要で、見た目の変化はdrawable側のセレクターが担当します。

補足：最近のAndroid Studioで作成したプロジェクトではAndroidXが標準のため、インポート文は androidx.appcompat.app.AppCompatActivity に読み替えてください。また、android:textAlignment 属性はAPIレベル17（Android 4.2）以降で有効です。

アプリを実行して動作を確認する

それではアプリを実行してみましょう。実行前に、実機のAndroidスマートフォンがパソコンに接続されていることを確認しておいてください。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーの「Run（実行）」アイコンをクリックします。表示される候補から自分のモバイルデバイスを選択すると、端末に以下のようなデフォルト画面が表示されます。

上の画像がアプリ起動時の初期画面です。ここでボタンをタップしてみてください。押している間だけ、以下のようにボタンの色が変化します。

このように、selector と shape を組み合わせたdrawableリソースを使えば、画像を使わずに押下反応のあるカスタム円形ボタンを簡単に実装できます。色やサイズを変更すれば、さまざまなデザインのボタンに応用できるので、ぜひ自分のプロジェクトでも試してみてください。