How do I make a dotted/dashed line in Android?

ID : 10464

viewed : 22

Tags : androidandroid

Top 5 Answer for How do I make a dotted/dashed line in Android?

vote vote

98

Without java code:

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="#FF00FF"        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" /> 

Effect: enter image description here

vote vote

87

the path effect is set on the paint object

Paint fgPaintSel = new Paint(); fgPaintSel.setARGB(255, 0, 0,0); fgPaintSel.setStyle(Style.STROKE); fgPaintSel.setPathEffect(new DashPathEffect(new float[] {10f,20f}, 0f)); 

you can create all sorts of dotted patterns by supplying more numbers in the int[] array it specifies the ratios of dash and gap. This is a simple, equally dashed, line.

vote vote

74

Creating dotted line using XML.
Create xml in drawable folder and give that background to the item to which you want to set dotted border.

Creating XML Background "dashed_border":

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >     <item>         <shape>             <solid android:color="#ffffff" />             <stroke                 android:dashGap="5dp"                 android:dashWidth="5dp"                 android:width="1dp"                 android:color="#0000FF" />             <padding                 android:bottom="5dp"                 android:left="5dp"                 android:right="5dp"                 android:top="5dp" />         </shape>     </item> </layer-list> 

Adding that background to item:

<Button         android:id="@+id/button1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/dashed_border"/> 
vote vote

69

Create xml (view_line_dotted.xml):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">         <item             android:bottom="-1dp"             android:left="-1dp"             android:right="-1dp"             android:top="0dp">              <shape android:shape="rectangle">                 <stroke                     android:width="1dp"                     android:color="#ffff0017"                     android:dashGap="3dp"                     android:dashWidth="1dp" />                  <solid android:color="@android:color/transparent" />                  <padding                     android:bottom="10dp"                     android:left="10dp"                     android:right="10dp"                     android:top="10dp" />             </shape>         </item> </layer-list> 

Set as background of your view:

<View     android:layout_width="match_parent"     android:layout_height="1dp"     android:background="@drawable/view_line_dotted" /> 
vote vote

57

What I did when I wanted to draw a dotted line is to define a drawable dash_line.xml:

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

And then in the layout just define a view with background as dash_line. Note to include android:layerType="software", otherwise it won't work.

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

Top 3 video Explaining How do I make a dotted/dashed line in Android?

Related QUESTION?