Byuubyu

Every day is a new day.

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

最近Androidアプリを個人開発しているので、その中で得られた知見とかハマったこととかを書いていきたいと思います。
まずはタイトルの件。
これはButtonbackgroundに設定するdrawableを工夫するだけで簡単にできます。

完成イメージ

GIFだとカクカクして見えますが、実際はサクサクでいい感じです(^^)

f:id:Byuubyu:20180630095633g:plain

ちなみに、このGIFはAndroid Studioエミュレータを使って、メニュー内の[Record screen]から撮りました。
計算内容はトリビアの泉で昔やっていたネタなだけなので気にしないでください。
私は病んでないですよ。

方法

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


ちなみに、その電卓アプリはこれです。
play.google.com
ちょっとした便利機能のある使いやすいAndroidアプリですので、良かったら触ってみてください!(iOS版は鋭意開発中)

感想

すっごい久しぶりにブログを更新しました。
1日坊主になっていたことを反省して、これからはちょくちょく投稿していきます。
記事に起こしてみると、コードの見直しになっていいですね。
Qiitaにも投稿済だけど、ブログとの書き分けはどうしようかな(´・ω・`)

qiita.com