How to Draw Line using Canvas in Android Jetpack Compose

By Mohammed Rashid •  January 25th, 2023 • 

Compose’s Canvas component serves as the foundation for creating custom graphics. It is integrated into the layout like any other Compose UI element. With Canvas, you have precise control over the appearance and positioning of the elements you draw.

In this blog post, let’s learn how to draw a line using Canvas in Jetpack Compose.

See the code snippet given below.

Jetpack Compose Canvas Horizontal Line

Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        drawLine(
            start = Offset(x = 0f, y = canvasHeight/2),
            end = Offset(x = canvasWidth, y = canvasHeight/2),
            strokeWidth = 5f,
            color = Color.Blue
        )
    }

Inside the Canvas, it declares two variables canvasWidth and canvasHeight, and assigns them to the width and height of the Canvas. These values can be used later to position elements on the Canvas.

Then, it calls the drawLine function provided by the Canvas class. This function is used to draw a line on the Canvas. Here, it takes four parameters:

jetpack compose horizontal line canvas

Jetpack Compose Canvas Vertical Line

You can draw the vertical line using Canvas as given below.

Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        drawLine(
            start = Offset(x = canvasWidth/2, y = 0f),
            end = Offset(x = canvasWidth/2, y = canvasHeight),
            strokeWidth = 5f,
            color = Color.Blue
        )

And you will get the following output.

jetpack compose canvas vertical line

Jetpack Compose Canvas Diagonal Line

You can try various configurations to get the desired result. For example, the following code snippet gives you a diagonal line as output.

Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        drawLine(
            start = Offset(x = canvasWidth, y = 0f),
            end = Offset(x = 0f, y = canvasHeight),
            strokeWidth = 5f,
            color = Color.Blue
        )
    }
jetpack compose canvas draw line

Following is the complete code for reference.

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CanvasExample()
                }
            }
        }
    }
}

@Composable
fun CanvasExample() {
    Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        drawLine(
            start = Offset(x = canvasWidth, y = 0f),
            end = Offset(x = 0f, y = canvasHeight),
            strokeWidth = 5f,
            color = Color.Blue
        )
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        CanvasExample()
    }
}

That’s how you draw lines using Canvas in Jetpack Compose.

Keep Reading