At Google I/O 2019, Google announced that they were working on a new toolkit, Jetpack Compose, which would redesign how user interfaces (UI) are developed on the Android platform. In August 2020, the alpha version of Jetpack Compose was released. In this post, I will be examining how Compose differs from the current Android UI toolkits, and will discuss the benefits that the new program will bring to Android UI development. 

What is Jetpack Compose?

Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android by using less code, powerful tools, and intuitive Kotlin APIs.

Compose approaches UI development in a declarative pattern. Where traditional UI toolkits used XML or Java to create and style native components, Jetpack Compose will allow developers to create UIs with less code that is both more compact and easier to read.   

With the introduction of Compose, Google brings Android UI development to an equal playing field with the rest of Android application development. Even though Jetpack Compose is still in the alpha stage, we can already see how it will impact Android UI development in the future. 

The Benefits of Jetpack Compose

When comparing Jetpack Compose to current Android UI toolkits, it is immediately apparent that Jetpack Compose has a number of distinct advantages, including:

Use of Native Code

When Android UI toolkits were first created, Java and XML were the most popular development languages and, as a result, Android UI toolkits relied on content creation using Java and XML. Even when Kotlin became a more popular language for the Android platform and developers began migrating their apps to Kotlin, the UI still relied on Java and XML. 

Traditional Android UI toolkits require you to define image parameters in an XML file, while a Kotlin file is used to define the text. Jetpack Compose, on the other hand, is written in Kotlin. Where the current Android UI toolkits require you to frequently switch between Java, Kotlin, and XML, Jetpack Compose allows you to do everything within Kotlin. This reduces the amount of custom code that developers must write when they are creating the UI. 

More Convenient Developer Interface

The developer interface for Jetpack Compose is far more streamlined than the current Android UI toolkits. As seen in the image below, with Jetpack Compose, you can set up your screen to see the source files, code, and app layout simultaneously. This allows you to see how your code is affecting the layout of the UI in real time. 

Developer interface of Jetpack Compose

While this isn’t entirely different from the traditional UI toolkit architecture seen below, it has streamlined the developer interface to make it much easier to use. 

Example developer interface of traditional toolkits

For example, with Jetpack Compose, when you select an element on the example UI layout on the right, it automatically highlights the sections of the code that influence that element, and moves you to the correct location within the code. This streamlined interface will expedite the development process and make the editing process far simpler for developers.

Use of Material Design by Default

Material Design is an Android design system, created by Google, which allows developers to build high-quality, immersive UI experiences. When the traditional Android UI toolkits were created, Material Design had not been created. As a result, the traditional UI toolkits require a lot of adaptors if developers want to implement Material Design features. This means that many developers are forced to alter their planned UI to stay on time and under budget. 

Jetpack Compose, on the other hand, utilizes Material Design by default. As a result, developers will be able to simply choose the Material Design elements they wish to use and Jetpack Compose will automatically input the design. This will allow developers to utilize Material Design elements far more frequently, thereby giving the user a more pleasant UI experience.   

Easier for Server-Driven Apps

Server-driven UI allows the API to instruct the client on what to render and display. With traditional Android UI toolkits, the entire presentation layer of the UI was deployed as part of the application, so changes to the UI could only be made by redeploying the app. 

However, with Jetpack Compose, elements can be positioned using server-side JSON. When you make changes on the server-side, those changes will be reflected in the UI without a complete redeployment of the app. This allows developers to make changes and improvements outside of a typical strict release schedule. 

Production of Consistent UI Across Devices

One of the largest drawbacks of the traditional Android UI toolkits is their inability to maintain a consistent UI across the many different Android devices. However, Jetpack Compose hopes to change all that. As seen in the photo below, Jetpack Compose was created to allow developers to maintain a consistent UI appearance across all Android devices. 

A release date for Jetpack Compose has not yet been announced. However, thanks to the numerous benefits revealed in the alpha release, Android UI developers are anxiously awaiting Compose’s arrival, and Android users can expect to see new and exciting UIs created with Jetpack Compose in the near future.