Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Divider in Jetpack Compose

Divider in Jetpack Compose - Coding Bihar
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 - 


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 {
       Divider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Black,
           thickness = 2.dp
       )
       Divider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Green,
           thickness = 2.dp
       )
       Divider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Red,
           thickness = 2.dp
       )
       Divider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Yellow,
           thickness = 2.dp
       )
       Divider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Cyan,
           thickness = 2.dp
       )
       Divider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Magenta,
           thickness = 2.dp
       )
       Divider(
           modifier = Modifier
               .padding(16.dp)
               .fillMaxWidth(),
           color = Color.Blue,
           thickness = 2.dp
       )

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

OUTPUT : -


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

 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!