ボトムシートビューに影を追加するにはどうすればよいですか？

Question

現在のところ、Androidデザインライブラリの公式の底部シートコンポーネントでは、上端に影が表示されません。しかし、さまざまなモックアップやMaterial Designの仕様で見たように、一番下のシートには、ある種の離散的な影があります。

シャドウがメインレイアウトからボトムシートを遠ざけるのに役立つと思います。特に、ピーク値が設定されているか、またはボトムシートが常に表示されている場合は特にそうです。それ以外の場合は、メインレイアウトとそのアイテムと一緒にブレンドされます。

私はViewCompat.setElevation(bottomSheet, 5);と設定してandroid:elevation="5dp"の両方をXMLビューで成功させようと試みました。 APIレベル21以上の場合

Answer 1

私は影の形状は標高と同じ外観を持っていないことを知っている - しかし、少なくともそれを試してみます。そのトリックは、app:layout_anchorを使って影を下のシートにクリップすることです。

activity_main.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<MapView 
    android:id="@+id/map" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<View 
    android:id="@+id/shadow" 
    android:layout_width="match_parent" 
    android:layout_height="16dp" 
    android:background="@drawable/shape_gradient_top_shadow" 
    app:layout_anchor="@id/bottom_sheet" /> 

<FrameLayout 
    android:id="@+id/bottom_sheet" 
    android:layout_width="match_parent" 
    android:layout_height="200dp" 
    android:clipToPadding="false" 
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior" /> 

</android.support.design.widget.CoordinatorLayout> 

shape_gradient_top_shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<gradient 
    android:angle="90" 
    android:endColor="@android:color/transparent" 
    android:startColor="#64000000"/> 
</shape> 

は次のようになります。

EDIT

は、カスタムShadowViewでより良い結果を取得します。

ポストローマNurikからこのトピックに関する

• ：https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf
• ローマNurikのソリューションに基づいてShadowViewの要旨：次にhttps://gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5ddd

あなたを次の操作を実行できます：

<ShadowView 
    android:id="@+id/shadow" 
    android:layout_width="match_parent" 
    android:layout_height="16dp" 
    android:gravity="bottom" 
    app:layout_anchor="@id/bottom_sheet" /> 

Answer 2

は、親ビューに次のように設定します。また、バックグラウンドは、その後、例えば

android:outlineProvider="bounds" 

を使用できない場合、私は内部の私のシートを持って

android:background="@android:color/white" 
android:elevation="16dp" 

（私はルートビューでそれを試していない）bottomsheetのrootviewに試すことができますネストされたスクロールビュー

<android.support.v4.widget.NestedScrollView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:clipToPadding="false" 
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior" 
     android:elevation="16dp" 
     android:outlineProvider="bounds" 
     > 

    <include layout="@layout/bottomsheet_1" /> 

    </android.support.v4.widget.NestedScrollView>