Part 1: Integrating Jetpack Compose to Our Development Code
An exciting experiment in our development code, implementing Jetpack Compose and exploring its interoperability.
Android development continues to evolve. The developer community and developer companies continue to contribute to simplifying the development process. One of the most impactful contributions to the development of modern Android applications is Jetpack Compose.
Jetpack Compose is an alternative toolkit for creating native UI on the Android platform. With jetpack compose, you no longer need to create UI with XML; just call the compose function that is already available or create your own compose components using the @composable annotation and jetpack compose will take care of everything.
@Composable
fun greeting() {
Text(text = "Hello World")
}We at Sampingan are very interested in trying Jetpack Compose. Moreover, Google announced that Jetpack Compose has entered the beta phase (but still has to use Android Studio Canary to use the preview feature). And also, jetpack compose has an interoperability feature with XML vice-versa, so you don’t need to refactor the entire code, but it can be done slowly and partially.
How We Setup Jetpack Compose On Our Project
Our codebase has been modularized and already using Kotlin, so the refactoring process in our codebase is more straightforward. We started implementing jetpack compose in a dynamic feature module to keep the refactor simple and reduce its complexity. Our changes will occur only in the module and will not touch another module.
We started implementing Jetpack Compose by upgrading the Android Gradle Plugin version to 7.0.0-alpha09 so that it can run on Android Studio Canary.
buildScript {
dependencies {
classpath 'com.android.tools.build:gradle:7.0.0-alpha09'
}
}Do Gradle sync to check whether there are dependencies that need to support the Android Gradle plugin version 7.0.0-alpha09.
Check the version of Kotlin that is installed on your project, and make sure it has version 1.4.30 or newer.
plugins {
id 'org.jetbrains.kotlin.android' version '1.4.30'
}Install the dependencies from jetpack compose according to what you need.
Since we only need a few dependencies, we only install the following libraries.
Do the Gradle sync again to check if the installation was done. If there is an error like this:
e: This version (1.0.0-alpha11) of the Compose Compiler requires Kotlin version 1.4.21-2 but you appear to be using Kotlin version 1.4.21 which is not known to be compatible. Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).You can add the command for supressKotlinVersion in the module/build.gradle to solve this problem.
Creating Our First Jetpack Compose Component
After completing the setup process, we are ready to create our first Jetpack Compose Component.
You can start making components from the smallest component on the UI, such as buttons, text, chips, and other components. For example, let’s see on the UI below:
As you can see in the UI above, It has TopAppBar, CheckBox, and Button.
Let’s start with creating the Button component first.
Now, we have created the button component. Then we can start including it in our UI by taking advantage of the interoperability features in Jetpack Compose. We can use ComposeView in our XML and attach it to the button component we created earlier.
...<androidx.compose.ui.platform.ComposeView
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content" />......binding.button.setContent {
SampinganButton(
modifier = Modifier.padding(
top = 20.dp,
bottom = 60.dp,
start = 16.dp,
end = 16.dp
),
onClick = { /* do something */ },
text = buttonSaveText
)...
Then continue to create other components contained in the layout that you want to refactor until all components have been successfully replaced with jetpack compose, and in the end, you can refactor the entire layout with composable function.
Conclusion
The process above looks easy, but it cannot be denied that the refactor process that we experienced is not that easy. We found that several layouts in the androidX library is not available yet in Jetpack compose, and it took a lot of time and effort to make these layouts.
Therefore, we take advantage of the Jetpack Compose interoperability feature, which allows us to insert a custom view class in the android library in the Jetpack Compose layout. by using AndroidView.
Or if you want to embed an XML layout to compose, you can use AndroidViewBinding
With interoperability, we can continue the refactor another UI so that our code will partially implement jetpack compose and still use the custom view that we have created before, as well as the android view in the AndroidX library.
That’s all. In my opinion, jetpack compose is ready to be used with some drawbacks, such as the learning curve, we need an adjustment in our team with declarative UI paradigm, some component materials that are not yet available (can be “tricked” with interoperability) and android studio which still has to use the canary version. But we believe that soon, jetpack compose will be ready to use in android studio production, and when that time comes, we are ready, and we don’t even need to do anything because we’ve set jetpack to compose in our project.
To see some sample jetpack compose you can access on the following page:
https://github.com/android/compose-samplesThank you for taking the time to read this article. If you have questions, please submit them in the comments section below. We will be delighted to discuss them with you.
