Using AndroidView in Jetpack Compose

22.04.2023 — Jetpack Compose, AndroidView, Kotlin — 1 min read

Jetpack Compose is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. However, there may be times when you need to use traditional Android Views within your Composable hierarchy. This is where the AndroidView API comes in.

AndroidView allows you to display an Android View within your Composable hierarchy. You can use it to integrate existing custom views or to use views that are not yet available as Composables.

Displaying a ProgressBar

Here's an example of how to use AndroidView to display a ProgressBar within a Composable:

1import androidx.compose.foundation.layout.Box
2import androidx.compose.foundation.layout.fillMaxSize
3import androidx.compose.material.Text
4import androidx.compose.runtime.Composable
5import androidx.compose.ui.Alignment
6import androidx.compose.ui.Modifier
7import androidx.compose.ui.viewinterop.AndroidView
8
9@Composable
10fun ProgressBarExample() {
11    Box(
12        contentAlignment = Alignment.Center,
13        modifier = Modifier.fillMaxSize()
14    ) {
15        AndroidView(
16            factory = { context ->
17                ProgressBar(context).apply {
18                    isIndeterminate = true
19                }
20            }
21        )
22        Text(text = "Loading...")
23    }
24}

In this example, we create a Box with its content aligned to the center. Inside the Box, we use AndroidView to create and display a ProgressBar. We also add a Text composable to display some text below the progress bar.

The factory parameter of AndroidView is a lambda that takes a Context and returns a View. In this case, we create and return a new ProgressBar. We can also configure the view by calling its methods, such as setting isIndeterminate to true.

Updating an Android View

Here's an example that shows how to use the update parameter of AndroidView:

1import androidx.compose.foundation.layout.Box
2import androidx.compose.foundation.layout.fillMaxSize
3import androidx.compose.material.Slider
4import androidx.compose.material.Text
5import androidx.compose.runtime.Composable
6import androidx.compose.runtime.mutableStateOf
7import androidx.compose.runtime.remember
8import androidx.compose.ui.Alignment
9import androidx.compose.ui.Modifier
10import androidx.compose.ui.viewinterop.AndroidView
11
12@Composable
13fun SeekBarExample() {
14    val progress = remember { mutableStateOf(0f) }
15
16    Box(
17        contentAlignment = Alignment.Center,
18        modifier = Modifier.fillMaxSize()
19    ) {
20        AndroidView(
21            factory = { context ->
22                SeekBar(context).apply {
23                    max = 100
24                    setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
25                        override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
26                            this@SeekBarExample.progress.value = progress / 100f
27                        }
28
29                        override fun onStartTrackingTouch(seekBar: SeekBar?) {}
30
31                        override fun onStopTrackingTouch(seekBar: SeekBar?) {}
32                    })
33                }
34            },
35            update = { seekBar ->
36                seekBar.progress = (progress.value * 100).toInt()
37            }
38        )
39        Slider(
40            value = progress.value,
41            onValueChange = { progress.value = it },
42            modifier = Modifier.align(Alignment.BottomCenter)
43        )
44    }
45}

In this example, we create a Box with its content aligned to the center. Inside the Box, we use AndroidView to create and display a SeekBar. We also add a Slider composable below the seek bar.

The factory parameter of AndroidView works the same way as in the previous example. We create and return a new SeekBar, and set its max value and OnSeekBarChangeListener.

The update parameter of AndroidView is a lambda that takes the View created by the factory and allows you to update it. In this case, we update the progress of the seek bar whenever the value of our progress state changes.

We use a remember block to create a mutable state for the progress value. This state is shared between the seek bar and the slider. When the user interacts with either of them, the progress value is updated and both views are updated accordingly.

That's it! With the update parameter of AndroidView, we can easily update an Android View whenever our state changes.