YULDEV

技術系の備忘録

Androidアプリのボタンを実装する

押した時に色が変わるボタンの実装方法をいつも忘れるので自分用にメモ。

layoutファイルにButtonのコード書く

ふつうにButton のコードを書きます。

  • app/src/main/res/layout/sample.xml
<Button
    android:id="@+id/sign_up_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="ユーザー登録"  />

背景を描画するdrawableファイルを作成する

lollipop以前の場合

app/src/main/res 以下にdrawable ディレクトリを作成。
背景色、角丸の大きさ、押した時の挙動を定義します。

  • app/src/main/res/drawable/primary_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item> <!-- 通常のとき -->
        <shape>
            <solid android:color="@color/colorPrimary" /> <!-- ボタン色 -->
            <corners android:radius="3dp" /> <!-- ボタン角丸 -->
        </shape>
    </item>
    <item android:state_pressed="true"> <!-- 押したとき -->
        <shape>
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</selector>
lollipop以後の場合

Android 5.0 lollipop以後ではMaterial Design対応(rippleエフェクトとか)を入れたいので、それ用のファイルを作ります。
app/src/main/res 以下にdrawable-v21 ディレクトリを作成。
drawable ディレクトリに作ったのと同じ名前のxmlファイルを作る。

  • app/src/main/res/drawable-v21/primary_button.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item>
        <shape>
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</ripple>

layoutファイルのButtonの背景にこのdrawableファイルを指定する

<Button
    android:id="@+id/sign_up_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="ユーザー登録"
    android:background="@drawable/primary_button"  />

これで完成。
もっといい方法あるかもしれない。