Android – Interoperability in Jetpack Compose
Creating UI in Jetpack compose is fun, but it can be a blocker if we want to write some functionalities in our app which is not yet supported by Jetpack compose(like Google maps, admob) or some third-party libraries which are still not been migrated to Compose. Fortunately, Jetpack Compose supports various Interoperability APIs to make use of Traditional Views in Jetpack compose and vice versa. In this article, we will make use of Traditional android Views in our composable.
- Knowledge of Jetpack Compose.
- Knowledge of Kotlin
- Knowledge of Android’s View.
We’ll first start by writing a simple compose app which increases a counter button.
Step by Step implementation
Step 1: Create a New Project
Start by creating a new compose project in Android Studio. Open Android studio and create a new compose project.
Step 2: Working with MainActivity.kt file
Create a composable function and write the following code to make the counter.
and call this composable from set content
When we run this app we see a simple counter app that increases the counter when we click the button
Now we will add Traditional Views in this composable function and increase the same counter. Before that, we need to create ids.xml to use id to reference the view to update data in Textview. Expand res > values and right-click on it, new> Value Resource file and create a file named ids.xml and write this could.
add this code below Button Composable to add View in Composable
Now when you run this app you will see LinearLayout, TextView, Button from View System below compose Text and Button.
When you click any button it will increase the same counter and update the Composable and TextView.
Using AndroidView we can also add libraries like google maps, Admob in our compose app.