Divider in Jetpack Compose

Sandeep Gupta
by Sandeep Gupta -
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 - 

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


Another Animated background and divider

MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposableSkillTheme {
               /* Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }*/
                AnimatedBackgroundDividerDemo()
            }
        }
    }
}

AnimatedBackgroundDividerDemo

package com.codingbihar.composableskill

import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp


@Composable
fun AnimatedBackgroundDividerDemo() {
    Box(modifier = Modifier.fillMaxSize()) {
        // Animated Background
        AnimatedBackground()

        // Content with dividers
        DividerDemo()
    }
}

@Composable
fun AnimatedBackground() {
    val infiniteTransition = rememberInfiniteTransition()
    val offsetX by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1000f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 6000, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )

    Canvas(modifier = Modifier.fillMaxSize()) {
        val colors = listOf(
            Color(0xFF84FFFF),  // Soft cyan
            Color(0xFFFF5722),  // Bright cyan
            Color(0xFFFFC107)   // Blue
        )

        // Animated gradient background
        drawRoundRect(
            brush = Brush.linearGradient(
                colors = colors,
                start = Offset(x = offsetX, y = 0f),
                end = Offset(x = offsetX + size.width, y = size.height)
            ),
            topLeft = Offset.Zero,
            size = size,
            cornerRadius = CornerRadius(30f, 30f)
        )
    }
}

@Composable
fun DividerDemo() {
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        // Vertical List with Horizontal Dividers
        Column(modifier = Modifier.fillMaxWidth()) {
            Text("Item 1", Modifier.padding(8.dp))
            HorizontalDivider(color = Color.Gray, thickness = 1.dp)
            Text("Item 2", Modifier.padding(8.dp))
            HorizontalDivider(color = Color.Gray, thickness = 1.dp)
            Text("Item 3", Modifier.padding(8.dp))
        }

        Spacer(modifier = Modifier.height(24.dp))

        // Row with Vertical Dividers
        Row(modifier = Modifier.fillMaxWidth()) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .padding(8.dp),
                contentAlignment = Alignment.Center
            ) {
                Text("Column 1")
            }
            VerticalDivider(
                color = Color.Gray,
                modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )
            Box(
                modifier = Modifier
                    .weight(1f)
                    .padding(8.dp),
                contentAlignment = Alignment.Center
            ) {
                Text("Column 2")
            }
            VerticalDivider(
                color = Color.Gray,
                modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )
            Box(
                modifier = Modifier
                    .weight(1f)
                    .padding(8.dp),
                contentAlignment = Alignment.Center
            ) {
                Text("Column 3")
            }
        }
    }
}

OUTPUT:

Divider in Jetpack Compose Output
Topicss
Previous Post Next Post

Contact Form