Android: multiple dashed line background using Shape Drawable

Question

Is there a way to use a shape drawable or something comparable to create a dashed background for a view?

Ideally, I'd like something like this (with different colors of course). Ignore the blue border, I'd just like the redlines ideally repeating as the background of a view.

enter image description here

I just wanted to be able to do a repeat background like /////// without having to go through a .9 patch or image hoop. Yes I do mean tiling the background without an image hopefully. It looks like I have to go with image solution. — adrian, Oct 02 '14 at 02:04
Ideally anything defined via XML, I am just using an image for now but rather use a draw able which scales correctly — adrian, Oct 02 '14 at 21:15

Onik · Answer 1 · 2014-10-10T23:58:17.897

Here is an example:

<?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="#ffffff" />
    </shape>
</item>

<item
    android:top="-400dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>

<item
    android:top="-300dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>

<item
    android:top="-200dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>

<item
    android:top="-100dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>

<item
    android:top="0dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>

<item
    android:top="100dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>

<item
    android:top="200dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>

<item
    android:top="300dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>

<item
    android:top="400dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff0000"
            android:dashWidth="10dp"
            android:dashGap="10dp" />
    </shape>
</item>
</layer-list>

and the screenshot:

enter image description here

In the example there are nine dashed lines. You can place as much of those as you want by moving each new line up and down relative to the central line, the one with android:top="0dp" attribute.

Here is more info on Shape Drawable.

Android: multiple dashed line background using Shape Drawable

1 Answers1