# Network Quality Indicator

It's important to indicate to users when the connection quality isn't good.
Each participants (`ParticipantState`) includes the `connectionQuality` attribute.
In addition you can also monitor your own connection using `call.state.networkQuality`.

You can available the `NetworkQualityIndicator` composable component and it is integrated into video render components by default:

![Network Quality Indicator](@video/android/_assets/cookbook/network-quality-indicator.png)

## Customization

Here's a small compose example to render a custom connection quality icon for each participant:

```kotlin
@Composable
fun NetworkQualityIndicator(
    modifier: Modifier,
    networkQuality: NetworkQuality
) {
    val color = lerp(Color.Red, Color.Green, networkQuality.quality)

    Canvas(modifier = modifier.size(16.dp)) {
        drawCircle(color)
    }
}
```

You can easily swap out the standard connection quality indicator with your own.

```kotlin
CallContent(
    modifier = Modifier.background(color = VideoTheme.colors.appBackground),
    videoRenderer = { modifier, call, participant, style ->
        ParticipantVideo(
            modifier = modifier,
            call = call,
            participant = participant,
            style = style,
            connectionIndicatorContent = {
                NetworkQualityIndicator(
                    modifier = Modifier
                        .align(Alignment.BottomEnd)
                        .padding(8.dp),
                    networkQuality = it
                )
            }
        )
    },
 ..
)
```

Now, you will see the custom network quality indicator like the result below:

![Network Quality Indicator](@video/android/_assets/cookbook/network-quality-indicator-customize.png)

## Connection Unstable

In terms of better UX designs, you can display a simple message or snack bar to your users and let them know the network status is unstable.

```kotlin {9-26}
CallContent(
    modifier = Modifier.background(color = VideoTheme.colors.appBackground),
    videoRenderer = { modifier, call, participant, style ->
        ParticipantVideo(
            modifier = modifier,
            call = call,
            participant = participant,
            style = style,
            connectionIndicatorContent = { networkQuality ->
                val me by call.state.me.collectAsState()
                if (me?.sessionId == participant.sessionId && networkQuality is NetworkQuality.Poor) {
                    Snackbar(
                        modifier = Modifier
                            .padding(8.dp)
                            .fillMaxWidth()
                            .background(VideoTheme.colors.appBackground)
                            .align(Alignment.BottomStart),
                    ) {
                        Text(text = "Please check out your network status!")
                    }
                }

                NetworkQualityIndicator(
                    networkQuality = NetworkQuality.Poor(),
                    modifier = Modifier.align(Alignment.BottomEnd)
                )
            }
        ),
        ..,
)
```

Now, you will see the custom network quality snack bar like the result below:

![Network Quality Indicator](@video/android/_assets/cookbook/network_quality_poor.png)

---

This page was last updated at 2025-08-15T14:16:34.853Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/android/ui-cookbook/network-quality-indicator/](https://getstream.io/video/docs/android/ui-cookbook/network-quality-indicator/).