Shape lines are always black in a xml drawable

Question

I'm trying to make a drawable which should look like in the image below: 3 horizontal lines of 1dp, each with a different color, and the rest of the space should be filled with a gradient:

So I wrote this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="line">
            <stroke android:width="1dp" android:color="#c80047"/>
        </shape>
    </item>
    <item android:top="1dp">
        <shape android:shape="line" >
            <stroke android:width="1dp" android:color="#5ec800"/>
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="line" >
            <stroke android:width="1dp" android:color="#ffffff"/>
        </shape>
    </item>
    <item android:left="0dp" android:right="0dp" android:top="3dp"> 
        <shape android:shape="rectangle">

            <gradient android:angle="-90" android:startColor="#3B3B3B"
                android:endColor="#000000" />

        </shape>
    </item>

</layer-list>

The gradient is correctly drawn but the 3 line stay black. I have tried to add <stroke android:color="a_color" /> without result.

What am I missing ?

Answer 1

Those lines are drawn but they are drawn not at the top where you think they are, instead they are drawn at the center of the drawable(you can see this if you move the last item, the rectangle with the gradient at the top before any of the lines shapes) and are covered by the last item, the gradient rectangle.

To make that drawable you could try this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <solid android:color="#c80047" />

            <size android:height="1dp" />
        </shape>
    </item>
    <item android:top="1dp">
        <shape>
            <solid android:color="#5ec800" />

            <size android:height="1dp" />
        </shape>
    </item>
    <item android:top="2dp">
        <shape>
            <solid android:color="#ffffff" />

            <size android:height="1dp" />
        </shape>
    </item>
    <item
        android:left="0dp"
        android:right="0dp"
        android:top="3dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="-90"
                android:endColor="#000000"
                android:startColor="#3B3B3B" />
        </shape>
    </item>

</layer-list>

Answer 2

all those three line are aligned in center, I couldn't see any parameter to set the gravity. I would go those lines also as rectange.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item> 
        <shape android:shape="rectangle">
            <solid android:color="#c80047"/>
        </shape>
    </item>
        <item android:top="1dp"> 
        <shape android:shape="rectangle">
            <solid android:color="#5ec800"/>
        </shape>
    </item>
    <item android:top="2dp"> 
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
    <item android:left="0dp" android:right="0dp" android:top="3dp"> 
        <shape android:shape="rectangle">
            <gradient android:angle="-90" android:startColor="#3B3B3B"
                android:endColor="#000000" />
        </shape>
    </item>
</layer-list>