Dotted Line (Dotted/Dashed Line)

Question

I’m trying to create a division line in my App as shown below.

drawable/dotted.xml:

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

    <stroke
       android:color="#C7B299"
       android:dashWidth="10px"
       android:dashGap="10px"
       android:width="1dp"/>
</shape>

view.xml:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:src="@drawable/dotted"
    android:layerType="software" />

But it’s not working properly, instead of getting a dotted line it’s getting a straight line.

Would anyone know why?

Answer 1

What could be causing this is the use of the unit px for the dimensions of android:dashWidth and android:dashGap.

On devices with high pixel density screen it is possible that 10 pixels are not noticeable as a space, giving the idea that the line is continuous.

In order for the dimensions to be independent of the screen density they must be indicated using the unit dp.

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

    <stroke
       android:color="#C7B299"
       android:dashWidth="10dp"
       android:dashGap="10dp"
       android:width="1dp"/>
</shape>