Shadow-like drawable, using "layer-list"

Question

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?

Solution 1

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>

Solution 2

Tried with this,may it fulfill your need with gradient

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

   <item
      android:left="0dp"
      android:right="0dp"
      android:top="0dp"
      android:bottom="2dp">
      <shape android:shape="rectangle">  
         <solid android:color="#E1BEE7"/>
         <corners android:radius="2dp" />
         <gradient
                android:angle="270"
                android:endColor="#e1bee7"
                android:startColor="#e040fb" />
      </shape>
   </item>
</layer-list>

Comments

[android developer]

This doesn't work (plus why do you have rounded corners?) as it made the entire space of it to be the same color (e040fb). But now I think I got something working, so I'll publish it.

[Divya Jain]

It is my code for my one of the sample app,you can remove that corners. :)