This is a quick start for participating in the 7-day clock-in campaign. Due to the tight time and heavy tasks, it is difficult to carry out detailed topic selection and knowledge system construction, so I choose a special new technology point (alpha release), so that we can learn quickly together and get familiar with the future development direction of Android in advance.

Compose: What is Compose

Compose is a new approach to UI development that replaces the XML approach to constructing View hierarchies. Let’s start with a code comparison for Hello World:

Did you come up with any ideas? My first thought is that the Compose implementation is closer to Swift UI or Flutter, and the XML implementation is closer to HTML. Maybe you can see some trends here. Here are two questions for you to think about.

  • Question 1: Is XML the only way to build a layout?
  • Question 2: Do you feel that XML is not enough in your work?

In the past, Android development has mostly used XML for layout, with only occasional dynamic changes in the code, mainly because the XML layout hierarchy is clear and can be previewed. The XML approach is not perfect either. When the layout needs to be adjusted dynamically based on the data, the fixed XML file itself can be a hindrance, and developers often solve this problem by hiding part of the View in advance or providing multiple XML files to choose from on demand.

XML is not the only way to build a View. There have been attempts to create View objects in Java without XML for seven or eight years, But adding a View to Your Java/Kotlin code requires creating a View and LayoutParams object and setting it up in a long way, and the whole process can’t be previewed, making it hard to read and maintain.

With the popularity of MVVM mode, the sense of fragmentation of View layer formed by XML + Activity/Fragment gradually surfaced. Activity/Fragment is the View layer. XML is a static file that describes the layout mode in the View layer. It is essentially an auxiliary tool.

Compose is a similar tool that can build a layout in an Activity/Fragment in a clear, code-clean way that is “previewable.”

Compose programming idea

There are a few things you need to know about Compose before you can formally learn how to use it:

  • Kotlin grammar
  • Functional programming ideas

Going back to the example in the previous section, we used a Text component to declare a Text View. In terms of code format, this is declarative. This is highly consistent with Swift UI, and can really be considered a new syntax to get started with. However, the Activity is still a.kt file, and is compiled as Kotlin source code. This declaration is essentially Kotlin code, and Text is a function that doesn’t have a normal function name:

Functional programming is mentioned here mainly because the Compose component function in principle requires one functional property: no side effects.

In computer science, a function side effect is an additional effect on the calling function that occurs when a function is called in addition to returning the value of the function. Such as modifying global variables (variables outside functions), modifying parameters, or changing external storage. (From Wikipedia)

The Compose component is defined in the code and looks like any other function. The Compose component function is used to describe the View. Each View redraw requires a call to the Compose component function from the top down. The result generated in the Compose component function is unpredictable; If the side effects take a long time, it will directly cause the App page to stall.

Compose complex page effect display

Use the official Demo here to get a feel for what Compose’s code looks like when it builds a complex page.

PS: after work, I can start to write, prepare the article, run the project and do the pictures, and accidentally it will be eleven o ‘clock. This series of articles is intended to learn together, there may be inaccurate or even incorrect places, any questions are welcome to discuss together.