How to add a lightweight Tooltip popup in your Android Application

2020-09-23

Diwakar Singh

Diwakar Singh, android, kotlin, nayan, tooltip, user interaction

A tooltip is a small descriptive message that appears near a view when users long press the view or hover their mouse over it. This is useful when your app uses an icon to represent an action or piece of information to save space in the layout.
You’ve surely seen tooltips in some of your favorite products—like Facebook, Twitter, and Slack. When used with consideration, tooltips can be a powerful UI (User Interaction) pattern that will guide your users to take action in your product. A good tooltip can be a great thing indeed.Below, we’ll look at how to design tooltips on Android 8.0 (API level 26) and higher that enhance the user experience and add value.

Tooltips

A lightweight popup like tooltips, fully customizable with arrow and animations.The balloon is one of the most popular libraries.

Let’s start

Add below codes to your build.gradle file:

dependencies {
    //tooltips
    implementation "com.github.skydoves:balloon:1.2.2"
}

Create a balloon instance using kotlin in your activity class

val balloon = Balloon.Builder(baseContext).apply {
    setWidthRatio(0.5f)
    setHeight(65)
    setArrowSize(10)
    setArrowOrientation(ArrowOrientation.BOTTOM)
    setArrowVisible(true)
    setArrowPosition(0.5f)
    setTextSize(15f)
    setCornerRadius(4f)
    setAlpha(0.9f)
    setTextColor(ContextCompat.getColor(baseContext, R.color.white))
    setBalloonAnimation(BalloonAnimation.FADE)
    setLifecycleOwner(this@MainActivity)
    setAutoDismissDuration(5_000L)
}

Specific size

We can set the specific size of the balloon regardless size of the contents.

1 2	balloon.setWidth(220) balloon.setHeight(160)

We can also set the width according to the ratio of the horizontal screen’s size.

1 2	balloon.setWidthRatio(0.5f) balloon.setHeight(65)

We can control the content size of the balloon using padding of the content.

1
2
3

balloon.setPadding(6)
balloon.setPaddingLeft(8)
balloon.setPaddingTop(12)

If the location of the tooltip is located at the boundaries on the screen, the tooltip will be stick to the end of the screen. In that case, we can resolve by giving margins to the balloon.

1
2
3

ballon.setMargin(12)
ballon.setMarginLeft(14)
ballon.setMarginRight(14)

Arrow Composition

We can customize the arrow on the tooltip popup. We can customize the visibility, size, position based on ratio, orientation and drawable.

balloon.setArrowVisible(true)
balloon.setArrowSize(10)
balloon.setArrowPosition(0.8f)
balloon.setArrowOrientation(ArrowOrientation.BOTTOM)
balloon.setArrowDrawable(ContextCompat.getDrawable(context, R.drawable.arrow))

Text Composition

We can customize the text on the tooltip popup.

balloon.setText("Facebook Login")
balloon.setTextSize(15f)
balloon.setTextTypeface(Typeface.BOLD)
balloon.setTextColor(ContextCompat.getColor(context,R.color.white_87))

Listeners (OnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener)

We can listen to the balloon popup is clicked, dismissed or touched outside using listeners.

balloon.setOnBalloonClickListener(new OnBalloonClickListener() {
  @Override
  public void onBalloonClick() {
    // doSomething;
  }
});

balloon.setOnBalloonDismissListener(new OnBalloonDismissListener() {
  @Override
  public void onBalloonDismiss() {
    // doSomething;
  }
});
balloon.setOnBalloonOutsideTouchListener(new OnBalloonOutsideTouchListener() {
  @Override
  public void onBalloonOutsideTouch() {
    // doSomething;
  }
});

And we are done!

Tooltip

References

Some good reads you may like:-

p.s. Nayan is a platform that offers high precision services for traffic monitoring and road safety. Check out our website

Android