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

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

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

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

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

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

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

▼ 大体こういう手順

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

 

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

1.ボタンレイアウト( button_round.xml )の内容

2.そしてこの drawble を ImageButton の background  に指定

 

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

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

Androidで丸型ボタンを作ってみた。このボタンを押したときにアニメ効果を付けてみたい・・・

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

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

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

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

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

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

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

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

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

 

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

▼ 改造した button_round.xml の内容

長い・・・・・・

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

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

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

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

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

 

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

押下時にでっかくなるアニメ効果を付けた丸型ボタンの例

▲ 右側のボタンを押してみた様子

ここでは大きくなるアニメ効果ですが、工夫次第でもっと注目を引く効果も付けれそう

そこは各人のアイデアと発想次第ですね。

以上、Androidで動く丸型ボタンを作る手順でした。ではまた (^^)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください