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.

Prerequisites:

1. Knowledge of Jetpack Compose.
2. Knowledge of Kotlin
3. 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.

Kotlin

@Composable
fun InteroperabilityExample() {
    // A count state variable
    var counter by remember {
        mutableStateOf(0)
    }

    // Column
    Column(
        Modifier.fillMaxSize(),
        // center the children
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        // Text Composable showing current counter
        Text("Counter in Compose= $counter")
        Text(text = "This text is a composable")

        // Button to change the counter
        Button(onClick = { counter++ }) {
            Text(text = "Compose button to increase counter")
        }
    }
}

and call this composable from set content

Kotlin

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeInteropTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                      // Out Composable function
                      InteroperabilityExample()
                }
            }
        }
    }
}

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.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item type="id" name="counter1" />
</resources>

add this code below Button Composable to add View in Composable

Kotlin

AndroidView(
         actory = { context ->

                // Linear layout in view system
                LinearLayout(context).apply {

                    // setting orientation to vertical
                    orientation = LinearLayout.VERTICAL

                    // adding text view to layout
                    // using [addView] provided by [ViewGroup]
                    addView(

                        // TextView from View system
                        // creating text view and using apply
                        // scope function to add properties to text view
                        TextView(context).apply {
                            // setting text
                            text = "This is a Traditional text view "
                            // aligning text to center
                            textAlignment = TextView.TEXT_ALIGNMENT_CENTER
                            // setting text color
                            setTextColor(resources.getColor(R.color.black))

                        })

                    // adding text to display Counter
                    addView(
                        // Another textView from View System
                        TextView(context).apply {
                            // setting text
                            text = "Counter in view = $counter"
                            // assign Id to text view
                            id = R.id.counter1
                            // aligning text to center
                            textAlignment = TextView.TEXT_ALIGNMENT_CENTER
                            // setting text color
                            setTextColor(resources.getColor(R.color.black))

                        })

                    // Add another view to layout : Button
                    addView(

                        android.widget.Button(context).apply {
                            // setting text
                            text = "Traditional button to increase counter"
                            // setting text color
                            setTextColor(resources.getColor(R.color.white))
                            // set background color
                            setBackgroundColor(resources.getColor(R.color.purple_500))
                            // some padding to button
                            setPadding(20, 20, 20, 20)
                            // on click listener
                            setOnClickListener {
                                counter++
                            }

                        })
                }
            },
            // The callback to be invoked after the layout is inflated.
            update = {
                // update counter when count changes
                it.findViewById<TextView>(R.id.counter1).text = "Counter is $counter"
            },
            // we can use modifier in AndroidView
            // setting green border
            modifier = Modifier.border(3.dp, Color.Green)
        )

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.