Overlay¶

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

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
)