The concept of Jetpack Compose

Jetpack Compose is a modern toolkit for building native Android UIs. Jetpack Compose simplifies and speeds up UI development on Android with less code, powerful tools, and an intuitive Kotlin API. That’s how it’s described on the Android Developers website.

Why do we need a new UI tool

In Android, the history of the UI toolkit goes back at least a decade. Much has changed since then, such as the devices we use, users’ expectations, and developers’ expectations of the development tools and languages they use.

That’s just one of the reasons we need a new UI tool. The other big reason is that the view. Java class is so big and has so much code that you can’t even look at it on Githubs because it actually contains 30,000 lines of code, which is crazy. Almost every Android UI component we use needs to inherit from the View.

Anna-chiara of the GogleAndroid team says they regret some of the apis they’ve implemented because they can’t take them back, fix them or extend them without breaking functionality, so now is a good time to start fresh.

That’s why Jetpack Compose is a beacon for us.

3. Focus of Jetpack Compose

Including the following aspects:

  • To accelerate the development
  • Powerful UI tools
  • Intuitive Kotlin API

3.1 Accelerated Development

If you’re a junior developer and you want to spend more time writing business logic and less time on things like animations, color changes, etc., take a look at this View:



This Material Edit-text may seem simple, but there are a lot of things to focus on behind the scenes, such as animations, color changes, state management, and more.

Jetpack Compose provides a lot of Material components out of the box. If your APP is designed with Material, you can save yourself a lot of effort by using Jetpack Compose.

A UI toolkit is useless without the right tools, so learning from the experience of the last 10 years, the Jetpack Compose team started working with JetBrains to provide developers with a powerful toolkit, Large-scale support for Compose capability on Android Studio.

Take a look at the performance on Android Studio:

Above is a preview of the UI in Android Studio using Jetpack Compose. You can see that while you’re coding on the left, you can also see a real-time preview of the UI on the right, such as state changes in light/dark mode.

It is similar to text/Design in Android Studio, but it is more advanced and easy to use. This feature can only be used in Android Studio4.0 + preview, for Composing.



3.3 Intuitive Kotlin API

For developers, Jetpack Compose can be used for more than just the Android UI, so write them in Kotlin and open source them. Of course, all Android code is open source, but a particular emphasis is on the Compose code, which is updated here daily (Android.googlesource.com/platform/fr…). Therefore, you can view and use the code, as well as provide feedback here.

Because Compose is still under development, feedback from each developer is important.

4. API design

The Android team has had a lot of experience creating and reviewing apis for over a decade, but there is one catch – they use Java as the programming language. But there was one problem – they were using Java as the development language.



Jetpack Compose is the first major project using Kotlin under development, so the Android team is exploring the new world of Kotlin API guidelines to create a set of Compose API specific guidelines, which is still a work in progress and still has a long way to go.

Compose API principles

As I mentioned in my previous article, Compose is a declarative UI system that uses a group of functions to declare the UI. For example, one Compose function can nest another in a tree structure to construct the desired UI.

In Compose, we call this tree a UI graph, which is refreshed when the UI needs to be changed, such as if statements in the Compose function, and the Kotlin compiler needs to take note.

In Compose’s world, there is no concept of classes, they are all functions, and they are all top-level functions, so there are no inheritance and hierarchy issues.

@Composable 
fun checkbox ( ... )

@Composable
fun TextView ( ... )
 
@Composable 
fun Edittext ( ... ) 
 
@Composable 
fun Image ( ... )
Copy the code

In doing so, the Compose function always generates the same UI based on the input it receives, so there is no harm in dropping the class structure. Moving from class structure UI building to top level functions UI building is a big shift for developers and the Android team, and the top level functions are still under discussion and have not been released yet.

Jetpack Compose prefers composition over inheritance. Compose builds the UI based on other parts, but does not inherit behavior.

If you’ve been paying a lot of attention to Android or know anything about Android, you know that almost every component in Android inherits (directly or indirectly) from the View class. For example, if EidtText inherits from TextView, and TextView inherits from some other View, the inheritance mechanism will eventually point to the View, view.java. And View.java has a lot of functionality.



The Compose team moves the entire system from inheritance to top-level functions. Textview, EditText, check boxes, and all UI components are Compose functions in their own right, and they Compose other functions to create the UI instead of inheriting from another class.



5.4 Trust a single source

Trusting a single source is a very important feature for building the entire Jetpack Compose. If you’re used to existing UI toolkits, you probably know how performing clicks works. The following code looks like this:

@Override public boolean performClick(){ setChecked(! mChecked); final boolean handled = super.performClick(); . }Copy the code

First, it changes the state of the View and then performs the action, which causes a lot of bugs, such as the check box, because it first goes from selected to unselected and vice versa, and then for some reason the developer has to manually assign the previous state if the action fails.

In Compose, the opposite is true. Here, checkboxes and other functions take two parameters. One is to display the state in the UI, and the other is a lambda function to observe state changes that the UI should change accordingly.

@Composable 
fun Checkbox(checked : Boolean, 
						onCheckedChange : ((Boolean) -> Unit)),
						 ....)
Copy the code

Learn more about Compose



As you can see above, Compose is broken up into four parts at runtime. Let’s take a look at them all.

6.1 the Core

As the name suggests, this is the core of Compose, and you can skip it if you don’t want to dig deeper.

Basically, the core consists of four building blocks:

  • To Draw (Draw)
  • Layout (Layout)
  • Input (Input)
  • Semantics (Semantics)



    Draw — Draw gives you access to Canvas so you can Draw any custom View you want

    Layout – With Layout, we can measure things and place views accordingly.

    3. Input – Developers can access events by Input and perform gestures

    Semantics — We can provide semantic information about trees.

6.2 Foundation.

The core of Foundation is to take all of the above and work together to create an abstraction layer that developers can easily invoke.

6.3 the Material

In this layer, all Material components will be provided, and we can build complex UIs from these provided components.

This is one of the highlights of the excellent work done by the Compose team. All of the views provided here have Material support, so using Compose to build the APP in the Material style by default makes a lot less work for developers.

Slot API

The slot API was created to leave a lot of room for developers to perform whatever customization they needed, and the Android team tried to guess the many customization Settings a developer might think of, but they couldn’t always imagine what a developer might think, such as using a Drawable TextView.

As a result, the Compose team has set aside space for components so that developers can perform whatever actions they want, such as using buttons. You can keep text or text with ICONS or whatever you want, as follows:

end~