3 Ways to Create Lines in Jetpack Compose

Jetpack Compose Line

In this article, we’ll learn how to create horizontal and vertical lines in Jetpack Compose with the help of examples.

Prerequisites:

This article talks about the lines using Material 2 APIs. If you want the latest Material 3 version, follow this link.

There are three ways to create lines in Jetpack Compose:

  1. Divider()
  2. Box()
  3. Spacer()

Let’s look at each one.

First, create an empty Jetpack Compose project and open MainActivity. Create a MyUI() composable and call it from the onCreate() method.

// add the following packages
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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

@Composable
private fun MyUI() {

}

We’ll write our code in the MyUI().

1. Lines Using Divider():

Jetpack Compose provides Divider() API. It is the recommended way to create lines because it follows material guidelines. The API looks like this:

@Composable
fun Divider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp,
    startIndent: Dp = 0.dp
)

modifier – This is to modify the layout.

color – The color of the divider line.

thickness – Thickness of the divider line. The default value is 1 dp.

startIndent – The initial position of this line. By default, it is 0 dp which means no offset.

Horizontal Line Using Divider():

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

Output:

Divider horizontal line

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

Vertical Line Using Divider():

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

Output:

Divider Vertical Line

Gradient Lines Using Divider():

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

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

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

Output:

Gradient Lines Using Divider

2. Lines Using Box():

We can also use 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:

Horizontal Line Using Box

Vertical Line Using Box():

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

Output:

Vertical Line Using Box

Gradient Lines Using Box():

Just like Divider(), we can create gradient lines using the Box().

@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:

Gradient Lines Using Box

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:

Horizontal Line Using Spacer

Vertical Line Using Spacer:

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

Output:

Vertical Line Using Spacer

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:

Gradient Lines Using Spacer

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 Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.

Related Articles:

References:

Leave a Comment