Android：ゴーストボタンで押した感を表現（Ripple Effectなし、画像なし、アニメーションなし、色も変えずに）

Buttonのbackgroundに設定するdrawableを工夫するだけでお手軽にできます。

完成イメージ

GIFだとカクカクして見えますが、実際はヌルサクで良い感じです(^^)
ちなみに、これはAndroid Studioのエミュレータを使って、メニュー内の「Record screen」から撮影しました。

方法

ポイントはdimens.xmlに設定しているbtn_padding_defaultとbtn_padding_pressedの値がちょっと違うこと。

my_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <item android:top="@dimen/btn_padding_pressed" android:right="@dimen/btn_padding_pressed" android:bottom="@dimen/btn_padding_pressed" android:left="@dimen/btn_padding_pressed">
                <shape android:shape="rectangle">
                    <stroke android:color="@color/my_color" android:width="@dimen/btn_border" />
                    <corners android:radius="@dimen/btn_radius" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item android:top="@dimen/btn_padding_default" android:right="@dimen/btn_padding_default" android:bottom="@dimen/btn_padding_default" android:left="@dimen/btn_padding_default">
                <shape android:shape="rectangle">
                    <stroke android:color="@color/my_color" android:width="@dimen/btn_border" />
                    <corners android:radius="@dimen/btn_radius" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="btn_padding_default">4dp</dimen>
    <dimen name="btn_padding_pressed">2dp</dimen>
    <dimen name="btn_border">1dp</dimen>
    <dimen name="btn_radius">12dp</dimen>
</resources>

Buttonにセットしてあげれば完成!

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BUTTON"
    android:background="@drawable/my_drawable"
    style="@style/Widget.AppCompat.Button.Borderless" />

あとがき

個人開発した電卓アプリCalcLeafにゴーストボタンを取り入れたテーマを追加した際、
なかなかしっくりくるボタン押下エフェクトが見つからなかった。
ゴーストなのにRipple Effectが出たり、色が変わったりするのはどうにも微妙。
そんな中で設定値を間違えてしまって偶然できて、使ってみたら意外と良かったのが今回の投稿内容です。
スマホではボタンをタップしたときに自分の指でボタンが一時的に隠れてしまいますが、
この「border拡大方式」なら指で覆われた部分から外側にちょっと拡大することで主張できるし、
指を離した後も元の大きさに戻る感じが残像でプルプルして見えるので個人的に気に入りました。

ゴーストボタンの実装を考えている方は参考にしてみてください！