［Android］UP ボタンと同じ 円形の Ripple Effect (波紋) を表示する

はじめに

UP ボタンをクリックすると次のような円形の Ripple Effect (波紋) が表示されます。
この円形の Ripple Effect (波紋)を Image Button で表示するのに困ったので作り方をまとめます。

Step1 Image Button に貼り付ける Drawable をダウンロードする

Material Design Iconにアクセスし Vector Drawable をダウンロードする。
そしてダウンロードしたファイルは Drawable にコピーしておく。

ic_folder.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="24dp"
        android:width="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">
    <path
            android:fillColor="#fff"
            android:pathData="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" />
</vector>

Step2 Image Button に Vector Drawable を貼り付ける

Image Button の src に ダウンロードした Vector Drawable を設定する。

    <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_folder" />

今の実装のままだと Image Button の View に収まる形に波紋が
表示されてしまい UPボタンと同じ円形の波紋を表示できていません。

Step3 Image Button をクリックしたときに円形の波紋を表示する

UPボタンと同じ円形の波紋を表示するためには、次のような感じで
background に ?android/selectableItemBackgroundBorderless を設定します。

    <ImageButton
            android:id="@+id/folder_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="?android:attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_folder" />

すると次のように円形の波紋が表示されるようになります。

おわりに

Action Bar などをカスタマイズしているときに円形の波紋を表示させたいことが
あると思うのでそのようなときにはこの方法が使えるかなと思います。