Android標準ボタンの色をカスタマイズする方法【初心者向けサンプルコード付き】

はじめに

このチュートリアルでは、標準のAndroidボタンに独自の色を適用する方法を解説します。drawableリソースにセレクター（selector）を定義することで、通常時・フォーカス時・押下時それぞれに異なるグラデーションやデザインを設定できます。

ステップ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"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:gravity = "center"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity"
    android:orientation = "vertical">
    <Button
        android:id = "@+id/parcleObject"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentTop = "true"
        android:layout_centerHorizontal = "true"
        android:layout_marginTop = "27dp"
        android:background = "@drawable/background"
        android:text = "Click here"/>
</LinearLayout>

上記のコードでは、色を変えて表示するためのButtonビューを配置しています。ポイントは android:background 属性にカスタムドローワブル「@drawable/background」を指定している点です。

ステップ3：背景用ドローワブルの作成

続いて、drawable/background.xml に以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<selector
    xmlns:android = "https://schemas.android.com/apk/res/android">
    <item android:state_pressed = "true" >
        <shape>
            <gradient
                android:startColor = "#f0ff00"
                android:endColor = "#d9dd95"
                android:angle = "270" />
            <stroke
                android:width = "3dp"
                android:color = "#d1d3e3" />
            <corners
                android:radius = "3dp" />
           <padding
                android:left = "10dp"
                android:top = "10dp"
                android:right = "10dp"
                android:bottom = "10dp" />
        </shape>
    </item>
    <item android:state_focused = "true" >
        <shape>
            <gradient
                android:endColor = "#fd5900"
                android:startColor = "#eca680"
                android:angle = "270" />
            <stroke
                android:width = "3dp"
                android:color = "#d1d3e3" />
            <corners
                android:radius = "3dp" />
           <padding
                android:left = "10dp"
                android:top = "10dp"
                android:right = "10dp"
                android:bottom = "10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:endColor = "#4356e7"
                android:startColor = "#a1aaee"
                android:angle = "270" />
           <stroke
                android:width = "3dp"
                android:color = "#d1d3e3" />
           <corners
                android:radius = "3dp" />
           <padding
                android:left = "10dp"
                android:top = "10dp"
                android:right = "10dp"
                android:bottom = "10dp" />
        </shape>
    </item>
</selector>

このセレクターでは、ボタンの状態ごとに異なるグラデーションを定義しています。

• 押されているとき（state_pressed）：黄色系のグラデーション（#f0ff00 ⇒ #d9dd95）
• フォーカスされたとき（state_focused）：オレンジ系のグラデーション（#eca680 ⇒ #fd5900）
• 通常時：青系のグラデーション（#a1aaee ⇒ #4356e7）

さらに、strokeで枠線、cornersで角丸、paddingで内側の余白も同時に設定しており、どの状態でも統一感のあるデザインになります。

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

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

次に、このボタンをタップしてみてください。押下時にグラデーションが切り替わり、以下のように結果が表示されます。