An Introduction to Jetpack Composable

Google bringing the best of Flutter to Android. At least that’s how it feels

Credit: Author

Back in the days when developing a native Android app, the only option we had to work with UI was the XML files. We create our UI in XML and inflate them from our Java or Kotlin code. We had to work with the XML attributes and different layouts. The UI composer in Android Studio got better with time but still it wasn’t perfect.

When Flutter was introduced, it was a newer way of building mobile apps. We used only 1 programming language — Dart to define our UI and the app logic. It was a little new at the beginning but made so much sense as I got around it.

Building UI was much more simple, intuitive, faster in Flutter when I compared it to my old approach with Android.

Fast forward to 2021 and we have Jetpack Compose, and Google’s intention is the same — to make building UIs in Android Simple, Faster and Intuitive.

In this story, I am going to walk you through how you can get started with Jetpack Compose.

1. Getting Started with Jetpack Compose

• Let’s create a new Android Studio Project. You can choose “Empty Compose Activity” from the templates.

• You will get some example code, but I would take this from very scratch so maybe go ahead and delete what you already see to this starter template

• Text("...") is a composable function in Kotlin.
• Jetpack Compose is made up of composable functions only, which define how your widget will look on the screen. It doesn’t bother with initialization or destruction of it, but just how it will look on the screen.
• Composable function can only be called from other composable functions.