Google: Jetpack Compose lets Android developers write apps with ‘dramatically less code’

Google today released the alpha version of Jetpack Compose, its UI toolkit for helping developers “build beautiful UI across all Android platforms, with native access to the platform APIs.” While an alpha release means it is definitely not production ready, Jetpack Compose promises to let Android developers build apps using “dramatically less code, interactive tools, and intuitive Kotlin APIs.” The alpha release also includes new tools including Animations, Constraint Layouts, and performance optimizations.

Android Jetpack, which Google launched at its I/O 2018 developer conference, is a set of components for speeding up app development. Think of it as the successor to Support Library, a set of components that makes it easier to leverage new Android features while maintaining backward compatibility. Jetpack Compose, which Google first showed off at its I/O 2019 developer conference, is an unbundled toolkit meant to simplify UI development by combining a reactive programming model with Kotlin. In June, Google promised Jetpack Compose would launch in alpha this summer and hit version 1.0 next year. First step complete.

Low-code and no-code approaches to software development are all the rage. From startups to the tech giants, everyone is trying to make it easier to be a developer. It’s thus no surprise to see Google looking to ease development for its biggest platform — Android had over 2.5 billion monthly active devices as of May 2019.

Jetpack Compose Alpha

Google says developers prefer declarative APIs for building UI. Jetpack Compose thus combines “APIs for high quality apps at scale, an intuitive language, and a reactive programming model.” The team built the toolkit with interoperability in mind — it’s compatible with Android views and Android code so developers can use it without needing to rewrite their apps.

Furthermore, Google wrote the Compose APIs along with a set of canonical sample apps that use its Material Design. Compose sample apps are available on GitHub and directly in Android Studio:

• Interoperability with Views (start mixing Composable functions in your existing app)
• Animations
• Lazy Lists
• Constraint Layout
• Material UI components
• Testing
• Text and editable Text
• Theming and Graphics
• Window management
• Input and Gestures
• Initial A11Y support
• Performance optimizations

Speaking of Android Studio, Google has updated version 4.2 Canary with the Jetbrains Kotlin team to help build apps with Compose. Improvements include a Kotlin compiler plugin for code generation, Compose Preview Annotations, real-time interactive Compose previews, deploying individual composables to any device, Compose Code completion, and a Sample Data API for Compose.

Jetpack Compose in Android Studio is designed to help you iterate quickly on your app’s UI. You can preview your Compose components as you build without having to deploy your app to a device or emulator. To create a layout preview, write a composable function that does not take any parameters and add the @Preview annotation.

Android Studio provides an interactive preview mode that lets you click or type in your UI elements while the UI responds as if it were in the installed app. You can also deploy a single composable to your default device or emulator to try your UI without reinstalling the entire app or navigating to its location. Android Studio creates a new activity containing the UI generated by that function and deploys it to your app on the device.

Interoperable with existing Android code

An Android view hierarchy is typically represented as a tree of UI widgets. Updating the UI commonly consists of walking the tree using functions that change the internal state of the widget. The Android Jetpack team not only believes that this is tedious, but notes that updating views manually increases the likelihood of errors.

This is why Jetpack Compose takes a fully declarative component-based approach. You describe your UI as functions that transform data into a UI hierarchy; when the underlying data changes, the Compose framework automatically updates the UI hierarchy for you, speeding up development and reducing errors.

But adopting a new framework is a big change for existing projects and codebases. Google has thus designed Compose to be as easy to adopt as Kotlin — it is fully interoperable with existing Android code.

If you’re building a new app, Google hopes you’ll implement your entire UI with Compose. But given that it’s still in alpha, you probably shouldn’t do that just yet. For existing codebases, Google recommends one of two ways of combining Compose with your existing UI design:

• Add Compose elements into your existing UI, either by creating an entirely new Compose-based screen or by adding Compose elements into an existing fragment or view layout.
• Add a view-based UI element into your composable functions. Doing so lets you add non-Compose widgets, such as MapView or WebView, into a Compose-based design.

To get started with Jetpack Compose, check out the Compose Tutorial, setup, and the Compose pathway. You may also want to try the MDC Compose Theme Adapter, which allows you to reuse your Material Components themes within your Compose UI.