Creating horizontal and vertical dotted lines in android

user_2232557 0
Viewed 55588

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

I want to draw like this

enter image description here

For Horizontal line 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >

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

</shape>

For vertical line 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >
<size
     android:height="400dp"/>
    <stroke
        android:dashGap="6px"
        android:dashWidth="6px"
        android:color="#C7B299" />

</shape>

But vertical dotted line not displaying my output shows like this

enter image description here

How to draw vertical line.

android-layout android xml
12 Answers

enter image description here

To achieve this, You should create 2 different drawable,

1. Horizontal Line: res/drawable/bg_horizontal_dotted_line.xml

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

2. Vertical Drawable: res/drawable/bg_dotted_line_vertical.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:left="-600dp"
    android:right="-600dp">
    <rotate
      android:drawable="@drawable/bg_horizontal_dotted_line"
      android:fromDegrees="90"
      android:visible="true" />
  </item>
</layer-list>

Now, All you need to do is apply the above vertical XML into the view,

<View
            android:id="@+id/imageView7"
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:background="@drawable/bg_dotted_line_vertical"
            android:layerType="software"/>

Complete Code:

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/ll_task_expanded"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:orientation="vertical"
      app:canExpand="false"
      app:expanded="true">


      <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView3"
        app:srcCompat="@drawable/ic_circle" />

      <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="@+id/imageView5"
        app:layout_constraintStart_toStartOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        app:srcCompat="@drawable/ic_circle" />

      <View
        android:id="@+id/imageView7"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:background="@drawable/bg_dotted_line_vertical"
        android:layerType="software"
        app:layout_constraintBottom_toTopOf="@+id/imageView6"
        app:layout_constraintEnd_toEndOf="@+id/imageView5"
        app:layout_constraintStart_toStartOf="@+id/imageView5"
        app:layout_constraintTop_toBottomOf="@+id/imageView5" />

      <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintStart_toEndOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="parent" />

      <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />
    </androidx.constraintlayout.widget.ConstraintLayout>
user_46583140

This one solves the problem nicely Create drawable line_dash.xml

<?xml version="1.0" encoding="utf-8"?>
<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="@color/grey_20"
                android:dashGap="3dp"
                android:dashWidth="3dp" />

            <solid android:color="@android:color/transparent" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
</layer-list>

Use it like this

 <View
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:layout_margin="@dimen/spacing_middle"
       android:background="@drawable/line_dash" />
user_78098010 
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%">
    <shape android:shape="line">
            <stroke
                android:width="20dp"
                android:color="@color/blue"
                android:dashWidth="20dp"
                android:dashGap="20dp" />
    </shape>
user_131728890

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>
user_78430810 
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="90"
        android:toDegrees="90">
    <shape android:shape="line">
        <stroke
                android:color="@color/darkGray"
                android:width="1dp"
                android:dashGap="4dp"
                android:dashWidth="2dp"/>
    </shape>
</rotate>

<View
                android:layerType="software"
                android:background="@drawable/bg_vertical_dash_gray_1dp"
                android:layout_width="@dimen/_15sdp"
                android:layout_height="@dimen/_30sdp"/>

The key for the above code to get working is using android:layerType="software". For more information, check this link.

user_99935040

Use the below drawable code.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="90"
            android:visible="true">
            <shape android:shape="line">
                <stroke
                    android:width="1dp"
                    android:color="@color/black"
                    android:dashWidth="8dp"
                    android:dashGap="3dp"
                    />
            </shape>
        </rotate>
    </item>
</layer-list>
user_80025630

I've tried so many things and the only thing that worked for me was this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="-300dp"
        android:right="-300dp">
        <rotate
            android:fromDegrees="90"
            android:toDegrees="90">
            <shape android:shape="line" >
                <stroke
                    android:width="2dp"
                    android:dashGap="3dp"
                    android:dashWidth="3dp"
                    android:color="@color/disable" />
            </shape>
        </rotate>
    </item>
</layer-list>
user_162592750

This solution is 100% working and wish help you:

At first create a drawable which will draw a horizontal dashed line.

Let dashed line drawable name is horizontal_dashed_line.xml

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">

     <stroke
      android:width="3dp"
      android:color="#80ffffff"
      android:dashWidth="20dp"
      android:dashGap="5dp" />
  </shape>

if you want to have vertical dashed line you have to rotate this drawable by followings:

Let drawable name is vertical_dashed_line.xml

  <?xml version="1.0" encoding="utf-8"?>
  <rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:drawable="@drawable/horizontal_dashed_line">

  </rotate>

Now you have a horizontal and vertical dashed line.

How to use:

To draw horizontal line simply add horizontal_dashed_line.xml in your layout. For example: 

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/horizontal_dashed_line"

    </RelativeLayout>

But if you want vertical line, just add vertical_dashed_line.xml instead of horizontal_dashed_line.xml.For example:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/vertical_dashed_line"

    </RelativeLayout>

Good luck!

user_72158560
Related