I’m Liang ‘en Liu, an engineer from developer Relations. Today I’m bringing you Jetpack Library, which was announced two weeks ago, called Jetpack Compose, and CameraX, which is a Supply Library that helps developers write user interfaces. The latter is the Supply Library that helps developers write camera features and applications.

Jetpack Compose

Two important updates are the 14-year-old Recycler View and the 17-year-old Constraint Layout.

The Google Sooner was a 320 x 240 resolution phone we released in 2007. Put that resolution on today’s Pixel, however, and the area is about the same size as the Pixel’s video window. Android 1.0 has been around for 11 years now, and the user interface hasn’t changed or improved much.

UI toolkit

We often hear feedback from developers asking for the UI Toolkit to be separated from the system level. For example, if we find a UI Bug on Android today, our Android team will fix it and then put it in our fame, so the fix won’t be available until next year’s Android update at the earliest. So even small repairs can take 1-2 years, which is a big problem. At this year’s IO, we released a library of user interfaces.

Now let’s look at the problems existing in Toolkit of our Android system. If you look at our view.java code file on AOSP, it’s close to 30,000 lines of code, so you can imagine how difficult it would be to maintain in such a large class.

Spinner is familiar. It literally means rotating body, but on Android it stands for droplist. A similar example is Button.

The Android development team is not only responsible for writing Java code, but also dealing with various XML files.

Jetpack Compose(Pre-Alpha!) compositionality

Jetpack Compose is a Support Library for developers to write simple user interfaces based on popular user interface libraries.

It consists of a series of Jetpack UI widgets, written in Kotlin, and composed with an interface that is fully compatible with third-party Library interfaces. For now, though, it’s still an experiment, so don’t incorporate Compose’s interface into your app.

Jetpack Compose code demonstration

Use functions to represent UI

Writing an Activity with Jetpack Compose is easy. Just call the Jetpack Compose function directly from the setContent function.

Use basic composite UIs to create complex composite UIs

Use ScrollingList to pass each story level to the next level.

In this StoryWidget, there is data with imageUri. We can write an asyncLoad function and put the image in imageUri after the image is downloaded.

Notice that there are four layers of Card, Column, Padding, and Text between StoryWidget and TextWidget.

Top-down Data Flow

In the NewsFeed function, it takes the story from the parameters and passes the data from each story to the next layer. The benefit is that it only takes care of the data from the parameters in each Widget and doesn’t need to fetch data from elsewhere, ensuring reuse in each Widget. This ensures that the UI is reusable.

What if the user has subsequent actions on the Widget? Due to Kotlin’s nature, it is possible to pass the callback function as an anonymous function to the next layer, so that you only need to call the anonymous function passed in.

Data is passed down layer by layer from top to bottom, and events are uploaded layer by layer.

View Compatibility

All you have to do is add an @GenerateView flag on top of the function, and immediately it becomes Compose.

If I put the greeting_name inside the GreetingView, I’m going to use findViewById to get the view out of the view, just like in Java today.

If you are interested in this library, please visit: related website

Jetpack CameraX

Five years later, most developers still use the Camera 1 API.

fitment

CameraX supports Android 5.0 or higher, which is more than 90% of the market. And the underlying CameraX actually uses Camera 2, so CameraX works well on Camera 2 phones.

Consistency of effect

CameraX ensures consistent results across devices. Google has a CameraX test lab at its headquarters, with 50 to 100 popular models on the market for testing, ensuring that CameraX runs smoothly on different models.

Easy to use

With CameraX, you only need to manage the camera scene. You don’t need to manage the camera interface, hardware, etc.

The current Alpha version includes three scenarios: preview, photo metadata analysis, and easy photo taking.

With CameraX, developers don’t have to worry about compatibility between devices.

Preview

To create a scenario, you need to create the Config.

To preview, you need to create the preview Config first.

In the preview scenario, in order for the data to be displayed on the screen, there is a callback in the preview that gives the callback to the SurfaceTexture. Developers can put it on top of the GL renderer.

Finally, you need to attach this preview scene to the LifecycleOwner. In the past, when Camera code was written, Lifecycle needed to be managed manually; But with CameraX, Lifecycle only needs to be associated with a CameraX usage scenario and Lifecycle will be managed by CameraX.