Jetpack Compose Ep:5 — Divider App

A brief introduction about divider and its attributes by molding it as per our use.

Jetpack Compose — Divider App

To learn the know or learn about the previous episode, than visit to the below link. Source code of this project is available in the article itself.

Jetpack Compose Ep:4 — Icon & Icon Toggle Button App

Note: In this project, I’m using Android Studio 4.1 Canary 10 with a gradle plugin of classpath “com.android.tools.build:gradle:4.1.0-alpha10”. It may change accordingly with the time, so please do check the current version to avoid version related issues.

What is a Divider?

A divider is a thin line that segregates the contents or groups them in lists and layouts as per our use.

Composable Layout

Start by creating an interface file named as ComposableLayout.kt and declare a function for divider inside it. The code looks like:

interface ComposableLayout {

    @Composable
    fun DividerBuild(
        mModifier: Modifier? = null,
        mColor: Color? = null,
        mThickness: Dp? = null,
        mStartIndent: Dp? = null
    )
}

Note: In Jetpack Compose, whenever we call a function which either it belongs to the same class, file or any other, it has to be annotated as Composable.

As the code mentioned above, each parameter checks for a value and if it is not been provided anything than it gets set as null by default.

1. mModifier — It is used to apply padding to the component itself by means all four corners individually.
2. mColor — It helps to provide color to the divider.
3. mThickness — Its is used to thicken the divider. By default size of thickness is 1 dp.
4. mStartIndent — It is used to provide offset at the start of the line. By default, it provides no offset.

Next, create an object class named as ComposableComponent.kt and then implement the interface to it. Define all the functions of interface into this class by overriding it. Call the divider component inside it and pass all the values to it as shown below:

object ComposableComponent : ComposableLayout {

    @Composable
    override fun DividerBuild(
        mModifier: Modifier?,
        mColor: Color?,
        mThickness: Dp?,
        mStartIndent: Dp?
    ) {
        Divider(
            modifier = mModifier ?: Modifier.padding(0.dp),
            color = mColor ?: Color.Black,
            thickness = mThickness ?: 1.dp,
            startIndent = mStartIndent ?: 0.dp
        )
    }
}

Now, let’s move to the MainActivity.kt file and create a some custom functions to identify its features individually.

Divider

First, create a normal DividerComponent() function holding a padding modifier in it. As discussed earlier, that if the divider doesn’t specify any specific value for its size or color then it get sets to its by default value and that is 1 dp of size and black in color.

@Composable
fun DividerComponent() {
    ComposableComponent.DividerBuild(
            mModifier = Modifier.padding(16.dp)
    )
}

Divider

Colored Divider

Create a ColoredDividerComponent() function holding a color parameter to change the color of it as shown below:

@Composable
fun ColoredDividerComponent() {
    ComposableComponent.DividerBuild(
            mColor = Color.Red
    )
}

Colored Divider

Thickness Divider

Create a ThicknessDividerComponent() function holding a thickness parameter to modify the thickness of the divider as shown below:

@Composable
fun ThicknessDividerComponent() {
    ComposableComponent.DividerBuild(
            mThickness = 4.dp
    )
}

Thickness Divider

Start Indent Divider

Create a StartIndentDividerComponent() function holding a start intent parameter to modify its offset as shown below:

@Composable
fun StartIndentDividerComponent() {
    ComposableComponent.DividerBuild(
            mStartIndent = 16.dp
    )
}

Start Indent Divider

All In One Divider

Lastly, create a AllInOneDividerComponent() function by passing all the parameters to modify it as shown below:

@Composable
fun AllInOneDividerComponent() {
    ComposableComponent.DividerBuild(
            mModifier = Modifier.padding(16.dp),
            mColor = Color.Blue,
            mThickness = 2.dp,
            mStartIndent = 8.dp
    )
}

All In One Divider

And finally, calling all the functions into the onCreate() method as shown below:

AppTheme {
    Column(
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalGravity = Alignment.CenterHorizontally,
            modifier = Modifier.fillMaxSize()
    ) {
        DividerComponent()
        ColoredDividerComponent()
        ThicknessDividerComponent()
        StartIndentDividerComponent()
        AllInOneDividerComponent()
    }
}

Finally, run the app.

Divider App

For the source code, visit to my Github account given below:

Akshay-Sawant/Compose-Studio

If there is any issue, do let me know in the comment section. Happy coding!