À partir de maintenant, avec le composant de fond officiel de la bibliothèque de conception Android implémenté, le bord supérieur ne montre aucune ombre. Mais pour ce que j'ai vu dans diverses maquettes et dans les spécifications de Material Design, la feuille de fond comprend une ombre discrète.
Je pense que l'ombre aiderait à éloigner la page du bas de la mise en page principale, en particulier s'il existe un ensemble de valeurs de lecture et/ou si la page du bas est toujours visible. Sinon, il se fondra dans la mise en page principale et ses éléments.
J'ai essayé à la fois ViewCompat.setElevation(bottomSheet, 5);
et la définition de Android:elevation="5dp"
dans la vue XML, sans succès.
Je sais qu'une forme d'ombre n'a pas le même aspect qu'une élévation - mais essayez au moins. L'astuce consiste à utiliser app:layout_anchor
pour couper l'ombre sur la feuille inférieure.
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>
Ressemble à ça:
MODIFIER
Obtenez un résultat encore meilleur avec un ShadowView
personnalisé:
ShadowView
basé sur la solution de Roman Nurik: https://Gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5dddEnsuite, vous pouvez faire ce qui suit:
<ShadowView
Android:id="@+id/shadow"
Android:layout_width="match_parent"
Android:layout_height="16dp"
Android:gravity="bottom"
app:layout_anchor="@id/bottom_sheet" />
Pour les API de niveau 21 et supérieur, définissez les éléments suivants dans la vue parent. Vous pouvez également essayer dans la vue racine de la feuille de fond (je ne l'ai pas essayée dans la vue racine)
Android:background="@Android:color/white"
Android:elevation="16dp"
Si aucun fond ne peut alors utiliser
Android:outlineProvider="bounds"
Par exemple, ma feuille se trouve dans une vue de défilement imbriquée.
<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>
L'astuce consiste à utiliser CardView
comme parent et à définir l'élévation dans CardView
<Android.support.v7.widget.CardView
Android:layout_width="match_parent"
Android:background="#fff"
Android:clickable="true"
Android:focusable="true"
app:behavior_hideable="true"
app:layout_behavior="Android.support.design.widget.BottomSheetBehavior"
Android:layout_height="140dp"
app:cardElevation="8sp"
card_view:cardCornerRadius="0dp">
<!--The content of your Bottom sheet-->
<Android.support.constraint.ConstraintLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent">
.
.
</Android.support.constraint.ConstraintLayout>
</Android.support.v7.widget.CardView>
MODIFIER
Cette technique n'est pas la meilleure solution si vous soutenez KitKat ou une version antérieure. Cela est dû à la marge supplémentaire ajoutée par Cardview.