Jetpack Compose - a new world of possibilities for Android

What is Jetpack Compose?

Compose means to write or create a work of art. For developers, what this means is it allows us to compose UI easily, and if you open up the webpage for Jetpack Compose, you’ll see keywords like less code, intuitive, accelerated, and powerful. This is exactly how Jetpack Compose works. It allows you to add animation so easily, it’s really simple.

You might have the initial learning curve, but in the end, after one or two months, you’ll write applications a lot faster. Here are some of the keywords when it comes to Jetpack Compose: declarative UI, modern framework, smaller APK’s, Kotlin, open-source, unbundled from OS, intuitive, less code, and accelerated development.

What is the difference between declarative UI and imperative UI?

One of the main strengths of Jetpack compose is declarative UI. To understand declarative UI, you have to understand the difference between declarative UI and imperative UI. Imperative UI is currently what you’re using with XML. Imagine you want to create a list in imperative UI. Typically you have to create an activity, the correspondent XML, a fragment, a corresponding XML, a recycler view, the adapter, and the correspondent XML for the items:

If you want to create a list using imperative UI, you’ll at least need to create five files and more than 200 lines of code, between declarations and XML attributes. You spend quite some time creating something simple and have many consequences:

1. Time consuming
2. Error prone
3. Several files created
4. Increasing APK size
5. Coupled components
   With 30407 lines of code and several classes that extend it, it is:

• Difficult to scale
• Hard to maintain
• Every change might reflect on a lot of classes
• Bundled to the OS and OEM’s implementation of these components

The goal of compose is to solve the problems mentioned above by unbundling from platform releases. This makes it faster to implement new designs (views/components) and clarify state ownership and event handling.

For imperative UI then, it’s dependent on Java/Kotlin code, XML layouts, attrs, styles, and more, whereas for declarative UI, you have UI as a function and Kotlin code. To break it down, imperative UI is how it should happen, and declarative UI is what should happen.

What exactly is compose and how do I use it?

You can have compose on more than one platform, including iOS. If you look at the compose libraries, compose is composed with compilers and UI foundation material and animation. You can put the UI animation and material in a Compose UI toolkit, and have a compose compiler and runtime at the bottom.

First off, compose.compiler transforms @composable functions and enables optimizations. It doesn’t need to use an annotation processor, meaning that this is really fast and doesn’t impact build time.

The runtime is built on top of the compiler, and in its essence, it’s a tree management solution. It doesn’t know what Android or UI are, so it’s platform agnostic.

Here are the compose UI toolkit:

• Compose.UI: Handles input management, drawing, layouts, etc.
• Compose.foundation: Contains basic building - rows, column, text, image, etc.
• Compose.materal: Material design system to use on your view components
• Compose.animation: Animations to use easily and outside of the box.