agonist_ agonist_ - 2 months ago 28
Android Question

Elevation not working on a LinearLayout

After searching for a solution, I didn't find any to solve my problem.

I have some elevation which produces a shadow on a big part of my app.

But in a particular place, I'm not able to make it work.

(It's where I put an arrow on the picture below)

enter image description here

The white area below the toolbar is a

Fragment
which displays a
LinearLayout


layout:

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


The parent of the 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>


Do you have an idea about why I don't get my elevation?

Answer

As described here http://stackoverflow.com/a/27518160/2481494 there are several requirements so that the shadow is drawn:

  • Space for the shadow in the parents view Group. As bleeding182 mentioned, padding can cause the shadow to be clipped:

    (Do NOT use a padding. A padding on the framelayout will also cut the shadow off)

    However, this can be fixed with android:clipToPadding="false" in the parent.

  • The elevated view needs to have a background to cast a shadow. Without information about your @drawable/button_flat_white I can't tell whether this is a problem in your case.

To solve your problem you should modify your FrameLayout like this:

<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"/>

To check whether your @drawable/button_flat_white causes any problems try to change the background of your LinearLayout to a simple color temporarily:

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