3 Ways to Create Lines in Material 3 Jetpack Compose

In this article, we’ll learn how to create horizontal and vertical lines in Material 3 Jetpack Compose.

Prerequisites:

• Row, Column, and Box

There are three APIs for lines:

1. Divider APIs
2. Box
3. Spacer

Let’s look at each one.

First, create an empty Compose project and open MainActivity. Create a MyUI() composable and call it from the onCreate() method. We’ll write our code in it.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
fun MyUI() {

}

1. Lines Using Divider:

There are two divider APIs:

1. HorizontalDivider
2. VerticalDivider

These are the recommended ways to create lines because they follow material guidelines. They take the same parameters:

@Composable
fun HorizontalDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
)

@Composable
fun VerticalDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
)

modifier – The Modifier to be applied to this line.

thickness – Thickness of this divider line.

color – The color of this divider.

Horizontal Line:

@Composable
private fun MyUI() {
    HorizontalDivider(
        modifier = Modifier.width(width = 100.dp),
        thickness = 10.dp,
        color = Color.Black
    )
}

Output:

Vertical Line:

@Composable
private fun MyUI() {
    VerticalDivider(
        modifier = Modifier
            .height(height = 100.dp),
        color = Color.Green,
        thickness = 10.dp
    )
}

Output:

Note: Jetpack Compose provides Dp.Hairline. If you pass it to thickness, you will get a single-pixel divider regardless of the screen density.

2. Lines Using Box:

We can also use the Box() API to create lines. Set the line’s width, height, and background color using the Modifier.

Horizontal Line Using Box:

@Composable
private fun MyUI() {
    Box(
        modifier = Modifier
            .width(width = 100.dp)
            .height(height = 4.dp)
            .background(color = Color.Blue)
    )
}

Output:

Vertical Line Using Box:

@Composable
private fun MyUI() {
    Box(
        modifier = Modifier
            .width(width = 4.dp)
            .height(height = 100.dp)
            .background(color = Color.Blue)
    )
}

Output:

Gradient Lines Using Box:

We can create gradient lines using the background() modifier and Brush API.

@Composable
fun MyUI() {
    // horizontal line
    Box(
        modifier = Modifier
            .width(width = 100.dp)
            .height(height = 4.dp)
            .background(
                brush = Brush.horizontalGradient(listOf(Color.Green, Color.Yellow)),
                shape = RoundedCornerShape(size = 0.dp)
            )
    )

    // vertical line
    Box(
        modifier = Modifier
            .padding(top = 12.dp) // add some margin
            .width(width = 4.dp)
            .height(height = 100.dp)
            .background(
                brush = Brush.verticalGradient(listOf(Color.Green, Color.Yellow)),
                shape = RoundedCornerShape(size = 0.dp)
            )
    )
}

Output:

3. Lines Using Spacer:

Spacer() is actually used to add padding and margin. But we can also create a line by setting the background color.

Horizontal Line Using Spacer:

@Composable
private fun MyUI() {
    Spacer(
        modifier = Modifier
            .width(width = 100.dp)
            .height(height = 4.dp)
            .background(color = Color.Magenta)
    )
}

Output:

Vertical Line Using Spacer:

@Composable
private fun MyUI() {
    Spacer(
        modifier = Modifier
            .width(width = 4.dp)
            .height(height = 100.dp)
            .background(color = Color.Magenta)
    )
}

Output:

Gradient Lines Using Spacer:

@Composable
fun MyUI() {
    // horizontal line
    Spacer(
        modifier = Modifier
            .width(width = 100.dp)
            .height(height = 4.dp)
            .background(
                brush = Brush.horizontalGradient(listOf(Color.Green, Color.Yellow)),
                shape = RoundedCornerShape(size = 0.dp)
            )
    )

    // vertical line
    Spacer(
        modifier = Modifier
            .padding(top = 12.dp) // add some margin
            .width(width = 4.dp)
            .height(height = 100.dp)
            .background(
                brush = Brush.verticalGradient(listOf(Color.Green, Color.Yellow)),
                shape = RoundedCornerShape(size = 0.dp)
            )
    )
}

Output:

Lines in Canvas:

If you are using Canvas, you can create lines using the drawLine() method.

@Composable
fun MyUI() {
    Canvas(
        modifier = Modifier
            .size(size = 300.dp)
            .border(width = 2.dp, color = Color.Magenta, shape = RectangleShape)
    ) {
        drawLine(
            color = Color.Blue,
            strokeWidth = 2.dp.toPx(),
            start = Offset(x = size.width/2, y = 0f),
            end = Offset(x = size.width/2, y = size.height)
        )
    }
}

Output:

Note: We can also create lines using other composables like Row() and Column() using the same modifier methods.

These are the different ways to create horizontal and vertical lines in Material 3 Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.

Related Articles:

References:

• Android docs