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.
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:
1 | dependencies { |
Create a balloon instance using kotlin in your activity class
1 | val balloon = Balloon.Builder(baseContext).apply { |
Specific size
We can set the specific size of the balloon regardless size of the contents.
1 | balloon.setWidth(220) |
We can also set the width according to the ratio of the horizontal screen’s size.
1 | balloon.setWidthRatio(0.5f) |
We can control the content size of the balloon using padding of the content.
1 | balloon.setPadding(6) |
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 | ballon.setMargin(12) |
Arrow Composition
We can customize the arrow on the tooltip popup. We can customize the visibility, size, position based on ratio, orientation and drawable.
1 | balloon.setArrowVisible(true) |
Text Composition
We can customize the text on the tooltip popup.
1 | balloon.setText("Facebook Login") |
Listeners (OnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener)
We can listen to the balloon popup is clicked, dismissed or touched outside using listeners.
1 | balloon.setOnBalloonClickListener(new OnBalloonClickListener() { |
And we are done!
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