How do I make a dotted dashed line in Android

Question

I m trying to make a dotted line  I m using this right now for a solid line   LinearLayout divider   new LinearLayout  this    LinearLayout LayoutParams params   new LinearLayout LayoutParams  LinearLayout LayoutParams FILL PARENT  2    divider setLayoutParams  params    divider setBackgroundColor  getResources   getColor  R color grey        I need something like this  but dotted instead of solid  I d like to avoid making hundreds of layouts alternating between a transparent layout and solid layout

User · Answer

By using this class you can apply  dashed and underline  effect to multiple lines text  to use DashPathEffect you have to turn off hardwareAccelerated of your TextView though DashPathEffect method has a problem with long text   you can find my sample project here  https   github com jintoga Dashed-Underlined-TextView blob master Untitled png     public class DashedUnderlineSpan implements LineBackgroundSpan  LineHeightSpan        private Paint paint      private TextView textView      private float offsetY      private float spacingExtra       public DashedUnderlineSpan TextView textView  int color  float thickness  float dashPath                                 float offsetY  float spacingExtra            this paint   new Paint            this paint setColor color           this paint setStyle Paint Style STROKE           this paint setPathEffect new DashPathEffect new float     dashPath  dashPath    0            this paint setStrokeWidth thickness           this textView   textView          this offsetY   offsetY          this spacingExtra   spacingExtra              Override     public void chooseHeight CharSequence text  int start  int end  int spanstartv  int v                               Paint FontMetricsInt fm            fm ascent -  spacingExtra          fm top -  spacingExtra          fm descent    spacingExtra          fm bottom    spacingExtra              Override     public void drawBackground Canvas canvas  Paint p  int left  int right  int top  int baseline                                 int bottom  CharSequence text  int start  int end  int lnum            int lineNum   textView getLineCount            for  int i   0  i  lt  lineNum  i                  Layout layout   textView getLayout                canvas drawLine layout getLineLeft i   layout getLineBottom i  - spacingExtra   offsetY                      layout getLineRight i   layout getLineBottom i  - spacingExtra   offsetY                      this paint                       Result

User · Answer

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     lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item gt           lt shape gt               lt solid android color   ffffff    gt               lt stroke                 android dashGap  5dp                  android dashWidth  5dp                  android width  1dp                  android color   0000FF    gt               lt padding                 android bottom  5dp                  android left  5dp                  android right  5dp                  android top  5dp    gt           lt  shape gt       lt  item gt   lt  layer-list gt    Adding that background to item    lt Button         android id    id button1          android layout width  wrap content          android layout height  wrap content          android background   drawable dashed border   gt

User · Answer

For a Dotted effect on a Canvas  set this attribute to the paint object    paint setPathEffect new DashPathEffect new float    0 30   0      And change the value 30 as your render suits you   it represents the  distance  between each dots

User · Answer

If you are looking for a vertical line  use this drawable    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item         android top  -8dp          android bottom  -8dp          android left  -8dp  gt           lt shape gt               lt solid android color   android color transparent   gt               lt stroke                 android width  4dp                  android color   ffffff                  android dashGap  4dp                  android dashWidth  4dp   gt           lt  shape gt       lt  item gt   lt  layer-list gt    The negative top bottom and left values remove the unwanted sides of the shape leaving a single dashed line   Use it in a view like so    lt View android layout width  4dp  android layout height  match parent  android background   drawable dash line vertical  android layerType  software    gt

User · Answer

I have created dashed dotted line for EditText  Here you go  Create your new xml  e g dashed border xml Code here    lt layer-list xmlns android  http   schemas android com apk res android  gt   lt item     android bottom  1dp      android left  -2dp      android right  -2dp      android top  -2dp  gt       lt shape android shape  rectangle  gt           lt stroke             android width  2dp              android color   000000              android dashGap  3dp              android dashWidth  1dp    gt            lt solid android color   00FFFFFF    gt            lt padding             android bottom  10dp              android left  10dp              android right  10dp              android top  10dp    gt       lt  shape gt   lt  item gt  lt  layer-list gt    And use your new xml file in your EditText for example    lt EditText     android layout width  match parent      android layout height  wrap content      android background   drawable dashed border   gt    Cheers

User · Answer

The only thing that worked for me and I think it is the simplest way is using a Path with a paint object like this       Paint paintDash   new Paint        paintDash setARGB 255  0  0  0       paintDash setStyle Paint Style STROKE       paintDash setPathEffect new DashPathEffect new float   10f 10f   0        paintDash setStrokeWidth 2       Path pathDashLine   new Path      Then onDraw     important call reset if you change those points between ondraw calls  cause Path save all the movements       pathDashLine reset        pathDashLine moveTo porigenX  porigenY       pathDashLine lineTo cursorX cursorY       c drawPath pathDashLine  paintDash

User · Answer

Create xml  view line dotted xml     lt layer-list xmlns android  http   schemas android com apk res android  gt           lt item             android bottom  -1dp              android left  -1dp              android right  -1dp              android top  0dp  gt                lt shape android shape  rectangle  gt                   lt stroke                     android width  1dp                      android color   ffff0017                      android dashGap  3dp                      android dashWidth  1dp    gt                    lt solid android color   android color transparent    gt                    lt padding                     android bottom  10dp                      android left  10dp                      android right  10dp                      android top  10dp    gt               lt  shape gt           lt  item gt   lt  layer-list gt    Set as background of your view    lt View     android layout width  match parent      android layout height  1dp      android background   drawable view line dotted    gt

User · Answer

I ve created a library with a custom view to solve this issue  and it should be very simple to use  See https   github com Comcast DahDit for more  You can add dashed lines like this    lt com xfinity dahdit DashedLine     android layout width  250dp      android layout height  wrap content      app dashHeight  4dp      app dashLength  8dp      app minimumDashGap  3dp      app layout constraintRight toRightOf  parent      android id    id horizontal dashes   gt

User · Answer

Best Solution for Dotted Background working perfect   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android         android shape  rectangle  gt     lt stroke     android dashGap  3dp      android dashWidth  2dp      android width  1dp      android color   color colorBlack    gt   lt  shape gt

User · Answer

I dont know why but the voted answers don t work for me  I write it this way and works good  Define a custom view   public class XDashedLineView extends View    private Paint   mPaint  private Path    mPath  private int     vWidth  private int     vHeight   public XDashedLineView Context context        super context       init       public XDashedLineView Context context  AttributeSet attrs        super context  attrs       init       public XDashedLineView Context context  AttributeSet attrs  int defStyleAttr        super context  attrs  defStyleAttr       init       private void init         mPaint   new Paint        mPaint setColor Color parseColor   3F577C         mPaint setStyle Paint Style STROKE       mPaint setPathEffect new DashPathEffect new float    10 10   0        mPath   new Path        Override protected void onMeasure int widthMeasureSpec  int heightMeasureSpec        super onMeasure widthMeasureSpec  heightMeasureSpec       this vWidth   getMeasuredWidth        this vHeight   getMeasuredHeight        mPath moveTo 0  this vHeight   2       mPath quadTo this vWidth   2  this vHeight   2  this vWidth  this vHeight   2       Override protected void onDraw Canvas canvas        super onDraw canvas       canvas drawPath mPath  mPaint         Then you can use it in your xml            lt com YOUR PACKAGE NAME XDashedLineView         android layout width  690dp          android layout height  1dp          android layout marginLeft  30dp          android layout marginTop  620dp   gt

User · Answer

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

User · Answer

None of these answers worked for me  Most of these answers give you a half-transparent border  To avoid this  you need to wrap your container once again with another container with your preferred color  Here is an example   This is how it looks  dashed border layout xml   lt LinearLayout android layout width  wrap content  android layout height  wrap content  android backgroundTint   color black  android background   drawable dashed border out  gt   lt LinearLayout     android layout width  150dp      android layout height  50dp      android padding  5dp      android background   drawable dashed border in      android orientation  vertical  gt       lt TextView         android layout width  wrap content          android layout height  wrap content          android text  This is amp  10 Dashed Container          android textSize  16sp    gt   lt  LinearLayout gt      dashed border in xml   lt layer-list xmlns android  http   schemas android com apk res android   gt   lt item gt       lt shape gt           lt corners android radius  10dp    gt           lt solid android color   ffffff    gt           lt stroke             android dashGap  5dp              android dashWidth  5dp              android width  3dp              android color   0000FF    gt           lt padding             android bottom  5dp              android left  5dp              android right  5dp              android top  5dp    gt       lt  shape gt   lt  item gt      dashed border out xml   lt layer-list xmlns android  http   schemas android com apk res android   gt   lt item gt       lt shape gt           lt corners android radius  12dp    gt       lt  shape gt   lt  item gt

User · Answer

Use a ShapeDrawable instead of a LinearLayout and play with dashWidth and dashGap  http   developer android com guide topics resources drawable-resource html Shape

User · Answer

Without java code  drawable dotted xml   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt shape xmlns android  quot http   schemas android com apk res android quot  android shape  quot line quot  gt        lt stroke        android color  quot  FF00FF quot         android dashWidth  quot 10px quot         android dashGap  quot 10px quot         android width  quot 1dp quot   gt   lt  shape gt   view xml   lt ImageView     android layout width  quot match parent quot      android layout height  quot 5dp quot      android src  quot  drawable dotted quot      android layerType  quot software quot    gt   Effect

User · Answer

I liked the solution from Ruidge  but I needed more control from XML  So I changed it to Kotlin and added attributes   1  Copy the Kotlin class   import android content Context import android graphics   import android util AttributeSet import android view View  class DashedDividerView   View   constructor context  Context    this context  null  0  constructor context  Context  attributeSet  AttributeSet    this context  attributeSet  0   companion object       const val DIRECTION VERTICAL   0     const val DIRECTION HORIZONTAL   1    private var dGap   5 25f private var dWidth   5 25f private var dColor   Color parseColor   EE0606   private var direction   DIRECTION HORIZONTAL private val paint   Paint   private val path   Path    constructor context  Context  attrs  AttributeSet   defStyleAttr  Int    super      context      attrs      defStyleAttr         val typedArray   context obtainStyledAttributes          attrs          R styleable DashedDividerView          defStyleAttr          R style DashedDividerDefault            dGap   typedArray getDimension R styleable DashedDividerView dividerDashGap  dGap      dWidth   typedArray getDimension R styleable DashedDividerView dividerDashWidth  dWidth      dColor   typedArray getColor R styleable DashedDividerView dividerDashColor  dColor      direction           typedArray getInt R styleable DashedDividerView dividerDirection  DIRECTION HORIZONTAL       paint color   dColor     paint style   Paint Style STROKE     paint pathEffect   DashPathEffect floatArrayOf dWidth  dGap   0f      paint strokeWidth   dWidth      typedArray recycle      override fun onDraw canvas  Canvas        super onDraw canvas      path moveTo 0f  0f       if  direction    DIRECTION HORIZONTAL            path lineTo measuredWidth toFloat    0f        else           path lineTo 0f  measuredHeight toFloat              canvas drawPath path  paint         2  Create an attr file in the  res directory and add this    lt declare-styleable name  DashedDividerView  gt       lt attr name  dividerDashGap  format  dimension    gt       lt attr name  dividerDashWidth  format  dimension    gt       lt attr name  dividerDashColor  format  reference color    gt       lt attr name  dividerDirection  format  enum  gt           lt enum name  vertical  value  0    gt           lt enum name  horizontal  value  1    gt       lt  attr gt   lt  declare-styleable gt    3  Add a style to the styles file    lt style name  DashedDividerDefault  gt       lt item name  dividerDashGap  gt 2dp lt  item gt       lt item name  dividerDashWidth  gt 2dp lt  item gt       lt  -- or any color -- gt       lt item name  dividerDashColor  gt  EE0606 lt  item gt       lt item name  dividerDirection  gt horizontal lt  item gt   lt  style gt    4  Now you can use the default style   lt  -- here will be your path to the class -- gt   lt com your package app DashedDividerView     android layout width  match parent      android layout height  2dp        gt    or set attributes in XML   lt com your package app DashedDividerView     android layout width  match parent      android layout height  2dp      app dividerDirection  horizontal      app dividerDashGap  2dp      app dividerDashWidth  2dp      app dividerDashColor   color light gray   gt

User · Answer

Similar to tier777 here is a solution for a horizontal line    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android top  -1dp  gt           lt shape android shape  line  gt               lt stroke                 android width  1dp                  android color   111                  android dashWidth  8dp                  android dashGap  2dp                    gt               lt solid android color   android color transparent    gt           lt  shape gt       lt  item gt   lt  layer-list gt    The clue is  lt item android top  -1dp  gt    In order to show dashed line on old devices   lt   API 21  you should create a view with android layerType  software   see Android dashed line drawable potential ICS bug     lt  xml version  1 0  encoding  utf-8   gt   lt View xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  1dp      android background   drawable dashed line      android layerType  software        gt    Also you can add the same view without android layerType  software  to layout-v23 for better performance  but I am not sure it will work on all devices with API 23

User · Answer

I have used the below as a background for the layout    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android         android shape  rectangle  gt   lt stroke    android width  1dp      android dashWidth  10px     android dashGap  10px      android color  android  color black        gt   lt  shape gt

User · Answer

I have custom a dashline which support horizontal amp verical dash line   code below   public class DashedLineView extends View   private float density  private Paint paint  private Path path  private PathEffect effects   public DashedLineView Context context        super context       init context      public DashedLineView Context context  AttributeSet attrs        super context  attrs       init context      public DashedLineView Context context  AttributeSet attrs  int defStyle        super context  attrs  defStyle       init context      private void init Context context        density   DisplayUtil getDisplayDensity context       paint   new Paint        paint setStyle Paint Style STROKE       paint setStrokeWidth density   4         set your own color     paint setColor context getResources   getColor R color XXX        path   new Path          array is ON and OFF distances in px  4px line then 2px space      effects   new DashPathEffect new float     4  2  4  2    0        Override protected void onDraw Canvas canvas           TODO Auto-generated method stub     super onDraw canvas       paint setPathEffect effects       int measuredHeight   getMeasuredHeight        int measuredWidth   getMeasuredWidth        if  measuredHeight  lt   measuredWidth                   horizontal         path moveTo 0  0           path lineTo measuredWidth  0           canvas drawPath path  paint             else                  vertical         path moveTo 0  0           path lineTo 0  measuredHeight           canvas drawPath path  paint

User · Answer

What I did when I wanted to draw a dotted line is to define a drawable dash line xml    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android       android shape  line   gt   lt stroke     android dashGap  3dp      android dashWidth  2dp      android width  1dp      android color   color black    gt   lt  shape gt    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    lt View             android layout width  match parent              android layout height  5dp              android background   drawable dash line              android layerType  software    gt

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

Examples related to android