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:

The grey part represent the 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 ?

score 1 · Accepted Answer · answered Jun 14 '12 at 09:23

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>

Thanks for your answer. With your solution , the second line is 2dp wide whereas the first and the third are 1dp. I have the same problem using shape="rectangle". An exemple extract from my app is visible here : http://hpics.li/437e8e4 (save and zoom on it) — grunk, Jun 14 '12 at 09:52
@grunk I've seen the picture but I think that happens because of the size of those lines(remember that `1dp` is really small for a phone screen, the user will barely see that there is something there, let alone see each line sizes). Anyway, I've tested my code and the lines are the same size if you use bigger dimensions(I've used 10dp to actually see the lines better) and it works, the lineas have the same height. — user, Jun 14 '12 at 10:04
do you have any idea about this ? :http://stackoverflow.com/questions/19166342/how-do-i-avoid-double-borders-between-lists/19201562?noredirect=1#comment28459924_19201562 — , Oct 07 '13 at 19:30

score 0 · Answer 2 · answered Jun 14 '12 at 09:22

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>

Shape lines are always black in a xml drawable

2 Answers2