Jetpack Compose: Build Better Apps Faster

So it’s been around months since the launch of Jetpack Compose, there was a lot of curiosity among devs regarding the features, why not XML, what really? only kotlin!!

The fanciest thing about compose has been the ‘Lazy Column’, the android developers who have to write separate adapters for recyclerview are really happy with the ease of UI development that comes with it.

As the name suggests “compose”, it is built in such a way that you can build up your UI in small, reusable building blocks rather than at the Fragment or Activity level. That composability increases code reuse and clarity.

What if we started to define the layout, logic, and structure of our UI in the same language? What if we chose Kotlin?

Enough of wondering let's dive straight into Compose 😤

What is Jetpack Compose?

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs providing the super features of reusability

So we are going to build a simple app that helps us implement maximum stuff in minimum time.

Getting Started

Step 1:

Create a new Compose project in Android studio Beta or Canary version. Select New Project like shown below or Go to File => New => NewProject.

Step 2:

Choose Empty Compose Activity from the templates.

Step 3:

Click Next and configure the project with the usual steps. The Empty Compose Activity Template will automatically add readily configured Compose code to the project.

Step 4:

Configure or Check Kotlin version:
Compose Compiler requires Kotlin version 1.4. 32 or a newer, We need to check kotlin version used in the project.

Project Level build.gradle:

buildscript {
    ext {
    compose_version = '1.0.1'
}
    dependencies {
   classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.21"
    }
}

Step 5:

Check if the following configs are there in module level Build.gradle

kotlinOptions {
    jvmTarget = '1.8'
    useIR = true
}
buildFeatures {
    compose true
}
composeOptions {
    kotlinCompilerExtensionVersion compose_version
    kotlinCompilerVersion '1.5.21'
}

Quick Start Basics:

To define functions now we simply write functions in kotlin and we annotate these functions with `@Composable`, We try to separate our UI into single components that make it very reusable

To enable a preview of this composable, we need to annotate it with@Preview, @Preview accepts parameters to customize the way Android Studio will render it. You can add these parameters manually in your code, or click on the gutter icon next to @Preview to display the configuration picker, to let you select and change those configuration parameters.

What are modifiers?

All UI emitting composables can have a Modifier parameter. Modifiers allow us to change how a composable is presented, they let us:

• Change the composables behaviour and appearance
• Add information like accessibility labels
• Process user input
• Add high-level interactions like making an element clickable, scrollable, draggable or zoomable.

We would be using modifiers to elaborate the compose layouts clearly through this tutorial. So it would be a great way to understand the usage of modifiers.

Layout Modifiers

• Modifier.width(): You can use this to set the width of a Composable.
• Modifier.height(): You can use this to set the height of a Composable.
• Modifier.size(): You can use this to set the width and height of a Composable.
• Modifier.fillMaxHeight(): This will set the height of the Composable to the maximum available height. This is similar to MATCH_PARENT from the classic View system.
• Modifier.fillMaxWidth(): This will set the width of the Composable to the maximum available width. This is similar to MATCH_PARENT from the classic View system.
• Modifier.fillMaxSize(): This will set the height/width of the Composable to the maximum available height/width. It accepts one parameter “fraction”- The fraction of the maximum size to use, between 0 and 1, inclusive. by default fraction 1.0f, so the composable will take full width and height. But If the fraction is 0.5f. then the composable will take half of the width and height.
• Modifier.padding(): You can use this to set padding to Composables that take a modifier as an argument.

Jetpack Compose Layouts:

Row: A Row will show each child next to the previous children. It’s similar to a LinearLayout with a horizontal orientation.

@Preview(showBackground = true)
@Composable
fun RowExample() {
    Row( modifier= Modifier
        .fillMaxSize()
        .background(Color.Yellow),
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment = Alignment.CenterVertically) 
    {
        Text("Row Text 1  ",color = Color.Red)
        Text("Row Text 2  ",color = Color.Red)
        Text("Row Text 3  ",color = Color.Red)
    }
}

Column: A Column will show each child below the previous children. It’s similar to a LinearLayout with vertical orientation.

@Preview(showBackground = true)
@Composable
fun ColumnExample() {
    Column(
        modifier= Modifier
            .fillMaxSize()
            .background(Color.Yellow), 
        horizontalAlignment = Alignment.CenterHorizontally, 
        verticalArrangement = Arrangement.Top) 
    {
        Text("Column Text 1",color = Color.Red)
        Text("Column Text 2",color = Color.Red)
        Text("Column Text 3",color = Color.Red)
    }
}

Outputs of Row and Column respectively

Box: The children of the Box layout will be stacked over each other. You can use the gravity modifier to specify where the composable should be drawn.

@Preview(showBackground = true)
@Composable
fun BoxExample2() {
    Box(
        modifier = Modifier
            .background(color = Color.White)
            .fillMaxSize()
    ) {

        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Black)
                .padding(5.dp)
                .align(Alignment.TopStart),
            text = "Top Start"
        )

        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Black)
                .padding(5.dp)
                .align(Alignment.Center),
            text = "Center"
        )
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Black)
                .padding(5.dp)
                .align(Alignment.BottomEnd),
            text = "BottomEnd"
        )
    }
}

Box containing text

Constraint Layout: ConstraintLayout can help place composables relative to others on the screen, and is an alternative to using multiple nested Row, Column, Box and custom layout elements.

• References are created using createRefs() or createRefFor()
• Constraints are provided using the constrainAs() modifier
• Constraints are specified using linkTo()

@Preview(showBackground = true)
@Composable
fun ConstraintLayoutDemo() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (redBox, blueBox, yellowBox) = createRefs()

        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Red)
            .constrainAs(redBox) {})

        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Blue)
            .constrainAs(blueBox) {
                top.linkTo(redBox.bottom)
                start.linkTo(redBox.end)
            })

        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Yellow)
            .constrainAs(yellowBox) {
                top.linkTo(blueBox.bottom)
                start.linkTo(blueBox.end)
            })
    }
}

Constraint Layout

To summarize

The Jetpack Compose has brought declarative UI framework to the native Android platform with the use of Kotlin language which is one of the best things for Android. It provides possibilities for building complex layouts for Android applications using modifiers, alignments, arrangements, and layouts. It is concise idiomatic and compatible with existing views. With reusability as a feature, it is going to make android dev much more smooth, concise, and consistent.

Congratulations!! 🎊You’ve just learned to build UI layout components in jetpack compose which are the basic building blocks for designing complex apps with interesting Designs.

What Next…

This is just the beginning of this series, in the further parts we would be learning more concepts of compose and building some real-world UI using jetpack Compose! So stay tuned and by the time keep composing🚀