Android Jetpack Compose

Overview

Jetpack Compose, introduced by Google in 2021, is a Kotlin-based Android native UI toolkit. Unlike the traditional View classes that are part of the Android framework and tied to the operating system, Jetpack Compose is a separate Jetpack library. This means that updates and changes to the UI library can be made independently of the Android version. Instead of upgrading the entire Android OS, developers can simply upgrade the Jetpack Compose library to incorporate new features and improvements.

In traditional XML-based UI development, views are stateful and updated by navigating through the view hierarchy. However, with Jetpack Compose, UI is written in a stateless manner using Kotlin. This approach accelerates development and simplifies UI design by removing the need to traverse the view hierarchy.

Compose and Recompose

What is Compose?

Compose as the composable function (Kotlin Function with @Composable) a basic building block responsible for the user interface or design of the app.

Why is it called Compose?

Old Android UI system — Inheritance

Compose UI System — Compose & Recompose

Recompose

When there is a change in state, Jetpack Compose recreates the user interface. In the above image, the initial rendering of the UI is triggered by the composable function. After that, Jetpack Compose takes over and handles the process of updating the UI whenever there is a change in data. This process is known as Recomposition, where Jetpack Compose reads the updated data and re-renders the UI accordingly.

Key Benefits

Reduce line of Code:

By writing code in a single file within the app, it eliminates the need to navigate back and forth between multiple XML files during the review process. This approach eliminates the boilerplate code associated with finding views through methods like findViewById or ViewBinding references.

Declarative/Intuitive:

In Jetpack Compose, UI components are generated by invoking predefined functions based on the provided information or requirements. Unlike XML, where memory allocation for components is predefined during UI rendering, Jetpack Compose dynamically allocates memory based on the available data at the time of UI rendering. This dynamic approach allows for more flexibility in showing/hiding components and fulfilling other requirements, as the UI is generated based on the data present.

Compatible:

It is easily compatible with the existing views present in Android Composable functions become usable directly in XML layouts using an annotation so that you can migrate to Jetpack Compose incrementally. Most common libraries like Navigation, ViewModel and Kotlin coroutines work with Compose and allowing developers to adopt Jetpack Compose at their own pace.

Easy to maintain & accelerates development:

Android Studio provides a layout preview feature that allows developers to view and edit their code while simultaneously seeing the results on the screen. This significantly speeds up the process of reviewing and adjusting the user interface. Additionally, with Jetpack Compose, the entire codebase of the application can be managed and handled within a single file, making it easier to navigate, modify, and maintain the codebase.

Performance, build time and APK sizes:

Google claims that Compose saves time and it has better performance than the traditional view systems. To prove this, they tested with a few applications:

Tivi — has made a complete migration to Compose, and you can find more information about the migration at this link.
Sunflower (compose_recyclerview branch) — adds compose to replace the traditional RecyclerView.

Basic Functions

Composable Function:

It is represented in code by using @Composable annotation to the function name. This function will define app’s UI programmatically by describing its shape and data dependencies rather than focusing on the UI construction process.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Preview Function:

The name itself tells that it is used to generate the preview of the composable functions within IDE rather than installing APK in the device. The preview function is annotated by @Preview.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    AndroidTheme {
        Greeting(name = "World")
    }
}

Column Function:

Stack UI in vertical manner with no spacing between them. It is annotated with Column().

@Composable
fun Greeting() {
    Column {
        Text(text = "First Row")
        Text(text = "Second Row")
    }
}

Row Function:

Stack UI elements in a horizontal manner with no spacing between them. It is annotated with Row().

@Composable
fun Greeting() {
    Row {
        Text(text = "First Row")
        Text(text = "Second Row")
    }
}

Box:

It is used to positioned elements one over another. To draw the children which will overlap in the order that they are specified. It is annotated with Box().

@Composable
fun Greeting() {
    Box {
        Text(text = "First Row")
        Text(text = "Second Row")
    }
}

• Spacer: It is used to give spacing between two views. We can specify the height and width of the box. It is annotated with Spacer().
• Lazy List: This composable is equivalent to a recycler view in android’s view system. It is annotated with LazyColumn() & LazyRow().

Bhumika Mehta
LinkedIn