3 Ways to Create Lines in Jetpack Compose

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

Prerequisites:

• Row, Column, and Box Layouts

There are three APIs to create lines in Jetpack Compose:

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

Let’s look at each one.

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

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.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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 follows material guidelines. That is why it is the recommended way to create lines. 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:

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:

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:

Vertical Line Using Box():

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

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:

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:

• Text in Jetpack Compose
• 5 Awesome Jetpack Compose Custom Button Designs
• AppLovin MAX Mediation in Android

References:

• Android Docs Divider