First Look At Jetpack Compose

Jetpack Compose is a modern toolkit for UI development in Android. This Library allows to build User Interfaces using Kotlin code instead of using traditional XML layouts, controlling easily the visibility and behaviour of UI elements using code. Jetpack Compose is currently in Developer Preview and requires latest Canary version of Android Studio.

Layouts on Jetpack Compose are build upon Composable methods, which are annotated with Composable annotation and need to have a unique name in the project.

Composable:

This Composable, MainLayout, is used on setContent() of an Activity to render a TextView with the text “Test”.

Composables are meant to be used is along with Preview and Preview is another annotation that should be used on the Composables. In this case, when a Composable is a Preview, the layout will the rendered on the Design View.

Composables:

One of the biggest differences on writing the UI code with Jetpack Compose is that it won’t use the traditional Views of Android and instead there are Composables for all the Views.
In the previous case we used a Text instead of a TextField.

The easiest way to organize the UI is using Columns and Rows. Both of these contain a parameter called ‘children’ where other Composables are placed inside the Parent Composable.

Other examples of Composables are: ‘Image’ (ImageView), ‘Scaffold’ (basic Material Design parent), ‘TextField ‘(EditText), ‘LazyColumnItems’ (RecyclerView).

Modifiers:

Another change is the addition of modifiers that allows to define standard UI properties for the Composables as margins, background, padding, clickListeners, etc.

Jetpack Compose VS Flutter:

This was a biased look at Jetpack Compose after spending some time working on Flutter. Flutter is a Google’s UI toolkit to build Applications to Mobile, Web and Desktop. Jetpack Compose seems to share common elements with Flutter. It is easy to see lot of similarities when comparing both codes. The following code was built using the Building layouts’ Flutter Tutorial. In the right side it can be seen the code present on the Tutorial, while on the left I built a similar UI using Jetpack Compose:

Looking at the similarities of these two newer UI toolkits, it doesn’t seem wrong to think that this new way of building UIs might be what Google might be pushing forward as the standard way to build UIs.

In summary, this new Library has some potential to be massively used on Android, but for now, as this is still too new, I’m still wondering if it will be a great fit alongside with Design Patterns as MVVM or MVP. Nevertheless, it is always great to explore new Libraries to expand our perception of the Framework ecosystem.

For more information on Jetpack Compose, you can take a look at Jetpack Compose basics Codelab and Learn-Jetpack-Compose-By-Example.

Found this article helpful? Subscribe to our newsletter and follow us on social media: LinkedIn, Twitter, Facebook.