Android joins the declarative UI club after launching Jetpack Compose 1.0

This summer, a new important chapter was written in the Android world: Jetpack Compose 1.0. Remember our articles about Declarative UI and SwiftUI? Now it's time for Android to shine, as Jetpack Compose is their declarative UI framework.

Android development is around for more than ten years. In the beginning, it was pretty basic: XMLs for the User Interface + Java for the business logic. Over time it has evolved in a lot of ways, for example:

• New XML layout types appeared (like ConstraintLayout).
• Kotlin became supported in 2017 and recommended by Google in 2019.
• Android Jetpack appeared, supporting development in many ways.

 

Jetpack Compose Timeline

Jetpack Compose is around for a while, but it was not officially launched until recently.

The first version, Alpha 1.0, was published in August 2020, and Google stated that it's their new UI Toolkit for building native apps with Kotlin. They have combined three key elements into this framework:

• Modern APIs (just like in other Jetpack libraries).
• Kotlin.
• Declarative programming.

However, an Alpha version is suitable for experimenting with new technologies, but it has some drawbacks.
The main ones would be that it most likely contains bugs and inconsistencies, while the APIs are also not set in stone. So, if you get used to some elements or functions, they are likely to change in the future.

What's the next stability step of a framework?
The Beta release. For Jetpack Compose, that happened in February 2021. The main advantage over the Alpha versions is that the APIs are locked and will not change in the official release. So, if you're planning to learn something thoroughly, you can start doing that from the Beta version.

When it comes to using a toolkit like this in production, the recommendation would be to wait at least until the first official release. Well, good news, Jetpack Compose was officially released on July 28, 2021. Does this mean that it's ready for production? We'll see that below.

 

Pros and cons of Jetpack Compose | Technical Considerations 

First of all, Jetpack Compose is a declarative programming-based approach. In the traditional imperative way of building Android UI, you had to create UI elements using the XML syntax, then link to your Kotlin code all the elements that could change. This became better and better over time, especially with the appearance of Data Binding, LiveData, and ViewModels, but the paradigm remained the same.

However, Compose is a brand new way of creating Android UI based on the received data. You use functions that transform this data into a UI hierarchy, and that's not the whole story. When your data changes, the framework will automatically update and redraw the UI without you needing to trigger that manually. Pretty cool, right?

This approach is not new in the mobile world. Cross-platform solutions like React Native or Flutter already have this, and so does native iOS development with its new framework: SwiftUI. Does it mean it's better? Not necessarily, but is it worth trying? We would say that it is. Furthermore, it's also backward compatible with older versions of Android (back to Android 5.0), a luxury that SwiftUI, for example, doesn't have.

Diving into the syntax, we see that Compose is based 100% on Kotlin, which has at least two advantages:

• Your code will be consistent and uniform for both the UI and the business logic of your Android app.
• New developers can learn Android easier and faster because they can focus only on Kotlin, a single programming language that is concise and expressive, while also having many features.

The main idea is to use composables for creating your desired UI. A composable is a function written in Kotlin that has the following annotation: @Composable. It also doesn't have a return value. As the name implies, the recommendation is to use composition for creating complex UI elements and combine them.

Enough with the theory. Let's see some actual code 👇

First of all, your activity class needs to extend ComponentActivity. Then, in onCreate, you use "setContent" to load a composable.

By default, Android Studio generates a theme for you when you create a new Compose project. Inside this theme, you can load your main composable, in our case: MainScreen.

 

As for the implementation of MainScreen, it's a composable function that takes one argument and uses it below. For this example, we added a Scaffold (which is a basic Material Design composable) that contains a Column so we can display items one under another.

The arguments of the Column are modifiers that set the size and background color, as well as arrangement properties. We also have a boolean property called "expanded" which will hold the current state of the greeting. This property changes from a click action that we set on the Column modifier.
Besides that, we are just displaying an image and a greeting text that will appear or disappear based on the "expanded" property.

One more thing. To display a gradient background, we needed to create an extension function on the Modifier class. This shows once again an advantage of using Kotlin for building UI.

Last but not least, to display a preview of what we've created, we need the following:

By using the @Preview annotation on a new composable function, we're able to display a static preview of our screen.

Finally, here's a GIF with how everything works together 🙌

 

Is Jetpack Compose ready for production?

Now that Jetpack Compose is officially launched, should we use it in "real" projects? There's no right or wrong answer because every project is different in its own way. However, when it comes to brand new frameworks, we usually recommend a trial period to try them out and see how they perform.

Innovation is one of the keys to success for any software development team. At Wolfpack Digital, we are always excited to try new technologies and keep ourselves up-to-date with the worldwide community. Nonetheless, we aim to keep a balance between excitement and stability so we can deliver powerful web platforms and mobile apps at all times. 

This means that, for now, we will be experimenting with Jetpack Compose on our own projects, and as soon as we feel it's ready, we will strongly recommend it to our partners as well. 

In the meantime, if you want to design, develop and launch an Android mobile app, let us know in the chat and we will guide you through the entire mobile app development process and build a flawless application for you!