web-dev-qa-db-fra.com

Elevation ne fonctionne pas sur un LinearLayout

Après avoir cherché une solution, je n'en ai trouvé aucune pour résoudre mon problème.

J'ai une certaine élévation qui produit une ombre sur une grande partie de mon application.
Mais dans un endroit particulier, je ne parviens pas à le faire fonctionner.
(C'est là que j'ai mis une flèche sur l'image ci-dessous)

enter image description here

La zone blanche sous la barre d’outils est un Fragment qui affiche un LinearLayout

disposition:

<LinearLayout
    Android:id="@+id/panelAddress"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@drawable/button_flat_white"
    Android:elevation="10dp"
    Android:orientation="vertical"
    Android:padding="20dp"
    >  
//some content
</LinearLayout>

Le parent du fragment:

<Android.support.v4.widget.DrawerLayout
    Android:id="@+id/drawerLayout"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    >

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <include
            Android:id="@+id/custom_toolbar"
            layout="@layout/toolbar"/>

        <RelativeLayout
            Android:id="@+id/mapLayout"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

            <fragment
                Android:id="@+id/map"
                class="com.google.Android.gms.maps.SupportMapFragment"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"/>

            <FrameLayout
                Android:id="@+id/fragment_container_top"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_alignParentTop="true"
                />

            <FrameLayout
                Android:id="@+id/fragment_container_bottom"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_alignParentBottom="true"/>

        </RelativeLayout>

    </LinearLayout>

</Android.support.v4.widget.DrawerLayout>

Avez-vous une idée de la raison pour laquelle je ne reçois pas mon élévation?

androidandroid-layoutmaterial-design
39
agonist_

Comme décrit ici https://stackoverflow.com/a/27518160/2481494 il existe plusieurs exigences pour que l'ombre soit dessinée:

  • Espace pour l'ombre dans le groupe de vues parent. Comme bleeding182 l'a mentionné, le rembourrage peut entraîner le découpage de l'ombre:

    (N'utilisez PAS de rembourrage. Un rembourrage sur le framelayout coupera également l'ombre)

    Cependant, ceci peut être corrigé avec Android:clipToPadding="false" dans le parent.

  • La vue surélevée doit avoir un fond pour projeter une ombre. Sans information sur votre @drawable/button_flat_white Je ne sais pas s'il s'agit d'un problème dans votre cas.

Pour résoudre votre problème, vous devez modifier votre FrameLayout comme ceci:

<FrameLayout
        Android:id="@+id/fragment_container_top"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"

        Android:clipToPadding="false"
        Android:paddingBottom="10dp"/>

Pour vérifier si votre @drawable/button_flat_white cause des problèmes, essayez de modifier temporairement l’arrière-plan de votre LinearLayout en une couleur simple:

<LinearLayout
    Android:id="@+id/panelAddress"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:elevation="10dp"
    Android:orientation="vertical"
    Android:padding="20dp"

    Android:background="#fff">  
//some content
</LinearLayout>
66
Andreas Wenger

Faites de CardView le parent de votre LinearLayout et vous pourrez atteindre l’altitude.

<Android.support.v7.widget.CardView 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    card_view:cardUseCompatPadding="true"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="3dp">

       <LinearLayout
              Android:id="@+id/panelAddress"
              xmlns:Android="http://schemas.Android.com/apk/res/Android"
              Android:layout_width="match_parent"
              Android:layout_height="wrap_content"
              Android:background="@drawable/button_flat_white"
              Android:orientation="vertical"
              Android:padding="20dp">  

            //some content
      </LinearLayout>
 </Android.support.v7.widget.CardView>
18
ch3tanz

Si l'élévation ne fonctionne pas, vous pouvez créer votre code XML en donnant une référence en arrière-plan sur LinearLayout:

shadowfile.xml 

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#18000000" />
            <corners Android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#05000000" />
            <corners Android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#10000000" />
            <corners Android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#15000000" />
            <corners Android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#20000000" />
            <corners Android:radius="4dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid Android:color="#FFFFFF" />
            <corners Android:radius="0dp" />
        </shape>
    </item>
</layer-list>

Ajouter comme ça: 

<LinearLayout
        Android:id="@+id/profileDetails"
        Android:layout_width="match_parent"
        Android:layout_height="125dp"
        Android:background="@drawable/shadowfile"
        Android:padding="15dp"
        Android:layout_below="@id/toolbar_title"
        Android:layout_marginTop="20dp">

Sortie:

enter image description here

4
amit

Ceci est un problème de dessin.

L'ombre portée est dessinée en dehors des limites de la vue. Par conséquent, si la mise en page Parent ne "donne" pas suffisamment d'espace à la vue, elle sera coupée.

Le parent du fragment (disposition linéaire) ayant la même taille, l'ombre est découpée. Ajoutez une marge en bas à LinearLayout.
Si cela ne vous aide pas, essayez d’envelopper la mise en page avec un FrameLayout avec un peu de marge en bas (NE PAS utiliser de rembourrage. Un rembourrage sur le motif framelayout coupera également l’ombre).

1-2dp devrait faire.

2
David Medenjak

j'espère que cela vous aidera. Ajoutez simplement "marginTop" dans la deuxième mise en page.

<LinearLayout
    Android:id="@+id/linearLayout1"
    Android:layout_width="match_parent"
    Android:layout_height="90dp"
    Android:orientation="vertical"
    Android:elevation="5dp"
     />

<LinearLayout
    Android:id="@+id/linearLayout2"
    Android:layout_width="match_parent"
    Android:layout_height="90dp"
    Android:orientation="vertical"
    Android:padding="5dp"
    Android:layout_marginTop="3dp"
    />
0
Basant

J'ai utilisé paddingRight et paddingBottom (pour les ombres en bas et à droite de la mise en page), alors cela a fonctionné pour moi; il affiche une ombre, sinon l'ombre dessinable ne fonctionnera pas correctement.

Faites une telle chose si vous rencontrez le même problème.

0
user7957410