Jetpack Compose, Google’s new UI toolkit for Android, is now in alpha
When it comes to developing an app, there are a lot of ways to go about it. You can choose which platform(s) to develop for, which programming language(s) you want to use, and so much more.
Back in the fall of 2019, Google introduced a new framework for building UIs in Android, using Kotlin. Until now, it’s been in a developmental state, with frequent breaking changes and tons of missing features. But today, Google has pushed Jetpack Compose to the alpha release state, meaning it’s one step closer to being used in production-quality projects.
What is Jetpack Compose?
When building an Android app, there are usually two main components you have to deal with: the code, for logic-based things; and the XML, for layouts. By default, Android uses Java for code and its own set of XML tags for layouts.
For many, Java and XML are just fine, especially for simpler apps. But both systems have their limitations and annoyances. With the introduction of Kotlin as an official (and recommended) language for Android development, the coding side of making an Android app arguably got a lot easier. With Kotlin’s handy features like built-in null protection and extension functions, code looks cleaner and is easier to read.
But Kotlin didn’t change anything with Android’s layouts. To make a complex layout, you still needed to create an XML file and design it there. This has some notable disadvantages, including the inherent separation between the code and XML. If you have a constant string in your code, for example, you can’t just reference that from XML, so if that string changes in code, you have to remember to update it in XML as well.
Enter Jetpack Compose. This is Google’s answer to the increasingly-clunky XML layout design process in Android. Instead of designing your app’s UI in XML, you can do it right from your code. While code-based layouts are possible to create, they’re usually less maintainable than XML and involve easily-broken libraries. Compose, on the other hand, is designed to work straight inside Kotlin: no more XML.
Jetpack Compose is also a pretty radical departure from the standard imperative design of XML layouts. Instead, it’s more similar to React or Flutter, with declarative layouts that update themselves when data changes, instead of relying on the developer to implement that logic.
So Jetpack Compose is in alpha now. What does that mean? Well, a lot of things.
Interoperability with Views
Just like Kotlin is fully interoperable with Java, Jetpack Compose is fully interoperable with Android’s standard Views. This means quite a few things.
For one, it’ll be a lot easier to migrate to Jetpack Compose if you want to. Instead of having to convert all your custom Views and layouts to Composables, you’ll be able to just make your new layouts and components in Compose. Have a library that uses “legacy” Views, but your app is designed with Compose? No problem. You can add the View straight into your Composable function. Haven’t made the jump to Compose yet, but you want to use a library that relies on Composables? Again, no problem. Just put the Composable right into your layout.
As for theming, it’s not quite as plug-and-play as layout interoperability. However, Google has made a library to adapt your standard XML themes into Compose-compatible themes, helping to keep things centralized and avoid duplication.
There’s not really too much to say here, except that Jetpack Compose supports animations, just like Android’s View framework. You can move, resize, and rotate to your heart’s content.
A lazy list is essentially Compose’s version of a RecyclerView. It only lays out items as needed, saving on RAM and increasing performance. Of course, this being Compose, lists are significantly simpler to implement.
One of the more powerful Views in Android is the ConstraintLayout. This lets you position, size, and weight child Views relative to each other, while also making certain animations easier. If you were worried about losing this functionality in Compose, you shouldn’t be, because it’s here, too.
Material UI Components
Another set of powerful Views is Google’s Material Components library. Most of what’s in here are standard Views and layouts you can find in the native View framework. But they’re tweaked or wrapped to provide extra functionality and make theming easier, and they’ve made their way to Compose, as well.
An important part of developing an app is testing it. For a simple app, you could do this manually by installing and using it. However, more complex projects can benefit greatly from automated testing frameworks that do most of the hard work for you. Jetpack Compose supports automated testing so you can make your app as stable as possible.
Accessibility is an important part of our society. Without accessibility features in our technology, a lot of people would simply be shut out from the benefits our phones, televisions, and whatever else, provide. Jetpack Compose is still in alpha, so accessibility support isn’t complete, but Google is keeping it in mind during development, and rudimentary support is already present.
Not all the features of Jetpack Compose are in Jetpack Compose itself, though. Android Studio and Kotlin also have plugins and expansions for easier Composing.
Kotlin Compiler Plugin
As with Kotlin JVM, there’s a compiler plugin in Android Studio to properly convert your Compose functions to code that Android can actually understand and follow.
Just like with your standard XML layouts, Android Studio comes with a layout preview for Jetpack Compose. While it’s not currently quite as convenient as the XML previews in some aspects—you have to build your project for the preview to update, and make a dedicated preview function—it does come with one notable advantage: interactive previews.
An interactive preview is just a normal preview, but interactive. Crazy, I know. What this means, though, is that you can actually type text into text boxes, click buttons, and, well, interact with your Composables, without even having to deploy them.
Single Composable Deployment
If you do want to actually deploy (i.e install) your layout to see how it works on a real device, this feature might help you. With normal XML layouts, in order to see how a layout works in the real world, you have to build and install the entire app. If the layout you want to test isn’t on the primary screen, you might be doing a lot of tapping to get to it.
And that’s where the ability to deploy only a single Composable comes into play. Instead of having to build and install your app, and then navigate to the layout you’re testing, you can just deploy the layout. Android Studio will generate and open a wrapper Activity that just displays the Composable you deployed. This can make testing and design a lot quicker, and can even help isolate issues related to element interaction.
If your IDE doesn’t have code completion, is it even an IDE? No. No, it’s not. So, of course, Android Studio supports full code completion for Jetpack Compose.
While this isn’t everything that Jetpack Compose brings to the table, the features and behavior above showcase just how powerful Google wants this framework to be. And, while it’s still in alpha, that’s a step ahead of its previous “development” status. If you were holding off on really using Jetpack Compose (like I was), now might be the time to give it another try.