Drawing two strokes for Android ListView divider?
Asked Answered
K

2

9

Is it possible to draw two strokes (one after another) for ListView divider?

I've tried the following drawable, but it only shows the first stroke:

<?xml version="1.0" encoding="utf-8"?>

<shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="line">
    <stroke
            android:color="#eeeeee"
            />
    <size
            android:height="1px"
            />

    <stroke
            android:color="#c1c1c1"
            />
    <size
            android:height="1px"
            />
</shape>
Khadijahkhai answered 27/1, 2013 at 13:53 Comment(0)
B
23

Yes, it is possible. If you want to create it with shape drawables, you have to do it differently. A shape drawable can contain just one shape, one line in your case. You can combine two shapes in layer list drawable. Drawable in the layer list are drawn one above another, the last one at the top. To create two lines you just have to set the proper padding for each of the lines, so that both the lines are visible. The resulting drawable will be something like this (I made the lines thicker in the example):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="2dp">
        <shape android:shape="line">
            <stroke
                    android:color="#eeeeee"
                    android:width="2dp"
                    />
            <size
                    android:height="4dp"
                    />
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="line">
            <stroke
                    android:color="#c1c1c1"
                    android:width="2dp"
                    />
            <size
                    android:height="4dp"
                    />
        </shape>
    </item>
</layer-list>
Backman answered 27/1, 2013 at 17:58 Comment(2)
Great! Just to add one comment, cause it took me 15 more minutes to understand why this does not work: remove dividerHeight or set it to the proper value, otherwise the line will not be visible.Uncial
Was looking all over for this answer. The height attribute coupled with the top and bottom dimensions for the items is confusing!Senarmontite
E
1

If you want the 2 strokes to be really thin, let's say 1px height each, I tried the solution above and I could't make it.

I found it much easier painting a litte image (1x2) with the 2 pixels with the desired colors, and then define the image in the divider doing:

android:divider="@drawable/myTinyDivider"

Hope this helps someone.

Exploratory answered 24/4, 2014 at 14:46 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.