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, the promise is that Jetpack Compose will 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 backwards 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.
Jetpack Compose Alpha
Google says developers prefer declarative APIs for building UI so Jetpack Compose 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.
Google wrote the Compose APIs along with a set of canonical sample apps that use its Material Design. The 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. The Compose layout preview lets you 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
Because Jetpack Compose uses a programming model different from the existing model of building UI on Android, it takes some adjustment. 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 believes that this is not only tedious, but notes that updating views manually increases the likelihood of errors.
This is why Jetpack Compose takes a fully declarative component-based approach. That means 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 might not want to 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.
Source: Read Full Article