Android PopupWindow with Tooltip Arrow
AndroidPopupwindowAndroid Problem Overview
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:
But I get something like this:
Android Solutions
Solution 1 - Android
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.
Solution 2 - Android
If you are looking for a simple library, I created one based on PopupWindow.
Solution 3 - Android
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>
Solution 4 - Android
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");
Solution 5 - Android
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,
Solution 6 - Android
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.
Solution 7 - Android
You can create your own custom tooltip by using xml only. I wrote a demo https://github.com/nidhinek/android-tooltip based on PopupWindow
Solution 8 - Android
I also create library in Compose to do something like this: https://github.com/MarcinKap/Compose-Animation-Tooltips-Library