66

Using XML layout, you could use a View object with colored background to draw a line.

<View
   android:width="match_parent"
   android:height="1dp"
   android:background="#000000" />

How can we draw a horizontal or vertical line in Jetpack compose?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Mahdi-Malv
  • 16,677
  • 10
  • 70
  • 117

2 Answers2

115

You can use

Divider Composable

method for Horizontal line like below.

Divider(color = Color.Blue, thickness = 1.dp)

Example :

@Composable
fun drawLine(){
    MaterialTheme {

        VerticalScroller{
            Column(modifier = Spacing(16.dp), mainAxisSize = LayoutSize.Expand) {

                (0..3).forEachIndexed { index, i ->
                    Text(
                        text = "Draw Line !",
                        style = TextStyle(color = Color.DarkGray, fontSize = 22.sp)
                    )

                    Divider(color = Color.Blue, thickness = 2.dp)

                }
            }
        }

    }

}
heyheyhey
  • 1,216
  • 8
  • 12
Rajnish suryavanshi
  • 3,168
  • 2
  • 17
  • 23
  • 4
    `Divider`'s `height` parameter has been renamed to `thickness` – RickSanchez725 Sep 30 '20 at 11:55
  • What if we do not want it to fit the entire width? I just want a fixed width and fixed thickness line, which I want to be interactive by gestures. – Richard Onslow Roper Oct 25 '21 at 03:59
  • @MARSK then just use a coloured box, which is what `Divider` does internally - it's a super simple wrapper composable: `Box(modifier.then(indentMod).fillMaxWidth().height(thickness).background(color = color))` – Luke Needham Jan 12 '22 at 12:36
38

To draw a line you can use the built-in androidx.compose.material.Divider if you use androidx.compose.material or create your own using the same approach that the material divider does:

Horizontal line

Column(
    // forces the column to be as wide as the widest child,
    // use .fillMaxWidth() to fill the parent instead
    // https://developer.android.com/jetpack/compose/layout#intrinsic-measurements
    modifier = Modifier.width(IntrinsicSize.Max)
) {
    Text("one", Modifier.padding(4.dp))

    // use the material divider
    Divider(color = Color.Red, thickness = 1.dp)

    Text("two", Modifier.padding(4.dp))

    // or replace it with a custom one
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(1.dp)
            .background(color = Color.Red)
    )

    Text("three", Modifier.padding(4.dp))
}

enter image description here

Vertical line

Row(
    // forces the row to be as tall as the tallest child,
    // use .fillMaxHeight() to fill the parent instead
    // https://developer.android.com/jetpack/compose/layout#intrinsic-measurements
    modifier = Modifier.height(IntrinsicSize.Min)
) {
    Text("one", Modifier.padding(4.dp))

    // use the material divider
    Divider(
        color = Color.Red,
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
    )

    Text("two", Modifier.padding(4.dp))

    // or replace it with a custom one
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
            .background(color = Color.Red)
    )

    Text("three", Modifier.padding(4.dp))
}

enter image description here

Valeriy Katkov
  • 33,616
  • 20
  • 100
  • 123