Elevation not working on a LinearLayout

Question

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)

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?

Color the background of the linearlayout red, just to find out what it's area really is. It might be stretching all over the fragment. — SilverCorvus, Nov 02 '15 at 12:12
Did you try android:outlineProvider="bounds" in your fragment? — Jorge Casariego, Nov 06 '15 at 15:25

score 78 · Accepted Answer · edited May 23 '17 at 11:47

As described here https://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>

score 24 · Answer 2 · answered Nov 07 '15 at 07:02

Just make CardView as parent of your LinearLayout and you can achieve elevation.

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

I think this is the best solution. The other ones that don't use CardViews aaalways result in one issue or another. — RominaV, Feb 22 '17 at 15:00
@TheRealChx101 I think you need to create seperate layout for pre-lollipop and post-lollipop — ch3tanz, Oct 20 '19 at 15:25

score 8 · Answer 3 · edited Apr 01 '19 at 09:09

If elevation is not working than you can create you XML by giving reference as a background on the 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>

Add like that :

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

Output :

score 2 · Answer 4 · answered Nov 02 '15 at 23:41

This is a drawing issue.

The cast shadow is drawn outside of the actual views bounds, so if the Parent layout does not "give" the view enough space, it will be clipped.

Since the parent of the fragment (Linear layout) has the same size, the shadow is clipped. Add a margin on the bottom to the LinearLayout.
If this does not help try wrapping the layout with a FrameLayout with a little margin on the bottom (Do NOT use a padding. A padding on the framelayout will also cut the shadow off)

1-2dp should do.

Ah, thanks for this. After many tries, only this worked for me. — Alexander, Nov 03 '21 at 01:46

score 0 · Answer 5 · edited Apr 01 '19 at 08:32

0

I have used paddingRight and paddingBottom(for shadow at bottom and to right of layout) then it worked for me, it shows a shadow otherwise the drawable shadow will not work properly.

Do such thing if you facing same problem.

edited Apr 01 '19 at 08:32

ppreetikaa

1,149
2
15
22

answered Jul 01 '17 at 12:32

user7957410

55
1
1

score 0 · Answer 6 · answered Mar 03 '21 at 08:17

0

You should be aware of android:hardwareAccelerated="false", shadows will not show if you have this line in the manifest
If the above point is okay then try this in your layout android:clipToPadding="false" and android:outlineProvider="bounds"

answered Mar 03 '21 at 08:17

Agilanbu

2,747
2
28
33

score -1 · Answer 7 · answered Oct 02 '16 at 22:23

i hope it help you, Just add"marginTop" in second layout.

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

score -5 · Answer 8 · answered Nov 02 '15 at 11:49

-5

Please enable hardwardAccelerated option in manifest file,

<application
  ...
  android:hardwareAccelerated="true">

answered Nov 02 '15 at 11:49

AndroidEnthusiastic

941
9
22

1

That not the problem. As I said, I already have lot of place with elevation which works well. And it don't resolve the problem =/ – agonist_ Nov 02 '15 at 12:38
whats the rationale behind enabling ```hardwareAccelerated``` ?? – rakesh kashyap Sep 24 '16 at 20:39
2

actually this answer has a point if you have hardwareAccelerated=false in your manifest file then anything like shadow or transparent will not work. It is true by default, but some people use it when they create tabs. So that's why upvoted this answer and thank you – tiwarinitin94 May 08 '17 at 12:07

Elevation not working on a LinearLayout

8 Answers8

Linked