What's wrong with this layout that's causing the elevation shadow not to appear?

Question

I'm trying to use Android Elevation to achieve the 'shadow' look for a view. The following is the layout xml:

<android.support.constraint.ConstraintLayout 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"
    tools:context="com.sample.app.Main2Activity">

    <LinearLayout
        android:layout_width="395dp"
        android:layout_height="match_parent"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:clipChildren="false">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="165dp"
            android:background="#FFFFFF"
            android:padding="30dp"
            android:layout_margin="30dp"
            android:elevation="10dp"
            android:text="TextView" />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

This is how the layout looks: Look ma, no shadows!

Any suggestions to fix this?

https://developer.android.com/training/material/shadows-clipping.html — letsCode, Dec 08 '17 at 14:49
The elevation is there in the code I posted. I've been through other materials before posting. The background is set without the alpha value as I've found that others have had problems with shadows being rendering as well. @mac229 Nexus, API 25. And another device was API 21. — redflour, Dec 08 '17 at 14:55
@redflour Generally it is weird because I tested your code on API level 23 and 26 and I have shadow — mac229, Dec 08 '17 at 15:26
It seems that it has something to do with android:cornerRadius of the background element. When the value of that is set to 0dp, or the tag is not existent at all, the shadow isn't rendered. — redflour, Dec 09 '17 at 10:04

letsCode · Answer 1 · 2017-12-08T15:21:04.587

Here you go.... maybe you need someone to do it for you then....

I used a card view instead...

xml layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        card_view:cardCornerRadius="5dp"
        card_view:contentPadding="10dp">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <TextView
                android:id="@+id/textView"
                android:text="hello"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:textStyle="bold"/>

            <TextView
                android:id="@+id/textView2"
                android:text="world"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textView"
                android:layout_marginTop="10dp"/>
        </RelativeLayout>
    </android.support.v7.widget.CardView>


</LinearLayout>

Add these to your app gradle file

compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:cardview-v7:25.1.0'

result:

and if you dont want to use a card view.....

xml -> layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical">


        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/border"
            android:layout_margin="5dp"
            android:padding="5dp">

            <TextView
                android:id="@+id/textView"
                android:text="hello"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:textStyle="bold"/>

            <TextView
                android:id="@+id/textView2"
                android:text="world"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textView"
                android:layout_marginTop="10dp"/>
        </RelativeLayout>


</LinearLayout>

@drawable/border

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <gradient
                android:centerColor="#D5E2ED"
                android:endColor="#0000"
                android:angle="90"/>
        </shape>
    </item>

    <item android:bottom="10dp">
        <shape>
            <solid android:color="#D5E2ED"/>
        </shape>
    </item>

    <!-- base background -->
    <item android:bottom="5dp" android:top="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#fff"/>
            <padding android:bottom="10dp" android:top="10dp"/>
        </shape>
    </item>

</layer-list>

result:

happy coding....

Great tip using a cardview, but I was looking for a way to do it with ConstraintLayout. It was only after I tried with a simple TextView that I found out that my problem isn't because of the ConstraintLayout at all. — redflour, Dec 09 '17 at 10:06

score 0 · Accepted Answer · answered Dec 09 '17 at 10:13

I'll get to the answer, but some background first. I was trying to achieve the look with a custom view that used a ConstraintLayout. This view would be used in another layout. I was when I tried using a simple TextView that I realised that the shadows weren't being rendered because, thus destroying my assumption that it was something ConstraintLayout related.

What worked? I know, from the documentations, that shadows and rendered using a View's background. This, I have, and indeed, it was a solid color with no alpha value (as others on SO have mentioned). Much like so:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="#ffffff" />
    </shape>

It was after I added android:radius to this, and then the shadows were rendered.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#ffffff" />
    <corners android:radius="1dp" />
</shape>

And if you were wondering, why not set it to 0dp? Well, the shadows disappear again when the radius values were set to 0dp.

What's wrong with this layout that's causing the elevation shadow not to appear?

2 Answers2