JETPACK COMPOSE: Understanding Prerequisite, Use-case, and Code flow
“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.”
This article would cover the following points:
- Prerequisites for getting started with Jetpack Compose
- How, when, and for whom is it useful
- Code flow and working of Jetpack Compose
Prerequisites:
- As of now, Compose is Kotlin specific, so you’ll need to be familiar with the Kotlin Programming language.
- Also, creating Compose activity feature is a part of the latest version of Android Studios i.e., Arctic Fox, so you’ll need to update to the latest version.
- If you select the Compose Activity while starting a project, the required dependencies would already be included, but these may get deprecated soon, as Compose is quite new. So, if you keep getting errors or your app misbehaves, consider checking if some dependencies are outdated (in the Gradle file, android studios automatically points it out as shown below).
Now, we are good to start with the Use-Case of Jetpack Compose:
First of all, it’s available only in Kotlin, Java developers may either switch to Kotlin or just continue with Imperative UI using XML.
Keeping in mind the motto ‘Kotlin First’, Google develops new features with Kotlin as a priority.
Moreover, Compose ships with a number of UI elements, views, animations, and View Models. It can be added to other projects as well, so you can use it even without completely switching.
Using Compose is quite different as it’s a declarative way of developing UI. You declare all the UI elements using function calls and recalls. The UI is absolutely dynamic and reactive as its elements themselves can be conditional.
Understanding the code flow in Compose:
To get a complete understanding of Compose, you can refer to this documentation.
Here, we will understand the working of Compose.
Compose is implemented using Composable functions, and you might be wondering what Composable functions are. So, functions which have the Annotation of @Composable. You can define all your UI elements and features within these functions.
Consider the following example:
And this is what reflects in your app:
But this is an app of no real use. We want our app to take inputs, and work accordingly. For that, we can use conditional statements, but there’s a problem.
The problem is with the variable that we apply our conditions on. Before understanding this, let’s first understand how Compose works to display the UI elements, especially the concept of recomposition.
Recomposition:
In Compose, the Composable functions are re-called every time its variables change. Recomposition happens only for functions that face some changes, as recomposing the whole UI tree could be a heavy process. Recomposition can occur at a frequency as high as the display refresh rate. So, it is intelligently designed to only recompose specific UI elements that bear any change. But then there is a problem that even when you recompose the same Composable function, you’ll only end up making the same UI, because you initialized it the same way, edited it the same way, then how can you expect any difference?
Here comes ‘STATE’ to the rescue.
You can read more about managing State from the documentation.
Briefly, State helps you make a variable that we needed, the one which we could pass from one composition to the next recomposition.
What happens here is, instead of initializing the variable with a default value, we sort of remember it from the previous composition, and whenever we wish to change it, we recompose and reinitialize it with the desired value, so that the variable remains immutable at the same time we get our desired dynamic behavior. Now let’s put theory into practice.
Consider the following example:
What exactly we did here is, we just asked Compose to remember the value of name over recomposition, so now that we edited the name, and then asked for recomposition, the name isn’t just an empty string but whatever we wrote, hence reflecting the difference.
You may have noticed we used remember and mutableStateOf(), remember, as the name suggests, remembers the value, while mutableStateOf is used to declare data that could be varied over time. In place of ‘remember’ you could have used ‘rememberSaveable’ so that the app remembers its state even on configuration change i.e., changing from portrait to landscape or vice versa.
You can learn more about the syntactical part as well as some great optimizations in using State such as State hoisting and using View Model from the documentation. It was only my intent to give you a visualization of how Compose works. Goodbye, until the next time…
