Draw vertical dotted line

Question

I want to draw a vertical dotted line in xml, using shape.

I used this example:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="line">

<size
android:height="400dp"
android:width="4dp"/>

<stroke
        android:color="#000000"
        android:dashWidth="100dp"
        android:dashGap="10dp" />
</shape>

Then:

<View android:id="@+id/vertical_line"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/dotted_line"
      android:layout_marginLeft="27dp"/>

But it doesn't work. How can I do it?

score 31 · Accepted Answer · edited Apr 29 '18 at 19:49

31

I tried a few things, I liked the drawable solutions and found that this worked.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:top="-8dp"
    android:bottom="-8dp"
    android:left="-8dp">
    <shape>
        <solid android:color="@android:color/transparent"/>
        <stroke
            android:width="4dp"
            android:color="#df0000"
            android:dashGap="4dp"
            android:dashWidth="4dp"/>
    </shape>
</item>
</layer-list>

The trick is the negative top bottom and left values as these are set outside of the object now, leaving a single dashed line.

Its used in the following view.

<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="@drawable/dash_line_vertical"
android:layerType="software" />

edited Apr 29 '18 at 19:49

Naveed Ahmad

6,627
2
58
83

answered Dec 06 '17 at 13:12

Duncan Hoggan

5,082
3
23
29

1

It a pleasure ^^ – Duncan Hoggan Feb 08 '18 at 13:54
It worked perfectly. Although I can't understand your explanation `as these are set outside of the object now, leaving a single dashed line.`? How this is drawn vertically instead of horizontally – sha Feb 12 '20 at 22:28
@sha Essentially its a rectangle and three of the sides are outside the visible portion of the view. – Duncan Hoggan Feb 13 '20 at 07:52
Nice. Can you also tell me how it's figuring out `dashWidth` is vertical rather than horizontal? – sha Feb 14 '20 at 04:12
1

Good job! and this is some text because the good job is not long enough – Lena Bru Aug 11 '20 at 20:15

score 3 · Answer 2 · answered Nov 04 '13 at 08:41

3

Try this

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >

    <size
        android:height="400dp"
        android:width="4dp" />

    <stroke
        android:dashGap="10dp"
        android:dashWidth="100dp"
        android:color="#000000" />

</shape>

Then use like this

<LinearLayout
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/dot_line"
    android:orientation="vertical" >
</LinearLayout>

answered Nov 04 '13 at 08:41

Ali Imran

8,927
3
39
50

– Ihor Bykov Nov 04 '13 at 08:47
I used it like this< but some how it's drawing in center of RelativeLayout and i can't undertand why( – Ihor Bykov Nov 04 '13 at 08:48
where you want to draw it – Ali Imran Nov 04 '13 at 08:54
In background of View – Ihor Bykov Nov 04 '13 at 08:57
it is in background but in center – Ali Imran Nov 04 '13 at 09:11
how to make each dot circular instead of rectangular? – Malwinder Singh Apr 28 '20 at 05:21

score -2 · Answer 3 · answered Mar 23 '17 at 07:37

-2

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90" >

    <shape android:shape="line" >

    <stroke
        android:color="#000000"
        android:dashWidth="100dp"
        android:dashGap="10dp"/>
    </shape>

</rotate>

answered Mar 23 '17 at 07:37

AnupamChugh

1,779
1
25
36

Seems like there's a bug when using rotate drawable in Android M and above as per the thread here : https://stackoverflow.com/a/8716798/3849039 – AnupamChugh Aug 09 '17 at 17:33

Draw vertical dotted line

3 Answers3