Shadow-like drawable, using "layer-list"

android developer picture android developer · Nov 14, 2014 · Viewed 18k times · Source

Background

I'm trying to make a (fake) shadow below a view, so that the layers would be vertical in this manner:

  • a line of color "#43000000" with a height of "1dp"
  • below the line, a gradient that starts from the top with color "#1A000000" and ends with color "#00000000", and is of a height of "8dp".

The problem

For some reason, I can't draw the line correctly.

No matter what I do, the line for some reason takes the whole space, while the gradient seems fine.

What I tried

I tried using "line" as the shape and also "rectangle". I also tried using "stroke" instead of "solid", tried adding padding and margins...

Here's the XML of the drawable file:

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

    <item>
        <shape android:shape="rectangle" >
            <size android:height="1dp" />

            <solid android:color="#43000000" />
        </shape>
    </item>
    <item android:top="1dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#00000000"
                android:startColor="#1A000000" />

            <size android:height="8dp" />
        </shape>
    </item>

</layer-list>

Again, this is not the only thing I've tried. It's just my first attempt.

The question

How can I fix this XML ? what is causing it to happen?

Answer

android developer picture android developer · May 22, 2015

Here's what I've found to be working:

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

    <item android:bottom="8dp">
        <shape android:shape="rectangle" >
            <size android:height="1dp" />

            <solid android:color="#43000000" />
        </shape>
    </item>
    <item android:top="1dp">
        <shape
            android:dither="true"
            android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#00000000"
                android:startColor="#10000000" />

            <size android:height="8dp" />
        </shape>
    </item>

</layer-list>