A Deep Dive Into Jetpack Compose
Designing a Kotlin-first UI Kit
Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. — Android Developers
This article is not about how to use Jetpack Compose or its basics. It’s about some of the insights of how and why it is being developed.
If you want to know the basics and how to use Jetpack Compose, read my latest article on how to use the developer preview of Jetpack Compose.
What Is the Need for a New UI Kit?
In Android, the UI toolkit goes way back in history, at least 10 years. Since then, things have changed a lot like the devices we use, expectations from users, and the expectations of the developers of the tools and languages they’re using.
Above is one of the reasons for the new UI toolkit, The other important reason is that the
View.java class has so much code. Every component in the Android UI is extended from this class.
The file is very large so that you can’t see the file on GitHub because it contains literally 30,000 lines of code and that’s insane, right!
Anna-Chiara from the Android team said that they have implemented some API regrets along the way which they can’t take back and fix or evolve the APIs without breaking the functionality, so it is a good time for a fresh start.
That’s how Jetpack Compose came to light.
Jetpack Compose Primary Focus
- Accelerate development
- Powerful tools
- Intuitive Kotlin API
1. Accelerate development
As you start development, you’ll always like to have more time to write business logic rather than spend time on certain things like animations, color changes, and so on. Have a look at the following view:
This material edit-text seems to be simple but under the hood, there will be many things that need to be taken care of like animations, color changes, state management, and so on.
Whereas Jetpack Compose provides all material things out of the box without any work. This makes the apps developed with Compose material-designed apps with less effort.
2. Powerful tools
A UI toolkit without the right tools is useless, so learning from the decade of experience, the Jetpack Compose team started working with JetBrains to provide powerful tools that support developers at scale in Android Studio with Compose functionalities.
Have a look:
The above picture is what the Compose feature looks like in Android Studio while developing UI. You can see the output design on the right side while you’re writing code on the left, like state changes for the views either in light/dark mode.
It’s similar to text/design in the present Android Studio but way more advanced and easy to use. This feature is only available in the Canary version and specifically developed for Compose.
3. Intuitive Kotlin API
Jetpack Compose is more for developers than for Android UI. So, the Android team is developing the code in open source with Kotlin.
As Compose is still in development, every developer’s feedback counts.
The Android team has vast experience creating APIs and reviewing them over a decade from now but there is a catch — they’re using Java as programming language.
Jetpack Compose is the first large project that is being developed in Kotlin, so the Android team is exploring the new world of Kotlin API guidelines to create a set of Compose API-specific guidelines and this is still work in progress, a long way to go.
Principles of Compose API
Everything is a function
As I mentioned in my previous article, Compose is a declarative UI system where we design the UI with a set of functions, where one function calls the other and builds the UI required in a tree structure.
In Compose, this tree is called a UI graph which is another function. This UI graph is refreshed every time when there is a change in the UI required, like if you have
if statements in the function and the Kotlin compiler will take care of this.
In Compose, there will be no classes, only functions, and every function is a top-level function so there won’t be any inheritance or hierarchy problems in Compose.
With this process, a composable function always generates the same UI based on the inputs it receives, so there will be no cheating as we give up the class structure.
Moving from class structure to this function-level UI build is a huge shift both for developers and the Android team. This top-level functionality is in discussion right now, it might or might not make it to release.
Composition over inheritance
Jetpack Compose prefers composition over inheritance. Compose builds UIs based on other pieces but doesn’t inherit the behavior.
If you observe in Android, every UI component is inherited from the
View class. Like
EditText is inherited from
Textview and the
Textview is inherited from some other view and the hierarchy goes to the root level
View.class and this class has a lot of features.
Whereas the Compose team shifted the whole system from inheritance to top-level functions.
EditText, checkboxes, and all UI components are their own functions and they compose other functions to create instead of inheriting from another class.
Single source of truth
Single source of truth is a very important feature on which the entire Jetpack Compose is built. If you’re used to existing UI toolkits then you might know how the
First, it changes the state of the view and then performs the action. This caused many bugs with views like checkboxes because, first, it changes from checked to unchecked or vice-versa, and then, for some reason, if the operation failed, developers have to assign the previous state manually.
In Compose, the functionality is opposite. Here, functions like checkboxes have two parameters. One is to show the state in the UI and the other is the lambda function to observe the change in the state where the UI should change accordingly.
This is so that views like checkboxes don’t hold to any state. This allows the developers to properly handle the state changes of the views.
A Close Look at Compose
There are four divisions in Compose at run-time as shown in the above image. Let’s see them one-by-one.
This is the core of Compose as the name implies, you can skip it if you don’t want to learn in-depth.
Basically, the core contains four building blocks:
- Draw — Draw gives you access to the canvas so you can do all of your custom drawing.
- Layout — Through layout, we can measure the things and place the views accordingly.
- Input — Developers can access events through input and perform gestures.
- Semantics — We can provide semantic information about the tree.
The core of the foundation is to gather all the things mentioned above and collectively create an abstract layer to make it easy for developers.
In this layer, all of the material components will be available so that we can use the existing components while building a complicated view.
This is the most wonderful part where the Compose team did an amazing job, all views that are available here are materially supported so the apps that are built using Compose will be materialistic by default with the least amount of work from the developer’s side.
Slot APIs came into existence to give space to the developers so that they can do whatever customization they want. The Android team tried to guess many customizations that developers might think of, but they can’t imagine the developer’s thoughts all the time, like with the textview drawable.
So, the Compose team gives space to the component so that developers can do whatever they want, like with the button; you can keep text or text with an image or anything you want, as shown below
Jetpack Compose — A New and Simple Way to Create Material-UI in Android
Learn how to create UI without any XML files
Use Android Studio with Jetpack Compose | Android Developers
Jetpack Compose is a modern toolkit for building native Android UI. It's based on the declarative programming model, so…
You can also see the day-to-day progress of the Compose team through the following link
ui - platform/frameworks/support - Git at Google
Jetpack Compose is a suite of libraries within the AndroidX ecosystem. For more information, see our project page…
Thank you for reading.