How To Add A ToolTip To Android ActionBar MenuItem

The answer to that is there is no way. However, an open source library created by Niek Haarman proved quite useful and a good alternative to be able to display tooltips when you click on a MenuItem in the ActionBar.

Take a look at this screenshot.

actionbar_menuItem_tooltip
And this is how I did it.

The tooltipView variable and my custom made addTooltip() method contain the same code that is found in the sample source provided by Niek’s library. That’s it! Simple, right?

However, we need to do a few tweaks because the current library does not provide margins on both left and right sides so if your text is pretty long, your tooltip will take the whole screen width and that would make it look unappealing, right?

The workaround to that is to modify the tooltip.xml of the library and add the attribute android:layout_marginRight=”10dp” in the main layout container which is RelativeLayout.

The next thing to do is to modify the ToolTipView class to set certain width when the app is viewed in a large screen device. Even if we have margins on both left and right, a very long horizontal tooltip still does not look nice, right? There should at least be an estimated maximum width limit and here is how I did it.

in the ToolTipView class there is a method called init(). Change that and use this instead.

Looking at the code, you will notice I added checking to see if the device has a large screen or not and if its orientation is in portrait or landscape mode. This is equally important because I do not want my tooltips’ width to fill the horizontal screen area, only limiting it to a certain width.

In this case, if it is a tablet under landscape orientation, I make sure the maximum size will be 1/3 or the horizontal screen area.

If it is only a smart phone, I only take into account its landscape orientation and set a maximum width limit of half the size of the horizontal screen area.

If your app takes into account orientation changes, you need to make sure your tooltip points to the correct MenuItem. This is how I did it.

Also, a very important thing to note is that since we are dealing with the ActionBar’s MenuItem, you could be using a DrawerLayout as the main container. Do not place the tooltip layout there. Based on the sample XML layout code of the supertooltips library, place your DrawerLayout in the area where the comment line “Rest of Layout” is located.

If you place the tooltip tag in your DrawerLayout, chances are your left menu will not work because the DrawerLayout only accepts 2 children, the left menu and the content area.

There! Now you got yourself a tooltip when an ActionBar MenuItem is clicked.

Related Posts Plugin for WordPress, Blogger...

2 comments

  1. Hi! impressive article, thanks.
    However, addTooltip() is not found in the library and the example source code at all, so that I don’t understand how your function addTooltipBulb() is implemented at all. Could you add up the part? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *