Skip to content

Overview

Balloon is a modernized and sophisticated tooltips library for Android, fully customizable with an arrow and animations. It supports both traditional Android Views and Jetpack Compose, making it versatile for any Android project.

Key Features

  • Fully Customizable: Configure arrow position, size, orientation, colors, text, icons, and more
  • Rich Animations: Support for fade, overshoot, elastic, and circular reveal animations
  • Highlight Animations: Heartbeat, shake, breath, and rotate animations while displayed
  • Overlay Support: Highlight anchor views with customizable overlay shapes
  • Jetpack Compose Support: Native Compose integration with Modifier.balloon() API
  • Lifecycle Aware: Automatically dismisses when activity/fragment is destroyed
  • Persistence: Show tooltips only once or a specific number of times
  • Sequential Display: Chain multiple balloons to show sequentially

Who's using Balloon?

Balloon hits +800,000 downloads every month around the globe!

globe

Featured on Google Dev Library

Balloon is featured on the Google Dev Library, recognized for its quality and usefulness in the Android development community.

Quick Start

Add the dependency below to your module's build.gradle file:

Maven Central

dependencies {
    implementation("com.github.skydoves:balloon:$version")
}

dependencies {
    implementation("com.github.skydoves:balloon:$version")
}

For Jetpack Compose, add the compose dependency:

dependencies {
    implementation("com.github.skydoves:balloon-compose:$version")
}

dependencies {
    implementation("com.github.skydoves:balloon-compose:$version")
}

Basic Example

Android Views

val balloon = Balloon.Builder(context)
    .setWidthRatio(1.0f)
    .setHeight(BalloonSizeSpec.WRAP)
    .setText("Edit your profile here!")
    .setTextColorResource(R.color.white)
    .setTextSize(15f)
    .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
    .setArrowSize(10)
    .setArrowPosition(0.5f)
    .setPadding(12)
    .setCornerRadius(8f)
    .setBackgroundColorResource(R.color.skyBlue)
    .setBalloonAnimation(BalloonAnimation.ELASTIC)
    .setLifecycleOwner(lifecycleOwner)
    .build()

// Show the balloon
balloon.showAlignTop(anchorView)

Jetpack Compose

val builder = rememberBalloonBuilder {
    setArrowSize(10)
    setArrowPosition(0.5f)
    setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
    setWidth(BalloonSizeSpec.WRAP)
    setHeight(BalloonSizeSpec.WRAP)
    setPadding(12)
    setCornerRadius(8f)
    setBackgroundColorResource(R.color.skyBlue)
    setBalloonAnimation(BalloonAnimation.ELASTIC)
}

val balloonState = rememberBalloonState(builder)

Button(
    modifier = Modifier.balloon(balloonState) {
        Text(text = "Edit your profile here!")
    },
    onClick = { balloonState.showAlignTop() },
) {
    Text(text = "Show Balloon")
}
Orientation: BOTTOM Orientation: TOP Orientation: START Orientation: END
FADE OVERSHOOT ELASTIC CIRCULAR