How to draw a line on the Android screen: from simple to complex

Drawing lines on the screen of Androiddevices is one of the basic tasks that developers face when creating custom interfaces, graphic editors or game elements. Despite its apparent simplicity, the implementation of this feature can vary from a couple of lines of code to complex, optimized solutions, depending on the chosen approach. In this article we will analyze all the current methods - from classic Canvas to modern Jetpack Compose, and also consider the nuances of performance and adaptation to different versions. Android.

The peculiarity of drawing in Android lies in the variety of tools: you can use standard widgets, custom views or a declarative approach with Compose. Each method has its pros and cons. For example, Canvas gives maximum control, but requires manual optimization, while XML figures is easier to implement, but limited in flexibility. We will help you choose the best option for your task - be it a simple dividing line in the layout or a dynamic graph in real time.

It is important to consider that some methods (for example, working with SurfaceView) may require knowledge of the life cycle of Androidcomponents, while others (like Vector Drawable) may require an understanding of vector graphics. If you are a beginner, start with the section about XMLlines; if you are an experienced developer, pay attention to Compose and Pathanimations.

1. Drawing a line via XML: the simplest way

The fastest way to add a static line to the layout is to use standard Androidwidgets. Suitable for horizontal or vertical dividers <View> with a specified height/width and background. This method is ideal for static interface elements where dynamic changes in parameters are not required.

Example code for a horizontal line with height 1dp and gray color:

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#FFCCCCCC" />

• ✅ Pros: minimal code, no need for custom classes, supported by all versions Android.
• ❌ Cons: you cannot draw an inclined line or change it programmatically without redrawing the layout.
• 🔧 When to use: for separators in lists (RecyclerView), screen footers or static ones layouts.

For more complex shapes (for example, a dotted line) you can use Vector Drawable. Create a file in the folder res/drawable:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="1dp"
android:viewportWidth="24"
android:viewportHeight="1">
<path
android:fillColor="#FF000000"
android:pathData="M0,0 L24,0"
android:strokeWidth="1"/>
</vector>

⚠️ Attention: When using vector lines in RecyclerView make sure that the parameter android:tint is not overridden in the theme - this may cause the line color to change unexpectedly on some devices.

2. Custom View with onDraw() override

If you need a dynamic line (for example, changing color on hover or animated), you will have to create a custom one View-class. This method requires understanding the life cycle of a view and working with Canvas, but gives full control over the appearance.

Example code for a simple horizontal line with the ability to change color:

class CustomLineView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

private var lineColor = Color.BLACK
private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
style = Paint.Style.STROKE
strokeWidth = 2f
}

init {
attrs?.let {
val typedArray = context.obtainStyledAttributes(it, R.styleable.CustomLineView)
lineColor = typedArray.getColor(R.styleable.CustomLineView_lineColor, Color.BLACK)
typedArray.recycle()
}
}

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
paint.color = lineColor
canvas.drawLine(0f, height / 2f, width.toFloat(), height / 2f, paint)
}

fun setLineColor(color: Int) {
lineColor = color
invalidate()
}
}

• 🎨 Additional features:
  • Changing the thickness of the line through paint.strokeWidth.
  • Adding a shadow using paint.setShadowLayer().
  • Drawing a dotted line via PathEffect.
• ⚡ Performance: method onDraw() is called frequently - avoid heavy calculations inside it.

⚠️ Attention: When using custom views in RecyclerView or ListView be sure to implement the method onMeasure() for correct size calculation. Otherwise, artifacts may occur when scrolling.

Define attributes in values/attrs.xml

Override onDraw()

Add methods for dynamically changing parameters

Optimize invalidate() for animations

-->

3. Drawing on Canvas in SurfaceView

For complex graphics tasks (for example, real-time drawing or animations), the standard View may not be performant enough. In such cases, it is used SurfaceView —it provides a separate thread for drawing, which prevents the interface from slowing down.

An example of implementing a simple drawing canvas:

class DrawingSurfaceView(context: Context) : SurfaceView(context), SurfaceHolder.Callback {

private lateinit var drawThread: DrawThread
private val paint = Paint().apply {
color = Color.RED
strokeWidth = 5f
style = Paint.Style.STROKE
}
private val path = Path()

init {
holder.addCallback(this)
}

override fun surfaceCreated(holder: SurfaceHolder) {
drawThread = DrawThread(holder)
drawThread.start()
}

override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {}
override fun surfaceDestroyed(holder: SurfaceHolder) {
drawThread.interrupt()
}

fun addLine(startX: Float, startY: Float, endX: Float, endY: Float) {
path.moveTo(startX, startY)
path.lineTo(endX, endY)
}

inner class DrawThread(private val holder: SurfaceHolder) : Thread() {
override fun run() {
while (!isInterrupted) {
val canvas = holder.lockCanvas()
try {
canvas.drawColor(Color.WHITE)
canvas.drawPath(path, paint)
} finally {
holder.unlockCanvasAndPost(canvas)
}
sleep(16) // ~60 FPS
}
}
}
}

• 🔄 When to use SurfaceView:
  • For drawing at high frame rates (games, graphics).
  • When you need to avoid artifacts during fast updates.
  • For working with video or camera.
• 🚫 Limitations:
  • More complex implementation compared to conventional View.
  • Manual control of the drawing flow is required.

Critical nuance: when using SurfaceView in RecyclerView or ViewPager be sure to stop the drawing flow in onDetachedFromWindow(), otherwise memory leaks are possible.

4. Jetpack Compose: a declarative approach

With the advent Jetpack Compose drawing lines has become easier and more intuitive. The library provides a component Canvasthat allows you to draw directly in composition functions without creating custom views. This method is ideal for modern applications written in Kotlin.

Example code for drawing a diagonal line:

@Composable
fun DiagonalLine() {
Canvas(modifier = Modifier.fillMaxSize()) {
drawLine(
color = Color.Blue,
start = Offset(0f, 0f),
end = Offset(size.width, size.height),
strokeWidth = 3f
)
}
}

• ✨ Advantages Compose:
  • Minimal boilerplate code.
  • Automatic optimization of redraws.
  • Easy integration with animations via animate*AsState.
• 📉 Disadvantages:
  • Requires a minimum version API 21.
  • Less control over low-level settings Paint.

To create a dotted line in Compose use PathEffect:

drawLine(
color = Color.Green,
start = Offset(0f, center.y),
end = Offset(size.width, center.y),
strokeWidth = 4f,
pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
)

⚠️ Attention: The Compose coordinates Offset are measured from the upper left corner, and the Y axis is directed down. This differs from the standard Canvas v View, where the Y axis is directed upward.

var lineLength by remember { mutableStateOf(0f) }
val animatedLength by animateFloatAsState(
targetValue = lineLength,
animationSpec = tween(durationMillis = 1000)
)
Canvas(Modifier.fillMaxSize()) {
drawLine(
color = Color.Red,
start = Offset(0f, center.y),
end = Offset(animatedLength * size.width, center.y),
strokeWidth = 5f
)
}

val path = Path().apply {
moveTo(0f, 0f)
lineTo(100f, 100f)
lineTo(200f, 0f)
lineTo(300f, 100f)
// We continue to draw a zigzag
}
canvas.drawPath(path, paint)

paint.pathEffect = DashPathEffect(floatArrayOf(10f, 5f), 0f)
canvas.drawPath(path, paint)

val animator = ValueAnimator.ofFloat(0f, 1f).apply {
duration = 1000
addUpdateListener { animation ->
val progress = animation.animatedValue as Float
lineEndX = progress * screenWidth
invalidate() // Redraw View
}
}
animator.start()

val points = listOf(/ coordinates of points /)
val path = Path()
var currentIndex = 0

val animator = ValueAnimator.ofInt(0, points.size - 1).apply {
duration = 2000
addUpdateListener {
currentIndex = it.animatedValue as Int
path.reset()
for (i in 0..currentIndex) {
if (i == 0) path.moveTo(points[i].x, points[i].y)
else path.lineTo(points[i].x, points[i].y)
}
invalidate()
}
}

class LineDividerDecoration(private val color: Int, private val height: Int) : RecyclerView.ItemDecoration() {

private val paint = Paint().apply {
this.color = color
style = Paint.Style.STROKE
strokeWidth = height.toFloat()
}

override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
val left = parent.paddingLeft.toFloat()
val right = parent.width - parent.paddingRight.toFloat()

for (i in 0 until parent.childCount - 1) {
val child = parent.getChildAt(i)
val params = child.layoutParams as RecyclerView.LayoutParams
val top = child.bottom + params.bottomMargin.toFloat()
c.drawLine(left, top, right, top, paint)
}
}
}

recyclerView.addItemDecoration(
LineDividerDecoration(Color.GRAY, 1)
)

ValueAnimator.ofObject(ArgbEvaluator(), Color.RED, Color.BLUE).apply {
addUpdateListener { animator ->
paint.color = animator.animatedValue as Int
invalidate()
}
duration = 1000
start()
}

val polyline = googleMap.addPolyline(
PolylineOptions()
.add(LatLng(51.5, -0.1), LatLng(40.7, -74.0))
.width(5f)
.color(Color.RED)
)