Who's using Balloon?

Balloon in Jetpack Compose

💝 Sponsors

Including in your project

Gradle

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

How to Use

Create Balloon with Kotlin

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

Create Balloon with Kotlin DSL

Create Balloon with Java

Show up Balloon

balloon.showAlignTop(anchor:View)// shows the balloon on an anchor view as the top alignment.balloon.showAlignTop(anchor:View, xOff:Int, yOff:Int)// shows top alignment with x-off and y-off.balloon.showAlignBottom(anchor:View)// shows the balloon on an anchor view as the bottom alignment.balloon.showAlignBottom(anchor:View, xOff:Int, yOff:Int)// shows bottom alignment with x-off and y-off.balloon.showAlignEnd(anchor:View)// shows the balloon on an anchor view as the end alignment.balloon.showAlignEnd(anchor:View, xOff:Int, yOff:Int)// shows end alignment with x-off and y-off.balloon.showAlignStart(anchor:View)// shows the balloon on an anchor view as the start alignment.balloon.showAlignStart(anchor:View, xOff:Int, yOff:Int)// shows start alignment with x-off and y-off.balloon.showAsDropDown(anchor:View)// shows the balloon as a dropdown without any alignments.balloon.showAsDropDown(anchor:View, xOff:Int, yOff:Int)// shows no alignments with x-off and y-off.balloon.showAtCenter(anchor:View, xOff:Int, yOff:Int, centerAlign:BalloonCenterAlign.TOP)// shows the balloon over the anchor view (overlap) as the center aligns.

myButton.showAlignTop(balloon)

Dismiss Balloon

balloon.dismiss()balloon.dismissWithDelay(1000L)// dismisses 1000 milliseconds later when the popup is shown

Balloon.Builder(context)// dismisses automatically 1000 milliseconds later when the popup is shown.   .setAutoDismissDuration(1000L)...

Show up Balloon Sequentially

customListBalloon  .relayShowAlignBottom(customProfileBalloon, circleImageView)// relay to customListBalloon  .relayShowAlignTop(customTagBalloon, bottomNavigationView,130,0)// relay to customProfileBalloon// show sequentially customListBalloon-customProfileBalloon-customTagBallooncustomListBalloon.showAlignBottom(anchorView)

coroutineScope.launch {  customListBalloon.awaitAlignBottom(anchorView)  customProfileBalloon.awaitAlignBottom(circleImageView,0,0)  customTagBalloon.awaitAlignTop(bottomNavigationView,130,0)}

Parallel Displaying

lifecycleScope.launch {// shows balloons at the same time  awaitBalloons {// dismissing of any balloon dismisses all of them. Default behaviour    dismissSequentially=false    textView.alignTop(balloonAlignTop)    textView.alignStart(balloonAlignStart)    textView.alignEnd(balloonAlignEnd)    textView.alignBottom(balloonAlignBottom)  }// shows another group after dismissing the previous group.  awaitBalloons {    dismissSequentially=true// balloons dismissed individually    imageView.alignTop(balloonAlignTop)    imageView.alignStart(balloonAlignStart)    imageView.alignEnd(balloonAlignEnd)    imageView.alignBottom(balloonAlignBottom)  }}

Width and height

Specific size

balloon.setWidth(220)// sets 220dp width size.balloon.setHeight(160)// sets 160dp height size.

Wrap Content Sizes

balloon.setWidth(BalloonSizeSpec.WRAP)// sets width size depending on the content's size.balloon.setHeight(BalloonSizeSpec.WRAP)// sets height size depending on the content's size.

Depending on Screen Size

balloon.setWidthRatio(0.5f)// sets width as 50% of the horizontal screen's size.

Padding

balloon.setPadding(6)// sets 6dp padding to all directions (left-top-right-bottom)balloon.setPaddingLeft(8)// sets 8dp padding to content's left.balloon.setPaddingTop(12)// sets 12dp padding to content's top.

Margin

.setMargin(12)// sets the margin on the balloon all directions..setMarginLeft(14)// sets the left margin on the balloon..setMarginRight(14)// sets the right margin on the balloon.

Auto-sized text

.setTextSize(15f).setMinAutoSizeTextSize(14f).setMaxAutoSizeTextSize(18f).setEnableAutoSized(true)

Arrow Composition

.setIsVisibleArrow(true)// sets the visibility of the arrow..setArrowSize(10)// sets the arrow size..setArrowSize(BalloonSizeSpec.WRAP)// sets arrow size depending on the original resources' size..setArrowPosition(0.8f)// sets the arrow position using the popup size's ratio (0 ~ 1.0).setArrowOrientation(ArrowOrientation.TOP)// sets the arrow orientation. top, bottom, left, right.setArrowDrawable(ContextCompat.getDrawable(context,R.drawable.arrow))// sets the arrow drawable.

ArrowPositionRules

// Align the arrow position depending on an anchor.// if `arrowPosition` is 0.5, the arrow will be located in the middle of an anchor..setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)// Align the arrow position depending on the balloon popup body.// if `arrowPosition` is 0.5, the arrow will be located in the middle of the tooltip..setArrowPositionRules(ArrowPositionRules.ALIGN_BALLOON)// default

ArrowOrientationRules

// Align depending on the position of an anchor.// For example, `arrowOrientation` is ArrowOrientation.TOP and// we want to show up the balloon under an anchor using the `Balloon.showAlignBottom`.// However, if there is not enough free space to place the tooltip at the bottom of the anchor,// tooltips will be placed top of the anchor and the orientation of the arrow will be `ArrowOrientation.BOTTOM`..setArrowOrientationRules(ArrowOrientationRules.ALIGN_ANCHOR)// default// Align to fixed ArrowOrientation value..setArrowOrientationRules(ArrowOrientationRules.ALIGN_FIXED)

Text Composition

.setText("You can edit your profile now!").setTextSize(15f).setTextTypeface(Typeface.BOLD).setTextColorResource(R.color.colorAccent)).setTextGravity(Gravity.START)

.setTextIsHtml(true)

TextForm

val textForm=TextForm.Builder(context)  .setText("Edit your profile here!")  .setTextColorResource(R.color.white_87)  .setTextSize(14f)  .setTextTypeface(Typeface.BOLD)  .build()val balloon=Balloon.Builder(context)  .setTextForm(textForm)...

Icon Composition

.setIconSpace(10)// sets right margin of the icon..setIconSize(20)// sets size of the icon..setIconDrawable(ContextCompat.getDrawable(context,R.drawable.ic_edit))// sets a drawable resource.

IconForm

val iconForm=IconForm.Builder(context)  .setDrawable(ContextCompat.getDrawable(context,R.drawable.arrow))  .setIconColor(ContextCompat.getColor(context,R.color.skyblue))  .setIconSize(20)  .setIconSize(12)  .build()val balloon=Balloon.Builder(context)  .setIconForm(iconForm)...

OnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener

.setOnBalloonClickListener {Toast.makeText(context,"clicked",Toast.LENGTH_SHORT).show() }.setOnBalloonDismissListener {Toast.makeText(context,"dismissed",Toast.LENGTH_SHORT).show() }.setOnBalloonOutsideTouchListener {Toast.makeText(context,"touched outside",Toast.LENGTH_SHORT).show() }

Custom Balloon Layout

.setLayout(R.layout.my_balloon_layout)

val balloon=Balloon.Builder(context)  .setLayout(R.layout.layout_custom_profile)  .setArrowSize(10)  .setArrowOrientation(ArrowOrientation.TOP)  .setArrowPosition(0.5f)  .setWidthRatio(0.55f)  .setHeight(250)  .setCornerRadius(4f)  .setBackgroundColor(ContextCompat.getColor(this,R.color.black))  .setBalloonAnimation(BalloonAnimation.CIRCULAR)  .setLifecycleOwner(lifecycleOwner)  .build()

val button:Button=  balloon.getContentView().findViewById(R.id.button_edit)button.setOnClickListener {Toast.makeText(context,"Edit",Toast.LENGTH_SHORT).show()  balloon.dismiss()}

Stroke

val balloon=Balloon.Builder(context)..  .setBalloonStroke(        color=Color.White.toArgb(),        thickness=4f,      )  .build()

Persistence

balloon.setPreferenceName("MyBalloon")// sets preference name of the Balloon.balloon.setShowCounts(3)// show-up three of times the popup. the default value is 1.balloon.runIfReachedShowCounts {// do something after the preference showing counts is reached the goal.  }

balloon.clearAllPreferences()

Avoid Memory leak

.setLifecycleOwner(lifecycleOwner)

Lazy initialization

classCustomActivity :AppCompatActivity() {privateval profileBalloon by lazy {BalloonUtils.getProfileBalloon(context=this, lifecycleOwner=this) }// ...}

classCustomActivity :AppCompatActivity() {privateval profileBalloon by balloon<ProfileBalloonFactory>()// ...}

classProfileBalloonFactory :Balloon.Factory() {overridefuncreate(context:Context,lifecycle:LifecycleOwner):Balloon {return createBalloon(context) {      setLayout(R.layout.layout_custom_profile)      setArrowSize(10)      setArrowOrientation(ArrowOrientation.TOP)      setArrowPosition(0.5f)      setWidthRatio(0.55f)      setHeight(250)      setCornerRadius(4f)      setBackgroundColor(ContextCompat.getColor(context,R.color.background900))      setBalloonAnimation(BalloonAnimation.CIRCULAR)      setLifecycleOwner(lifecycle)    }  }}

BalloonOverlay

balloon.setIsVisibleOverlay(true)// sets the visibility of the overlay for highlighting an anchor.balloon.setOverlayColorResource(R.color.overlay)// background color of the overlay using a color resource.balloon.setOverlayPadding(6f)// sets a padding value of the overlay shape internally.balloon.setOverlayPaddingColorResource(R.color.colorPrimary)// sets color of the overlay padding using a color resource.balloon.setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE)// default is fade.balloon.setDismissWhenOverlayClicked(false)// disable dismissing the balloon when the overlay is clicked.

balloon.setOverlayShape(BalloonOverlayOval)// default shapeballoon.setOverlayShape(BalloonOverlayRect)balloon.setOverlayShape(BalloonOverlayCircle(radius=36f))balloon.setOverlayShape(BalloonOverlayRoundRect(12f,12f))

balloon.setOverlayPosition(Point(x, y))// sets a specific position of the overlay shape.

BalloonAnimation

BalloonAnimation.NONEBalloonAnimation.FADEBalloonAnimation.OVERSHOOTBalloonAnimation.ELASTICBalloonAnimation.CIRCULAR

BalloonHighlightAnimation

BalloonHighlightAnimation.NONEBalloonHighlightAnimation.HEARTBEATBalloonHighlightAnimation.SHAKEBalloonHighlightAnimation.BREATHBalloonHighlightAnimation.ROTATE.setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE)

.setBalloonHighlightAnimation(BalloonHighlightAnimation.ROTATE).setBalloonRotationAnimation(BalloonRotateAnimation.Builder().setLoops(2).setSpeeds(2500).setTurns(INFINITE).build())

Balloon builder methods

Balloon in Jetpack Compose

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

Modifier.balloon

// Create and remember a builder for the Balloon.val builder= rememberBalloonBuilder {  setArrowSize(10)  setArrowPosition(0.5f)  setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)  setWidth(BalloonSizeSpec.WRAP)  setHeight(BalloonSizeSpec.WRAP)  setPadding(12)  setMarginHorizontal(12)  setCornerRadius(8f)  setBackgroundColorResource(R.color.skyBlue)  setBalloonAnimation(BalloonAnimation.ELASTIC)}// Create and remember the balloon state.val balloonState= rememberBalloonState(builder)Button(  modifier=Modifier    .align(Alignment.Center)    .balloon(balloonState) {Text(text="Now you can edit your profile!")    },  onClick= { balloonState.showAlignTop() },) {Text(text="Show Balloon")}

BalloonState

val balloonState= rememberBalloonState(builder)// Show the balloonballoonState.showAlignTop()balloonState.showAlignBottom()balloonState.showAlignStart()balloonState.showAlignEnd()balloonState.showAtCenter()// Dismiss the balloonballoonState.dismiss()// Check if the balloon is showingif (balloonState.isShowing) {// ...}

Various Balloon Positions

val balloonState= rememberBalloonState(builder)Column {Button(    modifier=Modifier.balloon(balloonState) {Text("Tooltip content") },    onClick= { balloonState.showAlignTop() },// Shows above the button  ) {Text(text="Show Top")  }Button(    modifier=Modifier.balloon(balloonState) {Text("Tooltip content") },    onClick= { balloonState.showAlignBottom() },// Shows below the button  ) {Text(text="Show Bottom")  }Button(    modifier=Modifier.balloon(balloonState) {Text("Tooltip content") },    onClick= { balloonState.showAlignStart() },// Shows at the start of the button  ) {Text(text="Show Start")  }Button(    modifier=Modifier.balloon(balloonState) {Text("Tooltip content") },    onClick= { balloonState.showAlignEnd() },// Shows at the end of the button  ) {Text(text="Show End")  }}

Auto-Display Balloon on Layout Ready

val balloonState= rememberBalloonState(builder)LaunchedEffect(Unit) {  balloonState.showAlignTop()}Button(  modifier=Modifier.balloon(balloonState) {Text(text="Now you can edit your profile!")  },  onClick= { balloonState.showAlignTop() },) {Text(text="Show Balloon")}

Compose Extensions

val builder= rememberBalloonBuilder {  setText("Now you can edit your profile!")  setArrowSize(10)  setWidthRatio(1.0f)  setHeight(BalloonSizeSpec.WRAP)  setArrowOrientation(ArrowOrientation.BOTTOM)  setArrowPosition(0.5f)  setPadding(12)  setMarginHorizontal(12)  setTextSize(15f)  setCornerRadius(8f)  setTextColor(Color.White)// Set text color with Compose color.  setBackgroundColor(Color.White)// Set background color with Compose color.  setIconDrawableResource(R.drawable.ic_edit)}

Listening to Balloon Events

val balloonState= rememberBalloonState(builder)// Set click listenerballoonState.setOnBalloonClickListener {// Handle balloon click}// Set dismiss listenerballoonState.setOnBalloonDismissListener {// Handle balloon dismiss}// Set outside touch listenerballoonState.setOnBalloonOutsideTouchListener { view, event->// Handle outside touch}

Find this library useful? ❤️

License

Copyright 2019 skydoves (Jaewoong Eum)Licensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the License.You may obtain a copy of the License at   http://www.apache.org/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed under the License is distributed on an "AS IS" BASIS,WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions andlimitations under the License.