【Android】動く丸形ボタンを drawable だけで作ってみた

あるアプリを作っていた時、丸型のボタンを作る場面がありました。

でも丸っこいだけだと素っ気ないから、押下時に大きくなるアニメ効果も付けたかったです。

そこで色々調べたところ、１時間かけてやっと完成

同じように悩んでいる人もいるはずなので、
ここでは Androidでアニメ効果付きの丸型ボタンを作る手順をシェアします。

このページの目次

単純に丸型ボタンを作るだけなら超簡単
アニメ効果のある丸型ボタンの作り方

単純に丸型ボタンを作るだけなら超簡単

丸型ボタンの作り方はネットで調べるとすぐ出てきます。

▼ 大体こういう手順

専用の drawable を作成する
その中に丸型にするためののxml作成
あとはButtonとかの背景に設定

たとえば、作り方の例を挙げるなら次のような感じ

１．ボタンレイアウト（ button_round.xml ）の内容

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android = "http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary"  />
            <corners android:radius="64dip" />
        </shape>
    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>

<item>

</shape>

</item>

</selector>

２．そしてこの drawble を ImageButton の background に指定

<ImageButton
    android:id="@+id/image_button"
    style="@android:style/Widget.ImageButton"
    android:background="@drawable/button_round" />

<ImageButton

android:id="@+id/image_button"

style="@android:style/Widget.ImageButton"

android:background="@drawable/button_round" />

これで立派な丸型ボタンのできあがりです。

▼ 実際の見た目はこんな感じ

上画像の左右に配置してあるやつ

こういう風に丸っぽいボタンだけなら作るのは難しくなりません。

ですが、タップ時にアニメ効果とかつけようとすると難しいです。

やり方も色々探してみたけど、いい情報が見つからず・・・
でも色々試行錯誤した結果、やっと作り方が分かりました。

アニメ効果のある丸型ボタンの作り方

例えばタップ時にでかくなる丸型ボタンを作りたいなら・・・

次の２つの状態でボタンのレイヤーを切り替えればOK

タップされてないとき
item要素の android:state_pressed="false" の時の状態　＝　タップされていない状態。デフォルトの見た目をここに定義する
タップされた時
item要素が android:state_pressed="true" の状態　＝　押下されている状態。ここでボタンを少しだけ大きくするxmlを書く

さっきの button_round.xmlを少し細工すればアニメ効果も付けれます。

ということで、実際にさっきのXMLを改造してみました。

▼ 改造した button_round.xml の内容

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android = "http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <padding
                        android:bottom="4dip" android:top="4dip"
                        android:right="4dip" android:left="4dip"/>
                    <corners android:radius="64dip" />
                    <solid android:color="#00000000" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#008577"  />
                    <corners android:radius="64dip" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <padding
                        android:bottom="-4dip" android:top="-4dip"
                        android:right="-4dip" android:left="-4dip"/>
                    <corners android:radius="64dip" />
                    <solid android:color="#00000000" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <stroke android:color="#00000000" android:width="8dip" />
                    <solid android:color="#008577"  />
                    <corners android:radius="64dip" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>

<layer-list>

<item>

<padding

android:bottom="4dip" android:top="4dip"

android:right="4dip" android:left="4dip"/>

</shape>

</item>

<item>

</shape>

</item>

</layer-list>

</item>

<layer-list>

<item>

<padding

android:bottom="-4dip" android:top="-4dip"

android:right="-4dip" android:left="-4dip"/>

</shape>

</item>

<item>

</shape>

</item>

</layer-list>

</item>

</selector>

長い・・・・・・

でもやってることは単純で、
見ての通り android:state_pressed の値に応じてitem要素を切り替えてるだけです。

またボタンの大きさを変えるために、 layer-list 内で２つの要素を作成してます。

透明のitem要素
背景色がないパディングだけを作るための要素。プレス状態の時に -4dip のパディングを上下左右に作ることでボタン用の余白を作る
ボタン本体のitem要素
タップ状態の時に周りに透明で8dipの枠線（stroke）を表示している。こうすることでタッチ時にボタンが大きくなって浮き上がるような感じになる

言葉で説明すると余計分かりにくい (-_-;)

でも取りあえず、これで丸型＆でっかくなるアニメ効果付のボタンが作れました。

実際にどういう動作をするかは次のGIF動画の通りです。