Part I : Developing UI in Android

The user interface (UI) is the embodiment of the mobile app. You could say that it is an ever-evolving relationship between users and the systems they interact with. When you look at the big picture, it’s easy to see why user interface design is so important: It’s the reason products fail or succeed. In this article, I will learn about the design concepts of the existing Android UI toolkit.

Android UI Toolkit

The architecture of the UI kit in Android is currently as above. And we use Activity, Fragment to set the content of the view. Here is an example of xml layouts after being initialized

Let’s say the screen has an Activity and a Fragment inside it. To create that screen, the following files are needed: MyActivity.kt, my_activity.xml, MyFragment.kt, my_fragment.xml, attrs.xml and styles.xml. For such a simple display, you have to write too much code. As such, the current Android UI toolkit performs very poorly. Applications often have dozens, if not hundreds, of each with XML layouts, attrs, styles, Kotlin or Java code. Sorting the list of those files in the resource was not a simple matter.

Introducing Jetpack Compose

Jetpack Compose is a modern toolkit for building Android user interfaces. Jetpack Compose simplifies and accelerates UI development on Android, and is easy to maintain. Below is the module when we use layout xml. As the ViewModel and layout grow, they become very difficult to maintain. Using the xml file separates the relationship between the UI and the logic file.

It can be seen that the language difference can separate logic and UI (xml vs Kotlin). With Jetpack Compose that separation goes away.

 

We can easily read, understand and maintain the code with this architecture

Declarative thinking

You have read about the design of the native Android UI toolkit above. Whichever architecture you use, you’ll find yourself writing code that describes how your user interface changes over time. In Jetpack Compose, you will change the way you think about the user interface in a declarative way. Declarative programming is a programming paradigm in which you focus not on describing how a program will work, but on what the program will achieve. For example, will show a hidden Button, instead of hiding a Button. That is, with XML layout you usually declare a button, and in the Activity you will check to hide or show it. With Jetpack Compose, you can add 1 more button if needed.

Jetpack Compose’s tech stack

Conclude

Jetpack Compose is the future Android developers need to quickly and intuitively build UIs for their apps. Not only that, it also eliminates the difficulty of architecting an Android application.