Unboxing Jetpack Compose: My First Compose App
Mohit SharmaPublished Jul 30, 2021 • Updated May 09, 2022
Rate this quickstart
As per Google, “Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs”.
In my words, it’s a revolutionary declarative way of creating (or should I say composing 😄) UI in Android using Kotlin. Until now, we created layouts using XML and never dared to create via code (except for custom views, no choice) due to its complexity, non-intuitiveness, and maintenance issues.
But now it’s different!
You know, imperative is like how you do something, and declarative is more like what you do, or something.
Doesn’t that make sense? It didn’t to me as well in the first go 😄. In my opinion, imperative is more like an algorithm to perform any operation step by step, and declarative is the code that is built using the algorithm, more to do what works.
In Android, we normally create an XML of a layout and then update (sync) each element every time based on the input received, business rules using findViewById/Kotlin Semantics/View Binding/ Data Binding 😅.
But with Compose, we simply write a function that has both elements and rules, which is called whenever information gets updated. In short, a part of the UI is recreated every time without performance issues.
This philosophy or mindset will in turn help you write smaller (Single Responsibility principle) and reusable functions.
I’m not really sure, but out of the many awesome features, the ones I’ve loved most are:
- Faster release cycle: Bi-weekly, so now there is a real chance that if you get any issue with composing, it can be fixed soon. Hopefully!
- Interoperable: Similar to Kotlin, Compose is also interoperable with earlier UI design frameworks.
- Jetpack library and material component built-in support: Reduce developer efforts and time in building beautiful UI with fewer lines of code ❤️.
- Declarative UI: With a new way of building UI, we are now in harmony with all other major frontend development frameworks like SwiftUI, Flutter, and React Native, making it easier for the developer to use concepts/paradigms from other platforms.
As of 29th July, the first stable version was released 1.0, meaning Compose is production-ready.
- Kotlin v1.5.10 and above, so let’s update our dependency in the project-level
- Minimum API level 21
- Enable Compose
- Others like min Java or Kotlin compiler and compose compiler
- At last compose dependency for build UI
While composing UI, you need to unlearn various types of layouts and remember just one thing: Everything is a composition of rows and columns.
But what about ConstraintLayout, which makes life so easy and is very useful for building complex UI? We can still use it ❤️, but in a little different way.
For our learning curve experience, I decided to re-create this screen in Compose.
So let’s get started.
Create a new project with Compose project as a template and open MainActivity.
If you don’t see the Compose project, then update Android Studio to the latest version.
Now to add a view to the UI, we need to create a function with
@Composableannotation, which makes it a Compose function.
Creating our first layout of the view, toolbar
To preview the UI rendered in Android Studio, we can use
TopAppBar is an inbuilt material component for adding a topbar to our application.
Let’s create a little more complex view, user profile view
As discussed earlier, in Compose, we have only rows and columns, so let’s break our UI 👇, where the red border represents columns and green is rows, and complete UI as a row in the screen.
So let’s create our compose function for user profile view with our root row.
You will notice the modifier argument in the Row function. This is the Compose way of adding formatting to the elements, which is uniform across all the elements.
Creating a round imageview is very simple now. No need for any library or XML drawable as an overlay.
Again we have a
modifierfor updating our Image (AKA ImageView) with
clipto make it rounded and
contentScaleto scale the image.
Similarly, adding a label will be a piece of cake now.
Now let’s put it all together in rows and columns to complete the view.
Another great example is to create a Text Label with two styles. We know that traditionally doing that is very painful.
Let’s see the Compose way of doing it.
That’s it!! I hope you’ve seen the ease of use and benefit of using Compose for building UI.
Just remember everything in Compose is rows and columns, and the order of attributes matters. You can check out my Github repo complete example which also demonstrates the rendering of data using
If you have questions, please head to our developer community website where the MongoDB engineers and the MongoDB community will help you build your next big idea with MongoDB.