Introduction

In Android, a dotted or dashed line is usually either a drawable problem or a custom drawing problem. If the line is simple and static, use an XML shape drawable. If the line needs animation, custom spacing, or special orientation logic, draw it yourself with Canvas and DashPathEffect.

Use a shape drawable for simple dashed separators

For straightforward dividers in layouts, XML is the easiest option.

1<!-- res/drawable/dashed_line.xml -->
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3    android:shape="line">
4    <stroke
5        android:width="2dp"
6        android:color="#808080"
7        android:dashWidth="6dp"
8        android:dashGap="4dp" />
9</shape>

Then apply it in a view that only exists to show the line:

1<View
2    android:layout_width="match_parent"
3    android:layout_height="1dp"
4    android:background="@drawable/dashed_line" />

This approach is clean and declarative. It works well for separators in forms, cards, and simple layout boundaries where the line style does not need to change at runtime.

Draw it manually when you need more control

If the line needs to react to state, change length dynamically, or be reused in a custom widget, drawing it yourself is more flexible.

1import android.content.Context
2import android.graphics.Canvas
3import android.graphics.DashPathEffect
4import android.graphics.Paint
5import android.util.AttributeSet
6import android.view.View
7
8class DashedLineView @JvmOverloads constructor(
9    context: Context,
10    attrs: AttributeSet? = null
11) : View(context, attrs) {
12
13    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
14        style = Paint.Style.STROKE
15        strokeWidth = 4f
16        color = 0xff808080.toInt()
17        pathEffect = DashPathEffect(floatArrayOf(20f, 12f), 0f)
18    }
19
20    override fun onDraw(canvas: Canvas) {
21        super.onDraw(canvas)
22        val centerY = height / 2f
23        canvas.drawLine(0f, centerY, width.toFloat(), centerY, paint)
24    }
25}

The dash pattern comes from the float array in DashPathEffect. The first number is dash length, the second is gap length, and the optional phase shifts where the pattern starts.

Choose the right tool for the job

Use the drawable approach when the line is mostly decorative and fixed. Use the custom view approach when the line is part of a reusable component, needs programmatic color changes, or must support more complex logic such as vertical orientation or animated phase changes.

A third option is to use an ItemDecoration for RecyclerView if the dashed line is really a list divider. That keeps the line logic in the list system instead of scattering separator views through every row layout.

Styling tips

A true dotted look is just a very short dash with a longer gap. For example, dashWidth="1dp" and dashGap="4dp" approximates dots better than longer dash segments. Thickness matters too. Very thick dotted lines can start looking like broken rectangles instead of dots.

Also remember density. Use dp in XML and density-aware values in code so the pattern does not become tiny on high-density screens.

Preview on real densities

Dash and gap values that look balanced on one emulator can look cramped or oversized on another device class. It is worth previewing the drawable or custom view on at least a small phone and a larger-density device before locking in the final pattern.

Common Pitfalls

• Using a normal solid line drawable and expecting strokeWidth alone to create dashes.
• Putting a dashed drawable on a view with no meaningful thickness or size.
• Hard-coding pixel values in custom drawing so the pattern looks wrong across devices.
• Reaching for a custom view when a simple XML drawable would have been enough.
• Forgetting that list dividers often belong in RecyclerView.ItemDecoration rather than in every item layout.

Summary

• Use an XML shape drawable for simple static dashed or dotted lines.
• Use Canvas plus DashPathEffect when you need runtime control.
• Treat dotted lines as a dash-pattern styling problem, not as a special Android widget.
• Keep density and line thickness in mind when tuning the visual result.
• Pick the simplest implementation that matches the role of the line in the UI.