Jetpack Compose is Here to Revolutionise How You Code for Android UI

What is Jetpack Compose?

Jetpack compose is a Modern toolkit for building native Android UI and that’s great because it basically changes the way we write the code for Android UI. What’s really radical about that is it allows you to write layout directly in code. So you can write kotlin code for your UI layout and that’s basically it. You don’t need any XML layout files anymore. It’s just one source of truth and that’s your kotlin code.
So what’s cool about Jetpack Compose?  well..!!! It’s cool that it basically simplifies and accelerates the way we write Android UI. 

Why should you use Compose?

It’s really important to understand why we are using it. Because Compose is part of Jetpack. First of all, Jetpack compose brings that we have one language for everything including the UI which is kotlin. The logic is from activity, fragment, the ViewModel, repository, etc, and then the UI which is no longer an Android view that is custom too. This basically means that we will get rid of all of these XML files so Android code will not have any other language/script. Jetpack compose proposes a shift in paradigm and so proposes a declarative approach.

Imperative approach

Declarative approach

Another very important point is that it fixes what’s broken in the old Android API. So you know we are dealing with buggy Android Views or difficult to work with like Picker, Spinner, EditText, etc. In most cases, they work fine but there are some edge cases that really give us a headache and have a lot of issues with them.
Now what’s interesting about Android compose is that it basically tells us that the whole Android UI has been rebuilt from scratch. That’s great because we get a modern layout, a modern way of reconstructing and building an actual UI and this will be a benefit for we developers because we need a modern way of interacting between actual code and the layout.

Why is it called Compose?

Compose is based on a composition pattern. Where the views are composable functions. Let’s see what this actually means before going into actual composing. We need to understand our old Android system or we can say traditional ways to create UI. so the Android system actually has the UI built on the concept of inheritance as you can see below.

Where the compose UI system uses a Composition design pattern. This basically means that we no longer have inheritance between our composable. Composable can be considered as a view of the relationship between child and parent the way we saw it in inheritance. 

Basics of Jetpack compose
To understand Jetpack compose we need to understand composable function. So composable functions are basically the fundamental building blocks for building any kind of UI so we can think to compose function like some UI, elements, or some widget. For example in flutter or in react native we referred to basically any UI component as a widget but here in Android we referred to them as composable.
So there are some kinds of objects, some functions, and some annotations like composable and UI is built using them. Have look on code spinnet and its output below where Inside GreetingsText composable we can pass another composable and it’s Textview composable in this case.

Let’s understand @Composable annotation can be applied to a function or lambda to indicate that the function/lambda can be used as part of a composition to describe a transformation from application data into a tree or hierarchy. To be more precise this transformation actually means transforming them from application data which is the method above eg GreetingText into UI once the application runs. So the process that happens behind the scene is when Jetpack compose compiles everything which is annotated as @Composable is something that has to be displayed as UI.

As developers, we need to check the logic/changes we have applied in the code so for this Jetpack Compose provides Preview with Run icon to be sure and precise. Jetpack compose preview is a bit different; it can also be interactive. So in order to achieve the same, you need to follow the below steps:
1. Create a preview composable function if it’s not already created using @Preview annotation.
2. Pass composable function you created in a setContent() method
3. Lastly, in order to preview changes you need to pass the same function to preview composable as well

So to develop these different composable functions we need to understand how we can actually modify this stuff in Compose. we have component, parameter to every composable called modifier with attributes associated with particular composable. e.g. For the text component, we have the following attribute which we can see in traditional layouts as well.

Compose has three out of the box composables, where we want multiple composables children As Column, Row and Box and content management can be seen below for each of them as below

Fundamentals of Jetpack Compose
1. Declarative paradigm shift
  – This is the same approach we went through earlier along with the Imperative approach.

2. Dynamic content
  – Jetpack Composable basically can contain or be based on Dynamic content, So it means whatever composable we have can have different outputs in a sense that can draw differently on screen if the input parameters have changed.
Let’s Understand this with an example of @ColoredSquare Composable. Which takes input color and draw it in the shape of Surface Composable

Have a look here to understand dynamic content with better examples.

3. Recomposition
It’s a very important principle of composable as it allows the whole UI to be rebuilt and the states to be changed. In the imperative approach, we had methods that invoke some widgets and views that there has been changing in their values e.g notifyDataSetChanged() in the case of Recyclerview but in Jetpack compose we have Recomposition instead.

So here We’ve cleared and understood some of the basics and fundamentals for Jetpack compose, In the next update, I’m going to focus on some of the more detailed implementation details of Compose and its usage.

Until then keep learning, Keep Sharing !!!😀😀

Summary

As you have seen in this article, with Jetpack Compose, you can directly create your layouts with Kotlin code, greatly accelerating your Android UI project. However, there’s much more to this modern UI toolkit than meets the eye. We’ll get to those in our upcoming blogs. Stay tuned!