Skip to content

Overlay

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 supports displaying an overlay over the entire screen except for the anchor view, creating a spotlight effect that highlights the anchor.

Basic Overlay

Balloon.Builder(context)
    .setIsVisibleOverlay(true)
    .setOverlayColorResource(R.color.overlay)
    .setOverlayPadding(6f)
    .setOverlayPaddingColorResource(R.color.colorPrimary)
    .setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE)
    .setDismissWhenOverlayClicked(false)

Overlay Shapes

You can customize the shape of the highlighted area around the anchor.

Oval (Default)

Balloon.Builder(context)
    .setOverlayShape(BalloonOverlayOval)

Circle

Balloon.Builder(context)
    .setOverlayShape(BalloonOverlayCircle(radius = 36f))

Rectangle

Balloon.Builder(context)
    .setOverlayShape(BalloonOverlayRect)

Rounded Rectangle

Balloon.Builder(context)
    .setOverlayShape(BalloonOverlayRoundRect(12f, 12f))

You can also set individual corner radii:

Balloon.Builder(context)
    .setOverlayShape(
        BalloonOverlayRoundRect(
            topLeftRadius = 8f,
            topRightRadius = 8f,
            bottomLeftRadius = 16f,
            bottomRightRadius = 16f
        )
    )

Preview

OVAL CIRCLE RECT ROUNDRECT
Balloon example Balloon example Balloon example Balloon example

Overlay Position

Set a specific position for the overlay shape:

Balloon.Builder(context)
    .setOverlayPosition(Point(x, y))

Overlay Animation

BalloonOverlayAnimation.NONE
BalloonOverlayAnimation.FADE  // default

Overlay Padding

Add padding around the highlighted area:

Balloon.Builder(context)
    .setOverlayPadding(8f)  // padding in dp
    .setOverlayPaddingColorResource(R.color.paddingColor)  // padding color

Overlay Interaction

Dismiss When Overlay Clicked

Balloon.Builder(context)
    .setDismissWhenOverlayClicked(true)  // dismiss balloon when overlay is clicked

Overlay Click Listener

Balloon.Builder(context)
    .setOnBalloonOverlayClickListener {
        // handle overlay click
    }

Overlay Touch Listener

Balloon.Builder(context)
    .setOnBalloonOverlayTouchListener { view, event ->
        // handle overlay touch
        true  // return true if handled
    }

Multiple Anchors

You can display the overlay with multiple anchors highlighted:

balloon.showAlign(
    align = BalloonAlign.TOP,
    mainAnchor = mainView,
    subAnchorList = listOf(secondaryView1, secondaryView2),
    xOff = 0,
    yOff = 0
)