Composable not focusable or interactable

[asimkaka-coder]

Is there a way to keep composable interactable or focusable when using balloon with overlay? @skydoves can you please answer this?

[faraz152]

The answer depends on what you mean by "interactable" — there are two different cases:

---

Case 1 — You want the content INSIDE the balloon to be interactable (buttons, text fields, etc.)

This works by default. Composables inside balloonContent { } receive touch events normally. If they are not responding, make sure you have:

rememberBalloonBuilder {
    setFocusable(true) // Required for keyboard/text input inside balloon
    setDismissWhenTouchOutside(false) // Prevent accidental dismissal while interacting
}

---

Case 2 — You are using the overlay (setIsOverlayEnabled(true)) and want the background UI to remain interactive

The overlay is designed to block background touches — that is intentional (it highlights the balloon anchor). However, you can create a transparent "hole" around the anchor so touches pass through:

rememberBalloonBuilder {
    setIsOverlayEnabled(true)
    setOverlayColor(Color.parseColor("#88000000")) // semi-transparent
    setOverlayShape(BalloonOverlayShape.CIRCLE)    // transparent hole around anchor
    setOverlayPadding(8f)                          // extra breathing room in the hole
    setOnBalloonOverlayClickListener { balloon.dismiss() }
}

If you need specific background views to be touchable through the overlay, the current Balloon API does not support arbitrarily-shaped pass-through regions — in that case, skip the overlay and implement the dimming manually with a Box + alpha modifier in your Compose layout, which gives you full control over which composables remain interactive.