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)
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?
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_whiteI 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>
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>
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 :
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.