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:
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.
You could change the shape to "oval" as well in order to get a dotted circle 😃
Thanks for reading the whole thing! 🏅👌🏻