Android Jetpack Compose: Sneak peek into the future of Android UI — I

Photo by Tomasz Frankowski on Unsplash

The Android UI toolkit API has remained the same for nearly a decade now and while new libraries like recyclerView, constraintLayout, motionLayout, and many others were launched, the toolkit was never changed fundamentally.

Jetpack Compose is a radical shift in the way developers think about and write UI code on Android.

What is Jetpack Compose?

Jetpack Compose is an unbundled toolkit designed to simplify UI development. It combines a reactive programming model with the conciseness and ease of use of the Kotlin programming language.

With compose, UI components are fully declarative and allow developers to create layouts by simply describing what the UI should look like in their code.

What does compose code look like?

Having worked with Flutter in the past year, I was able to familiarize myself with this code almost instantly.

The only problem with using Flutter, after having been exposed to the conciseness and terseness of Kotlin for quite some time now, is that writing flutter code with dart seemed painful compared to kotlin, but still worth it thanks to the multi-platform benefits. 😎

Jetpack Compose brings declarative, reactive UI and the power using kotlin under one roof.

Jetpack compose lets you write React/Flutter like declarative UI code using Kotlin and trust me, it’s a delight!

How do I get started?

The compose library is still pre-alpha (Is that a thing?) and not meant to be used in production.

To be able to run compose you need to fork the AndroidX components from the AOSP and run a special version of Android Studio with compose compiler plugins enabled.

Follow all steps mentioned here to get started:

Once you have your Android studio set up, use the :

Open an existing Android Studio project

option and point it to :

<path to androidx-master repo>/frameworks/support/ui/

For a good starting point to look into compose code, search for RallyActivity.kt.

You can run the ui-material-studies and the ui-demos sample app to deploy the code to your device.

The Compose compiler and runtime code can be found in the frameworks/support/compose folder.

In the next article, we will look at how compose works under the hood and create our own components.

If this article helped you in any way, please don’t forget to click 👏 and recommend it to others.

Also, to be notified about my new articles and stories, follow me on Medium and Twitter.

Cheers!

Senior Android Engineer. Flutter enthusiast. Tech Geek.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store