It is a bit of an edge case when there is a requirement for a dotted line in the design of an Android application… but it happens! so it is good to know what can be done without adding a new asset to the resources.

The first step is to create an .xml file in the drawable folder that is located within the resources (res), such as the following:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:color="#000000"
        android:dashWidth="1dp"
        android:dashGap="4dp"
        android:width="1dp"/>
</shape>

In this drawable, these are the properties that you can customize:
color = line color
dashWidth = width of the dash (dot)
dashGap = space between each dash (dot)
width = width of the line

The second and last step is to use the drawable we just created as the background of a View and give a try!

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

IMPORTANT: If you're not seeing the dotted line as expected, then you have to add the android:layerType = ”software” property to that View, which specifies the view should be backed by a software layer.

This could be applied to any kind of View such as TextView or ViewGroups, but I used a simple View just for sample purposes (you can see another use case at the bottom of this post 😉).

and that's it! 🎉 the result of the previous steps is this:

Dotted Line!

Bonus Tip: If you want to make a square with dotted lines, all you have to do is change the shape = "line" to shape = "rectangle" in the .xml file of the first step.

Dotted Square as background of a TextView

You could change the shape to "oval" as well in order to get a dotted circle 😃

Thanks for reading the whole thing! 🏅👌🏻