The development of Mobile application technology is currently moving at a very fast pace. Every year bears the fruit of new innovations and trends. During the last few years, declarative UI and reactive programming are concepts that have made up key trends within the world of mobile app development. In response to the trends that were previously popular in regards to frameworks such as React Native, Flutter, and iOS (with Swift UI), Google has released its UI toolkit “Jetpack Compose” for Android devices.
Android’s “Jetpack Compose” is the name for Google’s new UI library first introduced at the 2019 I/O event. This library facilitates the ability for developers to create more beautiful and responsive UI through concise code. In February 2021, Jetpack Compose had entered the Beta stage; its API had been completed, meaning that there will currently be no significant changes or deletions to its API. Google is hoping that the toolkit will stabilize through the upcoming version 1.0 by the end of the year.
Because it is still under development, Jetpack Compose is not yet available on the stable version of Android Studio. In order to use it, developers must use the Canary version of Android Studio Arctic Fox.
Table of Contents
Android UI Without XML Layout
Native Android applications are currently being developed through writing UI within XML code, as well as programing logic through the Kotlin or Java languages. The Jetpack Compose toolkit allows its users to create both the UI and logic through the use of one language, namely Kotlin. However, taking into consideration the fact that it is already around a dozen years old, maybe millions of Android applications have already been developed through the use of the old method, namely through the XML layout. Therefore, Google had created Jetpack Compose so that it could be used in conjunction with that same XML layout.
In Android programming terms, interoperability determines the extent to which a new technology is implemented. By making Jetpack Compose interoperable through the use of XML layouts, every Android developer will have the flexibility in order to implement it. In regards to newer applications, developers will be able to use Compose freely and to its fullest extent. Meanwhile, for old applications, developers can still format the old layout through the use of XML, and in regards to the new layout they will be able to utilize Compose without altering the layout’s entirety.
Advanced Live Preview
In Android programming, whenever the UI within the XML code is changed, we are obliged to rerun the application to either the emulator or the native device. Jetpack Compose allows us to preview the created layout as a whole (one page) or partially (per component) directly from within Android Studio.
More than just displaying through a basic static view, Android Studio is even capable of providing previews that are interactive for the user. The displayed preview is then able to provide feedback, just like an application being run on an emulator.
Doesn’t Depend on a Specific Version of Android
Google had developed its Jetpack Compose toolkit independent of any other version of Android. This was done in order to reduce the level of fragmentation potentially experienced through Android. As is known, Android often undergoes API changes from one version to the next. Some of these changes affect the Android operating system in varying ways. For example, when using Android before the Lollipop operating system, we got a very different UI, by comparison to post-Lollipop Android. Compose was developed so that every application that uses it employs a consistent UI without the developer having to manually tweak from one version of Android to another.
Declarative UI
Jetpack Compose is Google’s answer to the declarative UI trend. Declarative UI is a concept whereby the developer declares the UI through calling a certain set of functions where the UI will then react to a state (data). If any state thereby changes, then the components utilizing that state will automatically be called/re-rendered.
Jetpack Compose vs Flutter
Flutter is a UI toolkit which was also developed by Google and is used for building applications on Mobile, Web and Desktop. If you’ve ever seen or written Flutter code, the code used in Compose will look pretty familiar. That’s because Compose and Flutter both apply the same declarative UI concept.
Despite the similarities between the two, in regards to their structures as well as several components sharing the same name, they are in fact very different. Flutter is a production ready framework written in the Dart programming language, while Jetpack Compose is written in Kotlin and is used only for native Android programming.
Because Compose is written in Kotlin, and used solely for native Android programming, it receives direct access to native APIs, such as Jetpack Navigation Architecture, ViewModel, LiveData / Flow, Paging, Hilt, and so on. Meanwhile, Flutter was developed with additional layers; so, to be able to use its Native features we must first create a platform channel.
Learning Resources
Google consistently releases tutorials in the form of articles, codelabs, and Youtube video series so as to familiarize its audience with the Jetpack Compose application. Written tutorials in the form of articles can be found on the website developer.android.com or codelabs.developer.google.com. Meanwhile, tutorial videos are uploaded regularly on the Android Developers Youtube channel. Examples in full project form have also been provided via Github Jetpack Compose Samples.
