Android - PopupWindow above a specific view

Question

I am developing an application for Android and I am using a popup window when the user clicks a specific menu bar object(consisting of small images lined up horizontally) on the bottom of the screen.

On the click I want the popup window to be anchored to the top-left corner of the view that was clicked and be shown on top.

The only methods that seem to be relevant are showAsDropDown(View anchor, int xoff, int yoff) and showAtLocation(View parent, int gravity, int x, int y). The problem with showAsDropDown is that it is anchored to the bottom-left corner of the view.

Is there another way to implement this?

score 48 · Accepted Answer · answered Mar 26 '15 at 17:24

popupWindow.showAtLocation(...) actually shows the window absolutely positioned on the screen (not even the application). The anchor in that call is only used for its window token. The coordinates are offsets from the given gravity.

What you actually want to use is:

popupWindow.showAsDropDown(anchor, offsetX, offsetY, gravity);

This call is only available in API 19+, so in earlier versions you need to use:

popupWindow.showAsDropdown(anchor, offsetX, offsetY);

These calls show the popup window relative to the specified anchor view. Note that the default gravity (when calling without specified gravity) is Gravity.TOP|Gravity.START so if you are explicitly using Gravity.LEFT in various spots in your app you will have a bad time :)

That's the one I was looking for. All you need to calculate is the offset according to the ui element you use.. — Alpaslan, Jun 22 '15 at 08:50

score 17 · Answer 2 · answered Jan 11 '21 at 19:16

I wrote a sample Kotlin code which will show a PopupWindow above the anchor view.

private fun showPopupWindow(anchor: View) {
    PopupWindow(anchor.context).apply {
        isOutsideTouchable = true
        val inflater = LayoutInflater.from(anchor.context)
        contentView = inflater.inflate(R.layout.popup_layout, null).apply {
            measure(
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
            )
        }
    }.also { popupWindow ->
        // Absolute location of the anchor view
        val location = IntArray(2).apply {
            anchor.getLocationOnScreen(this)
        }
        val size = Size(
            popupWindow.contentView.measuredWidth,
            popupWindow.contentView.measuredHeight
        )
        popupWindow.showAtLocation(
            anchor,
            Gravity.TOP or Gravity.START,
            location[0] - (size.width - anchor.width) / 2,
            location[1] - size.height
        )
    }
}

100% working solution but it shows some background color how to remove that ? — Gulab Sagevadiya, Feb 06 '23 at 09:42
@GulabSagevadiya You need to set/clear popup window background color: `popupWindow.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))` — Vikas Patidar, Feb 07 '23 at 17:13

theSlyest · Answer 3 · 2018-12-26T16:09:06.133

10

You just needed to move the popupWindow by the height of its anchor using the yoff parameter in the showAsDropDown(View anchor, int xoff, int yoff) syntax.

popupWindow.showAsDropDown(anchor, 0, -anchor.getHeight()+popupView.getHeight);

Also, be aware that if the max height allowed to anchor does not allow for the transformation, the popup might not show up properly.

edited Dec 26 '18 at 16:09

answered Apr 06 '16 at 16:07

theSlyest

429
1
6
16

Please elaborate on how this code answers the question (this answer was in the Low Quality Posts review queue). – JAL Apr 06 '16 at 21:10

score 7 · Answer 4 · edited Nov 15 '14 at 09:46

7

popupWindow.showAtLocation(anchor, Gravity.BOTTOM, 0, anchor.getHeight());

edited Nov 15 '14 at 09:46

David

15,894
22
55
66

answered Nov 15 '14 at 09:28

Farhan C K

1,159
18
35

You need to add parent view instead of anchor and also need to pass the exact location of the popup where you want to place it. – Er.Rohit Sharma Nov 22 '19 at 10:47

Ho Luong · Answer 5 · 2017-12-23T03:49:54.727

6

I have this code: PopupWindow below a specific view (Gravity End) for all sdk version.

        // display the popup[![enter image description here][1]][1]
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            mPopupWindow.showAsDropDown(v, 0, 0, Gravity.END);
        } else {
            mPopupWindow.showAsDropDown(v, v.getWidth() - mPopupWindow.getWidth(), 0);
        }

Here View v is ImageButton Calendar.

edited Dec 23 '17 at 03:49

answered Mar 16 '17 at 04:00

Ho Luong

726
8
12

This worked great for me. I was using showAtLocation for SDK >= 24, but it didn't work for all devices. This worked for every device I tested so far. – FerDensetsu Sep 13 '18 at 16:38

score 5 · Answer 6 · answered May 29 '13 at 16:01

5

The one you want to use is showAtLocation(...). You specify the anchor view (the one the user clicks), and position it relative to that via the gravity parameter and offsets. Think of the gravity parameter like the PopupWindow is almost like a child view and the parent view is like a container layout.

You should be able to put Gravity.LEFT | Gravity.TOP as the parameter.

answered May 29 '13 at 16:01

Wenger

989
2
12
35

12

No such luck, the PopupWindow will show top-left corner of the window with that line (popupWindow.showAsLocation(anchor, Gravity.TOP|Gravity.LEFT, 0, 0)). – Apr 18 '14 at 18:50

score 4 · Answer 7 · edited Mar 14 '18 at 08:16

4

you can display the popup always above the anchor by following

popupWindow.showAsDropDown(anchor, 0, -anchor.getHeight()-popupView.getHeight);

edited Mar 14 '18 at 08:16

rollstuhlfahrer

3,988
9
25
38

answered Mar 14 '18 at 08:11

winit mazhar

41
1

1

not working. Popup is showing from the bottom of screen – Mohit Rajput Sep 09 '20 at 11:29

score 3 · Answer 8 · answered Sep 19 '20 at 06:19

Sample example:

ScrollView scrollView = new ScrollView(context);
popupWindow.setContentView(scrollView);
scrollView.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),                 
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
int he=scrollView.getMeasuredHeight();
popupWindow.showAsDropDown(items,0, -items.getHeight()-he);

Meet Bhatt · Answer 9 · 2021-10-25T11:57:33.767

After using so many solutions, I got one solution to display the PopupWindow above any View in Kotlin.

To display the popup window above the view, you can use the showAsDropDown() function.

popUp.showAsDropDown(v, 0, (-0.2 * v.height).roundToInt(), Gravity.CENTER)

With:

v: View(Anchor)
0: offSetX
(-0.2 * v.height).roundToInt(): offSetY
Gravity.CENTER: Gravity

For example: https://medium.com/@bhattmeet887/popupwindow-above-the-specific-view-kotlin-ab1a199581eb

android developer · Answer 10 · 2022-06-16T12:30:19.267

Here's using the android-x solution, which should even work in case you have a floating UI using SAW permission (System Alert Window) :

@SuppressLint("InflateParams")
private fun showPopupWindow(anchor: View) {
    val popupWindow = PopupWindow(anchor.context)
    popupWindow.isFocusable = true
    popupWindow.inputMethodMode = PopupWindow.INPUT_METHOD_NOT_NEEDED
    popupWindow.contentView = LayoutInflater.from(anchor.context).inflate(R.layout.popup_layout, null)
    PopupWindowCompat.showAsDropDown(popupWindow, anchor, 0, 0, Gravity.BOTTOM)
}

This is for alignment of bottom-left.

If you need bottom-center, you could use this, for example:

@SuppressLint("InflateParams")
private fun showPopupWindow(anchor: View) {
    val popupWindow = PopupWindow(anchor.context)
    popupWindow.isFocusable = true
    popupWindow.inputMethodMode = PopupWindow.INPUT_METHOD_NOT_NEEDED
    val inflater = LayoutInflater.from(anchor.context)
    val contentView = inflater.inflate(R.layout.popup_layout, null)
    contentView.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
    popupWindow.contentView = contentView
    PopupWindowCompat.showAsDropDown(popupWindow, anchor, (anchor.measuredWidth - contentView.measuredWidth) / 2, 0, Gravity.BOTTOM)
}

score -5 · Answer 11 · answered Jul 24 '13 at 13:50

-5

popupwindow.showAsDropDown(anchor,0, -125); this thing work for me

answered Jul 24 '13 at 13:50

Vishal Mokal

792
1
5
22

this is specific only for your case – Androidz Jan 22 '20 at 13:20
Do not hardcode an specify value only for your case – qianlv Feb 19 '21 at 08:27

Android - PopupWindow above a specific view

11 Answers11

Linked