xmlでButtonのタッチイベントでのデザイン変更

背景

デザイナーがボタンのデザインについて色々要求してきたので対応した時のメモ。
最初はonTouchListenerのmotionEventで押された時のボタンの色や文字色を変更してたが、xmlの方が楽にできそうと思って調べたら楽だったのでメモ。

要望

ふちが緑色で内側が白の文字が黒の角丸ボタン。押されたら全体が緑で文字が白くなるようにしたい。

最初はonTouchイベントでbackgroundリソースとtextColorを変更するというやり方で制御した。
しかし、MotionEvent毎の制御はbuttonの数が増えたり、ボタンによって違う色に変更とかする時に面倒。Utilクラスを作成するのも色々なパターンに対応すると結構面倒。

        button.setOnTouchListener { view, motionEvent ->
            when (motionEvent.action) {
                MotionEvent.ACTION_DOWN -> {
                    //ボタンがタッチされてる時。緑、文字色白
                    button.setTextColor(resources.getColor(R.color.text_white))
                    button.background = resources.getDrawable(R.drawable.button_accent)
                    return@setOnTouchListener false
                }
                MotionEvent.ACTION_CANCEL,
                MotionEvent.ACTION_UP -> {
                    //タッチされてない時。緑枠、文字色黒
                    button.setTextColor(resources.getColor(R.color.text_black))
                    button.background = resources.getDrawable(R.drawable.button_accent_frame)
                    return@setOnTouchListener false
                }
                else -> {
                    return@setOnTouchListener false
                }
            }
        }

xmlでの制御

やり方

• ボタンのbackground用のxmlを用意
• ボタンのtextColor用のxmlを用意
• ボタンのbackgroundとtextColorに上の二つを設置

button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- buttonのbackground -->
    <item android:state_pressed="true">
　　　　　　　　　　　　　　　　<!-- buttonが押された時の表示 -->
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#3cb300" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_focused="true">
　　　　　　　　　　　　　　　　<!-- buttonが押された時の表示 -->
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#3cb300" />
                    <corners android:radius="2dp" />
                </shape>
            </item>           
        </layer-list>
    </item>

<!-- buttonが押されてない時の表示 -->
    <item>
        <layer-list>
　　　　　　　　　　　　　　　　　　　　　　　　<!-- buttonの外枠 -->
            <item>
                <shape android:shape="rectangle">
                    <padding android:bottom="2dp" android:top="2dp" android:left="2dp" android:right="2dp" />
                    <solid android:color="#3cb300" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
　　　　　　　　　　　　　　　　　　　　　　　　<!-- buttonの内側 -->
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#ffffff" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

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" android:color="#FFFFFF" />
    <item android:state_focused="true" android:color="#FFFFFF" />
    <item android:color="#000000" />
</selector>

上のxmlをButtonのbackgroundとtextColorにセット。

activity_hoge.xml

<Button android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button" 
        android:textColor="@drawable/button_text" 
        android:text="button" />

Touchイベントで制御するよりはこっちの方が楽？な気がする。

参考リンク：
(公式)Drawable resources
Change text color in shape on touch of button
Drawable でいろんな素材作ってみた