Build a Connection Indicator in Jetpack Compose — Step by Step

4 min readJan 30, 2025

Introduction

In modern mobile applications, indicating the network connection status is crucial for user experience. However, Jetpack Compose does not offer a built-in Connection Indicator component. When searching for existing solutions, I found that most implementations were either outdated or lacked the flexibility I needed. Thus, I decided to create my own, leveraging Jetpack Compose’s Canvas API to ensure an efficient and customizable solution.

In this article, I’ll walk you through the process of building a Connection Indicator using Jetpack Compose and Canvas, explain why Canvas is the best approach, and show you how to integrate it into your own project.

Why Canvas in Jetpack Compose?

While Jetpack Compose provides powerful UI components, custom drawing with Canvas gives you full control over how elements are rendered. Instead of stacking multiple Composables, using Canvas allows us to draw directly on the screen, optimizing performance and flexibility.

With Canvas, we can:

Draw custom UI elements like bars, circles, or waves.
Apply smooth animations.
Optimize rendering performance by avoiding unnecessary recompositions.

Now, let’s dive into how we can implement a Connection Indicator from scratch.

Implementing the Connection Indicator

Step 1: Setting Up the Composable

We start by creating a ConnectionIndicator composable that will handle the drawing logic.

@Composable
fun ConnectionIndicator(
    modifier: Modifier = Modifier,
    level: Int = 3,
    barCount: Int = 4,
    height: Dp = ConnectionIndicatorDefaults.HEIGHT,
    barWidth: Dp = ConnectionIndicatorDefaults.BAR_WIDTH,
    barGap: Dp = ConnectionIndicatorDefaults.BAR_GAP,
    activeColor: Color = ConnectionIndicatorDefaults.BAR_COLOR_ACTIVE,
    inactiveColor: Color = ConnectionIndicatorDefaults.BAR_COLOR_INACTIVE
) {
    val safeLevel = level.coerceIn(0, barCount)
    val calculatedWidth = (barWidth + barGap) * barCount + (barCount + 1).dp

    val animatedColors = List(barCount) { i ->
        animateColorAsState(
            targetValue = if (i < safeLevel) activeColor else inactiveColor,
            animationSpec = tween(durationMillis = 500, easing = FastOutSlowInEasing),
            label = "BarColorAnimation"
        ).value
    }

    Canvas(
        modifier
            .offset(y = (-1 * height.value / 8).dp)
            .height(height)
            .width(calculatedWidth)
    ) {
        val canvasWidth = size.width
        val canvasHeight = size.height

        val barWidthPx = barWidth.toPx()
        val minHeight = canvasHeight / 6f
        val stepWidth = canvasWidth / barCount
        val stepHeight = (canvasHeight - minHeight) / barCount

        for (i in 0..<barCount) @Composable {
            val endY = minHeight + stepHeight * i
            val startX = barWidthPx / 2 + 2f
            drawLine(
                start = Offset(x = (i * stepWidth) + startX, y = canvasHeight),
                end = Offset(x = (i * stepWidth) + startX, y = canvasHeight - endY),
                color =  animatedColors[i],
                cap = StrokeCap.Round,
                strokeWidth = barWidthPx
            )
        }
    }
}

This function creates a bar-style Connection Indicator that dynamically adjusts based on the provided parameters.

Use Cases & Examples

The Connection Indicator component is useful in various scenarios, such as:

Messaging apps: Show connection status for real-time chat.
Streaming services: Display connection strength before playing a video.
IoT applications: Indicate device connectivity status.
Network diagnostic tools: Provide a visual cue for network stability.

Here’s an example of how it can be used in an application:

@Composable
fun MyApp() {
    ConnectionIndicator(
        level = 4,
        barCount = 5,
        height = 2.dp,
        barWidth = 4.dp,
        barGap = 2.dp,
        activeColor = Color.Green,
        inactiveColor = Color.Gray
    )
}

By tweaking the level parameter, developers can dynamically update the strength indicator based on network status.

Adding to Your Project

To integrate Connection Indicator into your project, simply add the following dependency to your build.gradle.kts:

implementation("com.cabir:connectionindicator:1.0.0-SNAPSHOT")

Additionally, ensure your settings.gradle.kts includes the correct repository:

dependencyResolutionManagement {
    repositories {
        maven(url = "https://maven.pkg.github.com/burhancabiroglu/connection-indicator")
    }
}

This allows you to easily add the component without any manual setup.

Demo

Here’s how the Connection Indicator looks in action:

Why Choose This Component?

If you are looking for a lightweight, customizable, and easy-to-integrate Connection Indicator for Jetpack Compose, this component is the best choice. Here’s why:

Optimized for performance: Uses Canvas for efficient rendering.
Fully customizable: Modify colors, bar count, sizes, and animations.
Easy integration: Just add the dependency and use it in your Compose UI.
Open source & extendable: You can contribute and extend its functionalities.

Conclusion

Jetpack Compose and Canvas provide a powerful way to create custom UI components. By leveraging Canvas, we achieved:

Full customization over the appearance.
Optimized performance by reducing recomposition overhead.
Lightweight integration into existing projects.

If you’re building a Compose-based app and need a Connection Indicator, give this library a try! 🚀

Check out the GitHub repository for more details and contributions: Connection Indicator GitHub.

Happy coding! 🎨