43

How do the different Gravity values effect PopupWindow.showAtLocation() in Android?

I can't find good docs on PopupWindows showAtLocation and Gravity.

Bae
  • 7,516
  • 5
  • 36
  • 42

2 Answers2

74

After hacking for a few hours trying some black magic maths to calculate centers and try to align the view using Gravity.TOP I found a post that used Gravity.CENTER. I'm collecting my findings here in the hopes it saves someone else some pain.

popupWindow.showAtLocation(anyViewOnlyNeededForWindowToken, Gravity.CENTER, 0, 0);

The view is only needed for the window token, it has no other impact on the location.

Gravity tells the layout manager where to start the coordinate system and how to treat those coordinates. I can't find the docs but hacking is showing me that:

  • CENTER uses the middle of the popup to be aligned to the x,y specified. So 0,0 is screen centered, with no adjustments for the size of the notification bar.

Gravity.CENTER 0,0

  • BOTTOM uses the bottom of the popup to be aligned to the x,y specified. So 0,0 has the popup bottom aligned with the screen bottom. If you want 10px padding then y=10 (not -10) to move the popup up the screen 10 pixels.

Gravity.BOTTOM 0,10

  • TOP uses the top of the popup to be aligned to the x,y specified. So 0,0 has the popup top aligned with the screen top. If you want 10px padding then y=10. NOTE If you are not in full screen mode then you must also make adjustments for the notification bar.

Gravity.TOP 0,48

  • Gravity.LEFT and Gravity.RIGHT should be obvious now, for my example images they are too big to fit on the screen so they are clamped to the screen size minus the padding I am using.
Bae
  • 7,516
  • 5
  • 36
  • 42
  • How to solve the problem that the popupwindow is cropped (Appears out of the screen) if I use showAsDropDown? The documentation says that this should not happen, but it does. I tried setClippingEnabled(true) followed by update() after and before I call showAsDropDown but the same problem exists. Thank you – Ashraf Alshahawy Oct 11 '18 at 23:06
20

You can change the gravity of a PopupWindow by adjusting Gravity.CENTER in the showAtLocation method:

popupWindow.showAtLocation(anyView, Gravity.CENTER, 0, 0);

The images below show the effects:

Center

  • Gravity.CENTER

PopupWindow center gravity

Edges

  • Gravity.TOP
  • Gravity.BOTTOM
  • Gravity.LEFT
  • Gravity.RIGHT

PopupWindow edge gravity

Corners

  • Gravity.TOP | Gravity.LEFT
  • Gravity.TOP | Gravity.RIGHT
  • Gravity.BOTTOM | Gravity.LEFT
  • Gravity.BOTTOM | Gravity.RIGHT

PopupWindow corner gravity

Offsets

You can further position it by changing the (x,y) offsets in

popupWindow.showAtLocation(anyView, gravity, x, y);

For example

popupWindow.showAtLocation(anyView, Gravity.BOTTOM, 0, 300);

PopupWindow bottom gravity with offsets

Code

Here is the code for the examples above. See How to make a simple Android popup window for more basic help.

int gravity = Gravity.CENTER;

LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
View popupView = inflater.inflate(R.layout.popup_window, null);
int width = LinearLayout.LayoutParams.WRAP_CONTENT;
int height = LinearLayout.LayoutParams.WRAP_CONTENT;
boolean focusable = true;
final PopupWindow popupWindow = new PopupWindow(popupView, width, height, focusable);
popupView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        popupWindow.dismiss();
        return true;
    }
});

popupWindow.showAtLocation(anyView, gravity, 0, 0);

See also

Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
  • 1
    How to solve the problem that the popupwindow is cropped (Appears out of the screen) if I use showAsDropDown? The documentation says that this should not happen, but it does. I tried setClippingEnabled(true) followed by update() after and before I call showAsDropDown but the same problem exists. Thank you – Ashraf Alshahawy Oct 11 '18 at 23:06
  • @AshrafAlshahawy, I'm not sure off hand. I recommend that you make a new question for this and include screenshot and your code. – Suragch Oct 12 '18 at 05:05
  • @AshrafAlshahawy im having the same issue. Did you ever resolve it? – YellowJ Aug 28 '19 at 01:36