Android PopupWindow with Tooltip Arrow

Question

I've seen a lot of questions about removing the border of a PopupWindow by passing null or new Drawable() to setBackgroundDrawable(). I'm having the opposite problem. I want a border around my PopupWindow, preferably with a tooltip arrow pointing to my anchor. Currently, my PopupWindow has no border. I've tried adjusting the margins, the background in the xml, the width and height of the layout, listview, and listview rows to no avail. Can someone please help me get a border and an image on the top? I'm trying to stick with the android SDK with this.

popup_menu_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"    
    android:orientation="vertical" >

    <com.github.jeremiemartinez.refreshlistview.RefreshListView
        android:id="@+id/popup_menu_list_listview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_white" />

</LinearLayout>

Java

private void displayPopupMenu() {
        LayoutInflater layoutInflater = getLayoutInflater();
        View popupView = layoutInflater.inflate(R.layout.popup_menu_list, null);        
        final PopupWindow popupWindow = new PopupWindow(popupView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);       
        RefreshListView myListView = (RefreshListView) popupView.findViewById(R.id.popup_menu_list_listview);       
        mAdapter = new myAdapter(this, getAdapterData());       
        myListView.setAdapter(mAdapter);            
        popupWindow.showAsDropDown(mMyAnchor);      
    }

I just grabbed these as examples, but I want something like this where the popup points to the anchor:

enter image description here

But I get something like this:

enter image description here

Edited with example of desired look of PopupWindow – Lee Jan 15 '14 at 21:22 — Lee, Jan 15 '14 at 21:22

score 65 · Accepted Answer · edited Mar 31 '17 at 03:30

65

There are many libraries and codes available into Market. Links are given below:

This is the QuickAction UI pattern. Take a look at:

Another alternative would be "super-tooltips":

https://github.com/nhaarman/supertooltips

Here's a demo of it:

https://play.google.com/store/apps/details?id=com.haarman.supertooltips

From that first link/example looks like below image. These are just demos, but you can customize as per your requirement.

enter image description here

edited Mar 31 '17 at 03:30

Kia

124
1
1
10

answered Jan 16 '14 at 04:07

M D

47,665
9
93
114

Sir , the link u gave its says dependency in eclipse – May 02 '14 at 07:36
https://github.com/nhaarman/supertooltips THis is the link I dont know how to add dependency – May 02 '14 at 07:36
@tushar.narang first you need to add this library in your workspace and then reference library in your project – M D May 02 '14 at 07:38
Sir m relatively new , can u gimme a link to do this – May 02 '14 at 07:43
For **SuperToolTip** Make sure it's inside a `RelativeLayout` and not `LinearLayout`. – Alaa M. Dec 07 '16 at 22:26
shame this isn't monitored anymore – spy Jan 06 '17 at 23:43
Yes this repo is 'Discontinued'. Is there anything newer made for current Android versions, or in an official Google library? – androidguy Mar 07 '17 at 03:16

score 15 · Answer 2 · answered May 12 '16 at 16:20

15

If you are looking for a simple library, I created one based on PopupWindow.

https://github.com/douglasjunior/android-simple-tooltip

Demo

answered May 12 '16 at 16:20

Douglas Nassif Roma Junior

2,070
2
27
50

Hi @Douglas Nassif Roma Junior , I have checked your library and its great. Could you please tell me how could i make it work on Dialog. Thanks – Rahul Khurana Apr 25 '17 at 08:07
The current version of sample project has an example of how to use with Dialogs. [Take a look](https://github.com/douglasjunior/android-simple-tooltip/blob/11255b06884b81973d61399c495983ec49380733/sample/src/main/java/io/github/douglasjunior/androidSimpleTooltip/sample/MainActivity.java#L219) – Douglas Nassif Roma Junior Apr 25 '17 at 20:14
Hi, It works great for API 26, but shows tooltip at wrong location on screen for APIs below 26. Can you please suggest a possible cause or fix for that? – Surendra Kumar Nov 20 '18 at 10:41
See the [known-issues](https://github.com/douglasjunior/android-simple-tooltip#known-issues) – Douglas Nassif Roma Junior Jan 24 '19 at 14:29

score 4 · Answer 3 · answered Apr 28 '17 at 16:19

You can simply use PopupWindow with view with vector background:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="20dp"
    android:viewportHeight="162"
    android:viewportWidth="196">
    <path
        android:fillColor="@color/black"
        android:pathData="M0 26.9917C0 12.0846 12.09433 0 26.99583 0L169.0042 0C183.9136 0 196 12.09104 196 26.9917L196 100.0083C196 114.9154 183.9057 127 169.0042 127L124 127L98.5 162L73 127L26.99583 127C12.08644 127 0 114.909 0 100.0083L0 26.9917" />
</vector>

Can you please post same vector image but up arrow – Priyanka Madgundi Apr 14 '18 at 12:30 — Priyanka Madgundi, Apr 14 '18 at 12:30

score 4 · Answer 4 · answered Jun 04 '20 at 08:34

For Android 8.0 (API level 26) or higher you can use:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:tooltipText="Send an email" />

And in your code:

// Kotlin
val fab: FloatingActionButton = findViewById(R.id.fab)
fab.tooltipText = "Some tooltip"

// Java
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setTooltipText("Some tooltip");

Sabeeh · Answer 5 · 2021-02-24T07:55:18.113

3

https://github.com/skydoves/Balloon

This library provides a lightweight, popup like tooltips, fully customizable with an arrows and animations. 100% Kotlin with all necessary documentation. It is actively being managed as well.

Here are some gif from their page;

another,

edited Feb 24 '21 at 07:55

answered Feb 24 '21 at 07:49

Sabeeh

1,123
9
11

score 2 · Answer 6 · answered Aug 15 '18 at 02:00

2

A more in depth answer can be found at https://github.com/florent37/ViewTooltip which allows you to control many things including the direction from your view. A discussion and some methods can be found here.

Edit: Here's an example gif:

answered Aug 15 '18 at 02:00

Jacolack

1,365
2
11
25

gradle cannot compile it – ravid rinek Oct 14 '18 at 14:10
3

Works well for position BOTTOM, but doesn't work for position TOP . – Surendra Kumar Jan 02 '19 at 13:23

score 0 · Answer 7 · answered Mar 13 '17 at 04:21

0

You can create your own custom tooltip by using xml only. I wrote a demo https://github.com/nidhinek/android-tooltip based on PopupWindow

answered Mar 13 '17 at 04:21

Nidhin

1,818
22
23

score 0 · Answer 8 · answered May 13 '22 at 07:53

0

I also create library in Compose to do something like this: https://github.com/MarcinKap/Compose-Animation-Tooltips-Library

answered May 13 '22 at 07:53

Marcin Kapcinski

109
6

Android PopupWindow with Tooltip Arrow

8 Answers8

Linked

Related