MongoDB Developer
Realm
plus
Sign in to follow topics
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Productschevron-right
Realmchevron-right

Unboxing Jetpack Compose: My First Compose App

Mohit Sharma5 min read • Published Jul 30, 2021 • Updated May 09, 2022
AndroidRealmKotlin
Facebook Icontwitter iconlinkedin icon
Rate this quickstart
star-empty
star-empty
star-empty
star-empty
star-empty

Introduction

What is Jetpack Compose?
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!
What is Declarative UI?
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:
  1. 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!
  2. Interoperable: Similar to Kotlin, Compose is also interoperable with earlier UI design frameworks.
  3. Jetpack library and material component built-in support: Reduce developer efforts and time in building beautiful UI with fewer lines of code ❤️.
  4. 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.
Current state
As of 29th July, the first stable version was released 1.0, meaning Compose is production-ready.

Get Started with Compose

For using Compose, we need to set up a few things:
  1. Kotlin v1.5.10 and above, so let’s update our dependency in the project-level build.gradle file.
  2. Minimum API level 21
  3. Enable Compose
  4. Others like min Java or Kotlin compiler and compose compiler
  5. At last compose dependency for build UI
Mindset
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.
First Compose Project — Tweet Details Screen
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 @Composable annotation, 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 @Preview annotation.
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 modifier for updating our Image (AKA ImageView) with clip to make it rounded and contentScale to 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 viewModel.
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.

Facebook Icontwitter iconlinkedin icon
Rate this quickstart
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Tutorial

Turning Your Local Game into an Online Experience with MongoDB Realm Sync


Mar 06, 2023 | 12 min read
Tutorial

Realm Data Types


May 09, 2022 | 8 min read
Article

The MongoDB Realm Hackathon Experience


Sep 05, 2023 | 7 min read
News & Announcements

How We Migrated Realm JavaScript From NAN to N-API


May 13, 2022 | 6 min read
Table of Contents
  • Introduction