Divider in Jetpack Compose

Divider is a useful component of Material Design used to separate elements by drawing a straight vertical or horizontal line. In Android App it is mostly used to divide the elements of Menus or Lists but can use it other places according to our needs in our apps.

We have two other APIs to create a straight line in Jetpack Compose 

1. Box

2. Spacer

In this tutorial we will learn to create a divider using Jetpack Compose. We will discus about Box and Spacer in our another tutorial.

Some parameters used in Divider

thickness -

modifier -

thickness -

color -

width -

height - 

padding - 

Also Read Learn how to create app 

What is Dividers?

Dividers are thin lines that separate items in lists or other containers. There are two types of dividers:

1. Horizontal Divider

2. Vertical Divider

For this tutorial we are using Android Studio Koala. Lets create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.

MainActivity

Copy this code →

package com.example.codingbihar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodingBiharTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                   DividerSample()
                }
            }
        }
    }
}

Create a separate file for Divider and named it as DividerSample

DividerSample

Copy this code →

package com.example.codingbihar

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Divider
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun DividerSample() {
   Column {
       HorizontalDivider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Black,
           thickness = 2.dp
       )
       HorizontalDivider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Green,
           thickness = 2.dp
       )
       HorizontalDivider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Red,
           thickness = 2.dp
       )
       HorizontalDivider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Yellow,
           thickness = 2.dp
       )
       HorizontalDivider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Cyan,
           thickness = 2.dp
       )
       HorizontalDivider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Magenta,
           thickness = 2.dp
       )
       HorizontalDivider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Blue,
           thickness = 2.dp
       )

       Row {
           VerticalDivider(
               modifier = Modifier
                   .padding(16.dp)
                   .width(2.dp)
                   .fillMaxHeight(),
               color = Color.Black
           )
           VerticalDivider(
               modifier = Modifier
                   .padding(16.dp)
                   .width(2.dp)
                   .fillMaxHeight(),
               color = Color.Red
           )
           VerticalDivider(
               modifier = Modifier
                   .padding(16.dp)
                   .width(2.dp)
                   .fillMaxHeight(),
               color = Color.Green
           )
           VerticalDivider(
               modifier = Modifier
                   .padding(16.dp)
                   .width(2.dp)
                   .fillMaxHeight(),
               color = Color.Blue
           )
           VerticalDivider(
               modifier = Modifier
                   .padding(16.dp)
                   .width(2.dp)
                   .fillMaxHeight(),
               color = Color.Magenta
           )
           VerticalDivider(
               modifier = Modifier
                   .padding(16.dp)
                   .width(2.dp)
                   .fillMaxHeight(),
               color = Color.Yellow
           )
           VerticalDivider(
               modifier = Modifier
                   .padding(16.dp)
                   .width(2.dp)
                   .fillMaxHeight(),
               color = Color.Cyan
           )
       }
   }

OUTPUT : -

*****************End*******************