Now, when Jetpack Compose is finally stable, I thought of putting up this which can let you get easily started with it.
But one question that will generally arise is — Why Jetpack Compose? To answer that, please visit — Advantages of Jetpack Compose
So, I am assuming that you are not a newbie to Android development(like me) and you are developing your apps using traditional XML files for your layouts. But when it comes to Compose, it is all Kotlin codes and no XML files, so the first thing that you need to do is — Think like Compose!
Compose is a declarative UI framework and thus it’s all done in Kotlin codes. This means the Kotlin programming language serves as our single source of truth.
In the era of XMLs, we use to design the views manually and populate the data using our Kotlin/Java files. But Compose is different. Here everything is realtime and stateless. Means, we don’t need to manually update the UI(or, change the XML codes) in Android Studio to see how our screen will look with real data. Isn’t this amazing?
With many imperative object-oriented UI toolkits, you initialize the UI by instantiating a tree of widgets. You often do this by inflating an XML layout file. Each widget maintains its own internal state, and exposes getter and setter methods that allow the app logic to interact with the widget.
In Compose’s declarative approach, widgets are relatively stateless and do not expose setter or getter functions. In fact, widgets are not exposed as objects. You update the UI by calling the same composable function with different arguments. This makes it easy to provide state to architectural patterns such as MVVM as it’s all dynamic!
This means if you have n names and you want to see that how each name looks on the UI, it’s simple as never before! Just pass the list of names to compose and boom! there is the UI ready in the preview on your Android Studio! No need to run the app or change the names manually in the XML files to see how it will actually get rendered on the UI.
Conclusion
This article mainly focuses on the approach to get started with Jetpack Compose and let you think from declarative UI perspectives. You might have warmed up by now by Jetpack Compose and before we land to the codes, let’s try to understand how the composition works in the next section, How Jetpack Compose works?.
