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?

Consolata

I know it's not the answer you are looking for, but consider using a 9 patch, instead. Cons? Not as light as an xml drawable and you have to replicate it for every resolution to get the best results (for non 90° corners). Pros? Easyness and quality. – Natelson

I know about 9-patch. Sorry. – Consolata

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

Consolata

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

Hm

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. – Consolata

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

Answer 3

You can change the heights in this and get what you want

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:height="10dp"
        android:gravity="bottom">
        <shape
            android:shape="oval">
            <solid android:color="@color/shadow_color" />
        </shape>
    </item>
    <item android:right="20dp" android:left="20dp" android:bottom="12dp" 
android:top="10dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/border_color"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>
    <item android:right="30dp" android:left="30dp" android:bottom="23dp" 
android:top="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/base_color"/>
            <corners android:radius="15dp"/>
        </shape>
    </item>
</layer-list>

Deterrent