Compose Extensions

Balloon 1.x (View)

This page documents Balloon 1.7.6, the last release of the View based library. For the current version see the Balloon 2.0.0 documentation and the Migration guide.

Balloon provides extension functions for Balloon.Builder that allow you to use Compose Color values directly.

Color Extensions

Arrow Color

Set the arrow color using a Compose Color:

val builder = rememberBalloonBuilder {
    setArrowColor(Color(0xFF4A90E2))
}

Background Color

Set the balloon background color:

val builder = rememberBalloonBuilder {
    setBackgroundColor(Color.DarkGray)
}

Text Color

Set the text color:

val builder = rememberBalloonBuilder {
    setTextColor(Color.White)
}

Icon Color

Set the icon drawable color:

val builder = rememberBalloonBuilder {
    setIconColor(Color.Yellow)
}

Overlay Color

Set the overlay background color:

val builder = rememberBalloonBuilder {
    setOverlayColor(Color.Black.copy(alpha = 0.6f))
}

Overlay Padding Color

Set the overlay padding color:

val builder = rememberBalloonBuilder {
    setOverlayPaddingColor(Color.Blue)
}

Complete Example

@Composable
fun ThemedBalloon() {
    val primaryColor = MaterialTheme.colorScheme.primary
    val onPrimaryColor = MaterialTheme.colorScheme.onPrimary
    val surfaceColor = MaterialTheme.colorScheme.surface

    val builder = rememberBalloonBuilder {
        setArrowSize(10)
        setArrowPosition(0.5f)
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        setPadding(12)
        setCornerRadius(8f)

        // Use Compose colors directly
        setBackgroundColor(primaryColor)
        setTextColor(onPrimaryColor)
        setArrowColor(primaryColor)
        setOverlayColor(Color.Black.copy(alpha = 0.5f))
    }

    val balloonState = rememberBalloonState(builder)

    Button(
        onClick = { balloonState.showAlignTop() },
        modifier = Modifier.balloon(balloonState) {
            Text(
                text = "Themed tooltip",
                color = onPrimaryColor,
                modifier = Modifier.padding(8.dp)
            )
        }
    ) {
        Text("Show Balloon")
    }
}

Using with Material Theme

The extensions work seamlessly with Material Theme colors:

val builder = rememberBalloonBuilder {
    val colors = MaterialTheme.colorScheme

    setBackgroundColor(colors.primaryContainer)
    setTextColor(colors.onPrimaryContainer)
    setArrowColor(colors.primaryContainer)
    setOverlayColor(colors.scrim.copy(alpha = 0.5f))
}

Alpha Support

Compose colors with alpha channels are fully supported:

val builder = rememberBalloonBuilder {
    setBackgroundColor(Color.Black.copy(alpha = 0.8f))
    setOverlayColor(Color.Black.copy(alpha = 0.4f))
}