2022-12-22

Androidアプリでボタンデザインをカスタムする方法

ボタンのデザインをカスタムする方法
- 概要
デフォルト状態のデザイン
ボタンにフォーカスしたときとボタンを押したときのデザイン
- ボタンの背景デザインを定義する
- ボタンの文字デザインを定義する

ボタンのデザインをカスタムする方法

概要

Androidのボタンデザインを定義し、ボタンにフォーカスしたときやボタンをタップしたときにボタンデザインが変わるようにします。

drawableにxmlファイルでデザインを定義し、ボタンのbackgroundやtextColorに適用することで実現できます。

デフォルト状態のデザイン

ボタンの背景デザインを定義する

drawableにresourceファイルを作成します。今回は例としてbutton.xmlを作成しました。


<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!--デフォルト-->
    <item>
        <shape android:shape="rectangle">
            <!--背景色-->
            <solid android:color="#FF0000FF" />
            <!--枠線-->
            <stroke
                android:color="#FF000000"
                android:width="5dp" />
            <!--角-->
            <corners
                android:radius="15dp"/>
            <!--余白-->
            <padding
                android:top="15dp"
                android:right="15dp"
                android:bottom="15dp"
                android:left="15dp"
                />
        </shape>
    </item>
</selector>

selectorタグの中にitemタグを1つ入れています。

itemタグの中にはshapeタグを入れ、ここでボタンのデザインを定義しています。

shapeタグのandroid:shape属性にrectangleを指定することで矩形(長方形)の枠を作ることができます。

shapeタグの中に設定できる項目は以下の通りです。

solid	背景色(単色)
stroke	枠線(太さや色の設定)
corners	角(左上、右上、左下、右下の角を丸くする設定)
padding	余白(上下左右の余白を指定)
gradient	背景グラデーション(solid(単色)と同時に指定した場合後に書いたほうが適用される)
size	大きさ(横幅と縦幅の指定)

ボタンの文字デザインを定義する

背景と同じようにdrawableにresourceファイルを作成します。今回は例としてbutton_text.xmlを作成しました。


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--デフォルト-->
    <item android:color="#FFFFFFFF" />
</selector>

selectorタグの中にitemタグを1つだけ入れています。

itemタグにandroid:color属性を指定することで文字の色を変えることができます。

作成したデザインをボタンに適用する

デザインを定義したらボタンにデザインを適用します。MainActivityのlayoutファイルは以下のようになります。


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

    <android.widget.Button
        android:id="@+id/sample_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="サンプルボタン"
        android:background="@drawable/button"
        android:textColor="@drawable/button_text"
        />

</RelativeLayout>

ボタンを1つだけ作成しています。

Buttonタグを作成してandroid:backgroundに指定したデザインが無視される場合は、android.widget.Buttonタグにすることでデザインが適用されます。

android:backgroundに先ほど作成したdrawable/button.xmlを指定し、android:textColorにdrawable/button_text.xmlを指定しました。

これでボタンのデフォルトデザインが完成します。

ボタンにフォーカスしたときとボタンを押したときのデザイン

ボタンの背景デザインを定義する

上で作成したデフォルトのデザインに以下のように追加します。


<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!--プレス-->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <!--背景色-->
            <solid android:color="#FFFF0000" />
            <!--枠線-->
            <stroke
                android:color="#FF000000"
                android:width="5dp" />
            <!--角-->
            <corners
                android:radius="15dp"/>
            <padding
                android:top="15dp"
                android:right="15dp"
                android:bottom="15dp"
                android:left="15dp"
                />
        </shape>
    </item>
    
    <!--フォーカス-->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <!--背景色-->
            <solid android:color="#FF00FF00" />
            <!--枠線-->
            <stroke
                android:color="#FF000000"
                android:width="5dp" />
            <!--角-->
            <corners
                android:radius="15dp"/>
            <padding
                android:top="15dp"
                android:right="15dp"
                android:bottom="15dp"
                android:left="15dp"
                />
        </shape>
    </item>
    
    <!--デフォルト-->
    <item>
        <shape android:shape="rectangle">
            <!--背景色-->
            <solid android:color="#FF0000FF" />
            <!--枠線-->
            <stroke
                android:color="#FF000000"
                android:width="5dp" />
            <!--角-->
            <corners
                android:radius="15dp"/>
            <!--余白-->
            <padding
                android:top="15dp"
                android:right="15dp"
                android:bottom="15dp"
                android:left="15dp"
                />
        </shape>
    </item>
</selector>

itemタグを2つ追加しました。

1つ目はボタンが押されたときの定義でitemタグにandroid:state_pressedを設定しています。android:state_pressedがtrueというのはボタンをタップ(クリック)された状態という意味です。

2つ目はボタンにフォーカスされたときの定義でitemタグにandroid:state_focusedを設定しています。android:state_focusedがtrueというのは十字キー/TABキーなどでボタンにフォーカスされている状態という意味です。

各itemタグの中に定義している項目はデフォルトのときと同じです。

ただし、itemタグは定義する順番に気をつけなければなりません。上にあるほうが優先的に適用されるため、デフォルト設定を一番上に持ってきたような場合にはボタンは常にデフォルト状態に固定されます。

ボタンの文字デザインを定義する

文字の場合も同じようにデフォルトのデザインに追加で以下のようにします。


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!--プレス-->
    <item android:state_pressed="true"
        android:color="#FF00FFFF" />
    <!--フォーカス-->
    <item android:state_focused="true"
        android:color="#FFFF00FF" />
    <!--デフォルト-->
    <item android:color="#FFFFFFFF" />
</selector>

itemタグを2つ追加して、android:state_pressedとandroid:state_focusedを追加しています。

こちらも上にあるものが優先されるので定義する順番に注意する必要があります。

これでボタンのデザインが状態に応じて変化します。