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*******************
.png)