【Lollipop】FABとElevationとRipple - ReDo

2014年11月21日

【Lollipop】FABとElevationとRipple

elevation.png

lollipop-elevation-demo.apk

Android Studio1.0も来そうですし、ロリにちまちま手を出していきましょう。
FABことFloating Action ButtonとかElevationとかRippleらへんが気になっていたので試してみました。


FABのサンプルはGitHubの以下のリポジトリで公開されています。
googlesamples/android-FloatingActionButtonBasic
https://github.com/googlesamples/android-FloatingActionButtonBasic

動かすとこんなんでした。

メインのはずのクラスを見に行くと、class FloatingActionButton extends FrameLayout implements Checkableとかなっててなんかゴツいです。もう少し単純なサンプルないかな、と探しに行きます。

How to use setOutlineProvider instead of setOutline in Lollipop
Outlineの設定方法がL PreviewとLollipopで変わった模様です。

公式、Defining Shadows and Clipping Viewsに書いてある内容ではViewをOutlineという概念でClipしてZ軸方向へのTranslationであるElevationによる影をつける模様ですが、じゃあCompat使ってKitKatではどうだろう、と試すとXML Drawable中のrippleタグが対応していないよ、とすっこけました。
Maintaining Compatibilityを見ると、Reveal animationsにも対応していないみたいですし、現状FABのCompat対応はイマイチな模様です。

単純に丸と影がそれっぽく出ればFABである、というレベルであれば互換ライブラリが公開されておりますのでこれで良さそうです。
https://github.com/shamanland/floating-action-button

で、下位互換性のイマイチなElavation+Rippleですが、LolliではIO時の話の通り3Dできちんと作られているので、elavationやtranslationZの変更だけでちゃんとViewの重ね順がちゃんと入れ替わるので何か面白い使い道がありそうです。

# Paddingを影が超えないので配置には気を使いそうですが...


コメントする