独自のBackgroundでRipple Effectを使用する

2014/11/19 12624hit

Android LollipopでRipple Effectというタッチした場所から波紋状に広がるエフェクトが追加されました。
これにより、従来selectorで設定していたクリック時のエフェクトなどが簡単かつ効果的に適用できます。
Ripple Effectはタップした場所を中心に波紋状のエフェクトを掛ける効果で、Lollipopのアニメーション効果を示す1つとなっています。
前回の記事を元にThemeをMaterial Themeに変更した時点で標準のUI部品は全てRipple Effectが適用されます。(ただしSupport Libraryを使用した場合でもAndroid4.x以前のバージョンには適用されません。)
Ripple EffectはBackgroundで実装されています。そのため独自のBackgroundを指定すると、Ripple Effectは無効になります。
独自のBackgroundを使用してRipple Effectを使うには、Backgroundに明示的にRippleEffectの効果を適用します。

Ripple Effectの書式は以下のとおり
drawable-v12/hoge.xml


<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#ffffff" ><!-- 波紋の色 -->
<item android:id="@android:id/mask" android:drawable="@drawable/mask" /><!-- 波紋を広げる範囲 -->
<item android:drawable="@drawable/back" /><!-- ボタンの背景-->
</ripple>

Rippleタグに指定するのは波紋の色で、これにより白いボタンに青い波紋を広げるなどのカスタマイズが出来ます。
maskには波紋が広がる範囲を指定します。
maskは指定しなかった場合、ボタンの背景部分がそのまま波紋の広がる範囲となります。
波紋が広がる範囲はα値で決定されるため、例えば背景が透明のボタンの場合、maskを指定しないとRipple Effect効果は適用されません。
逆に言うと単なるShapeのほか透過pngによるbitmapも指定可能で、複雑な形に波紋エフェクトをかけることも出来ます。

ボタンの背景は波紋が適用されていない状態でのボタンを表します。
maskも背景も設定されていない場合波紋はパーツのサイズにかかわりなく無制限に広がります。
あとはこれを適用したいオブジェクトのBackgroundに指定することでRippleEffectを実現することが出来ます。

RippleとSelectorを併用する

selectorと組み合わせるときは以下の様に行います。。
Ripple Effectによりpress状態などは適用しなくて済むのですが、disableなどは指定してあげる必要があります。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@drawable/disable" /> <!-- 使用不可の時の画像-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#fffff" ><!-- 波紋の色 -->
<item android:id="@android:id/mask" android:drawable="@drawable/mask" /><!-- 波紋を広げる範囲 -->
<item android:drawable="@drawable/back" /><!-- ボタンの背景-->
</ripple>


以上でカスタムされた背景にもRipple Effectを追加できます。

前:既存のAndroidアプリにMaterial Themeを適用する方法 次:Android Auto向けのアプリを作る

関連キーワード

[Android][Java][モバイル][IT]

コメントを投稿する

名前URI
コメント