web-dev-qa-db-fra.com

Comment puis-je ajouter une ombre à la vue de fond?

À 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.

 Bottom sheet example from Material Design specs

androidandroid-layoutandroid-design-librarybottom-sheet
16
Chris

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:

 Bottom Sheet Shadow

MODIFIER

Obtenez un résultat encore meilleur avec un ShadowView personnalisé:

Ensuite, 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" />
28
Marius

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>
11
DeveloperDH

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.

0
Badr