Creating horizontal and vertical dotted lines in android

Question

I want to draw horizontal and vertical dotted lines in android using shapes.

I want to draw like this

Answer 1

I think I've found a "cleaner" solution for this problem by creating a custom view containing specific code to draw the dashed lines (in both vertical and horizontal orientations), and a bunch of attributes to make it very easy to use it from XML layouts. The main advantage of this approach over the "rotated line" method is that you can set the size of the dashed line view the way you would normally do, without having to worry about how the view is going to behave after the rotation (once the rotation applies to the entire dashed line view and not only to the line being drawn).

So here is the step by step solution:

1. Create the file "/res/values/attrs.xml" with the following contents:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
   
   <declare-styleable name="DividerView">
       <attr name="color" format="color" />
       <attr name="dashLength" format="dimension" />
       <attr name="dashGap" format="dimension" />
       <attr name="dashThickness" format="dimension" />
       <attr name="orientation" format="enum">
           <enum name="horizontal" value="0" />
           <enum name="vertical" value="1" />
       </attr>
   </declare-styleable>
   
   </resources>
   

This creates the attributes to control the custom view. Note: If the file above already exists in your project, just copy/paste the "declare-stylable" block inside the existing "resources" block.

2. Create the class DividerView and paste the contents below:

   public class DividerView extends View {
   static public int ORIENTATION_HORIZONTAL = 0;
   static public int ORIENTATION_VERTICAL = 1;
   private Paint mPaint;
   private int orientation;
   
   public DividerView(Context context, AttributeSet attrs) {
       super(context, attrs);
       int dashGap, dashLength, dashThickness;
       int color;
   
       TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DividerView, 0, 0);
   
       try {
           dashGap = a.getDimensionPixelSize(R.styleable.DividerView_dashGap, 5);
           dashLength = a.getDimensionPixelSize(R.styleable.DividerView_dashLength, 5);
           dashThickness = a.getDimensionPixelSize(R.styleable.DividerView_dashThickness, 3);
           color = a.getColor(R.styleable.DividerView_color, 0xff000000);
           orientation = a.getInt(R.styleable.DividerView_orientation, ORIENTATION_HORIZONTAL);
       } finally {
           a.recycle();
       }
   
       mPaint = new Paint();
       mPaint.setAntiAlias(true);
       mPaint.setColor(color);
       mPaint.setStyle(Paint.Style.STROKE);
       mPaint.setStrokeWidth(dashThickness);
       mPaint.setPathEffect(new DashPathEffect(new float[] { dashLength, dashGap, }, 0));
   }
   
   public DividerView(Context context) {
       this(context, null);
   }
   
   @Override
   protected void onDraw(Canvas canvas) {
       if (orientation == ORIENTATION_HORIZONTAL) {
           float center = getHeight() * .5f; 
           canvas.drawLine(0, center, getWidth(), center, mPaint);
       } else {
           float center = getWidth() * .5f; 
           canvas.drawLine(center, 0, center, getHeight(), mPaint);
       }
   }
   }
   

3. In order to use auto-complete of attributes on your layout files, add the following name space definition on the topmost container:

   xmlns:custom="http://schemas.android.com/apk/res/com.example"
   

Replace com.example by the name of your package. You can also change custom by any prefix that better suits your needs. Note: You may need to restart Eclipse to get the auto-complete working after changes on attrs.xml file.

4. And finally create your dashed lines by inserting the following element on your layout, like any other view:

   <com.example.DividerView
       android:layout_width="1dp"
       android:layout_height="fill_parent"
       android:layerType="software" 
       custom:color="@color/grey"
       custom:orientation="vertical"
       custom:dashLength="1dp"
       custom:dashGap="1dp"
       custom:dashThickness="1dp" />
   

I hope it helps!

Answer 2

For the vertical line:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90">
    <shape
        android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff00ff"
            android:dashWidth="8dp"
            android:dashGap="5dp" />
        <size android:width="120dp" />
    </shape>
</rotate>

For the horizontal line:

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

Answer 3

I found the solution

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90" >

    <shape android:shape="line" >
        <stroke
            android:dashGap="6px"
            android:dashWidth="6px"
            android:color="#C7B299" />
    </shape>

</rotate>

OR

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90"
    android:drawable="@drawable/horizontal_line"/>