ElevationとOutlineと影

Photo by Kelly Sikkema on Unsplash

Elevationを指定することで、ある程度自動で影をつけることが出来ます。ただし、これには条件があり、うまく影がつけれないパターンもあります。

例えば、以下のようなレイアウトで背景に角丸の長方形を設定したものは自動で影がついてくれます。

角丸の長方形にElevation

背景が円形、角丸長方形はElevationによって影がついてくれますが、三角形などは影がついてくれません。
また、背景ではなくImageViewのsrcに設定した場合もElevationによって影はついてくれません。

ViewOutlineProvider

Elevationによる影をカスタマイズしたときは、 ViewOutlineProvider を使います。

例えば、以下のようなレイアウトで三角形に影をつけたい場合です。

この場合は、自動で影がついてくれません。

三角形でelevationを指定しただけ

この三角形にElevationによる影を付けたい場合は以下のように ViewOutlineProvider を実装してあげます。

Outlineに三角形のPathを指定しています。

これを実行すると、以下のように影がついてくれます。

ViewOutlineProviderを設定した三角形

注意

どんな形状でもPathを設定すれば影をつけれるわけではないので注意です。

Android 10より前のバージョンでは凸状のPathしか設定できないため、複雑なPathを設定することが出来ないです。

参考

https://developer.android.com/training/material/shadows-clipping

おまけ

Android 10以降でしか動かないですが、星型のVectorDrawableにElevationで影を表示する方法です。あと、使用してい良いか不明なAPIを使っています。

これを実行すると以下のような感じになります。

PathParser を使ってVectorDrawableのpathDataからPathを取得しています。ただ、このAPIはドキュメントにも載ってないので、あまり積極的に使わないほうが良いかもです。

参考程度にしてもらえると。