Jetpack Compose Masterclass — A Simple Introduction Part 1

Photo by Balázs Kétyi on Unsplash

Jetpack Compose Basics

Jetpack Compose is the toolkit written in Kotlin to produce a beautiful native UI for Android. Android documentation introduces Jetpack Compose as a “declarative UI framework”.

In this blog, we will look at the foundations of Jetpack Compose. Compare it with XML and understand its use cases.

Why do we need Jetpack Compose?

• Jetpack Compose introduces the idea of declarative programming.
• Instead of updating the UI manually, we regenerate the whole UI from the bottom up.

How has XML made UI’s in the past?

• Android view used to be a tree-like structure.
• As the user interacted with the UI, the parts of the tree need to be updated.
• To enable this, we would walk to each node and update the node manually.
• We use calling methods like findViewById() and update the nodes.

So how does Jetpack Compose change the concept of UI?

• If we update everything manually, it leads to inconsistent UI.
• Therefore, Jetpack Compose was introduced.
• Instead of walking through each node of the UI and updating it manually.
• We used a declarative approach of re-rendering the UI on change.

But, isn’t it too expensive to re-render the whole UI?

• Yes, that’s why Jetpack Compose introduces the idea of Smart recomposition.
• It only recomposes the parts of the UI that are changed.
• Rest remain the same.

These were the basics of Jetpack Compose. Let’s write a basic Jetpack Compose function.

@Composable
fun Name(){
   Text("Hi, My name is Hitesh")
}

Everything inside of Jetpack Compose is a function. So, to create UI functions we add a @Composable annotation on top of functions. To tell the Compiler that it is a composable function.

(Short cut — Write comp to make a composable function)

As you can see in this simple function, we use @Composable annotation to convey that it is a UI function, not a normal function. Inside of the “Name” function, we have created another function called “Text(”Hi, My name is Hitesh”)“. It is used to make simple text on the UI of the app.

Let’s try one more example:

@Composable
fun Name(Name:String){
   Text("Hi, My name is ${Name}")
}

As you can see we have introduced “Name” in the constructor. The string value of the name flows from the constructor to the Text value.

Can we change the Name inside of the Composable?

@Composable
fun Name(Name:String){
   Name = "Rahul"
   Text("Hi, My name is ${Name}")
}

The compiler will give you an error that the Name is of type immutable. It can not be reassigned.

Concept of Smart Recomposition:

We have already discussed that composable functions re-render the UI on changes. The phenomenon of re-rendering is called Recomposition. We have also discussed that recomposing the whole UI maybe costly in nature. Therefore, smart Recomposition is needed.

So, how does smart Recomposition solve the Rendering performance issue?

According to smart recomposition, if a change occurs on the screen then UI will only update that particular part of the screen. Let me give you an example:

@Composable
fun Name(){
   Text("Hi, My name is Hitesh")
    Text("Hi, My name is Hitesh")
     Text("Hi, My name is Hitesh") -------> Change occurs in this part
      Text("Hi, My name is Hitesh")
       Text("Hi, My name is Hitesh")
        Text("Hi, My name is Hitesh")
         Text("Hi, My name is Hitesh")
}

Suppose that the 3rd Text changes in the column of texts. Then the Jetpack Compose will only recompose that one particular text and others remain the same. Therefore, recomposition does not affect the unchanged composables. Hence, the performance is not impacted.

This is it for today. I hope you enjoyed this simple explanation of Jetpack Compose. In the next blog, we will explore more about the recomposition, side-effects etc.

Thanks for reading. If I have written something wrong please forgive me.