Using the PopupWindow class in Android apps
I need to display some data in a popup window in an Android app. After a brief search on the web I decided to go with the PopupWindow class, but I couldn’t find any good example of how to use it.
There seems to be a lot of questions out on the web about how to work with the PopupWindow, so I thought I should post an example showing how I solved it under Android 2.2 (Froyo).
Create a layout for your PopupWindow
Create an XML layout file that defines the PopupWindow UI just as you do for other UI’s like activities. The only thing to think about here is that the first container element that you define (LinearLayout, AbsoluteLayout etc) needs to have an id defined, as we need to reach it from code later on.
For reference this is how the layout for my PopupWindow is defined, it’s created in a file named popup_layout.xml. You can see the id on the LinearLayout element on row 2 (popup_element).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/popup_element"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#444444"
android:padding="10px"
android:orientation="vertical">
<TextView style="@style/PageHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Transfering data" />
<TextView style="@style/Header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Status" />
<TextView android:id="@+id/server_status_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Awaiting answer..."
android:paddingLeft="10sp" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center_horizontal|bottom">
<Button android:id="@+id/end_data_send_button"
style="@style/Button"
android:drawableLeft="@drawable/stop_button"
android:drawablePadding="3sp"
android:layout_centerHorizontal="true"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
After this is done, it’s time to write some code.
Initiating and creating the PopupWindow
At first we need to initialize the layout, and for that we need to inflate it, then we use it to create our PopupWindow, after that all we need to do is show it.
private PopupWindow pw;
private void initiatePopupWindow() {
try {
//We need to get the instance of the LayoutInflater, use the context of this activity
LayoutInflater inflater = (LayoutInflater) ConfirmActivity.this
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//Inflate the view from a predefined XML layout
View layout = inflater.inflate(R.layout.popup_layout,
(ViewGroup) findViewById(R.id.popup_element));
// create a 300px width and 470px height PopupWindow
pw = new PopupWindow(layout, 300, 470, true);
// display the popup in the center
pw.showAtLocation(layout, Gravity.CENTER, 0, 0);
mResultText = (TextView) layout.findViewById(R.id.server_status_text);
Button cancelButton = (Button) layout.findViewById(R.id.end_data_send_button);
makeBlack(cancelButton);
cancelButton.setOnClickListener(cancel_button_click_listener);
} catch (Exception e) {
e.printStackTrace();
}
}
private OnClickListener cancel_button_click_listener = new OnClickListener() {
public void onClick(View v) {
pw.dismiss();
}
};
On row 8-9 you can see the inflater being called to create the layout. Take care when defining the parameters here, the first one is the reference to the layout xml file, the second parameter is the reference to the id of the element in that file that you want to use as root node for the created PopupWindow.
Then just call the initiatePopupWindow from whatever piece of code you need to trigger the PopupWindow from.
Referencing elements in the PopupWindow
If you want to reference elements in the PopupWindow that you have created, you need to use the layout that was used when creating that window. You can see how I store references to the result text for later use, and define the cancel button and set it’s OnClickListener on rows 15, 16 and 18.
Good luck and happy coding!
More ways to show information to users in Android
You can also use the AlertDialog window, check out this article for an example.
Awesome post on the PopupWindow class!
I’ve been looking at a lot of examples and how-to’s on the web and none explained it as good as your article.
For those needing a popup window I really recommend this post 🙂
Cheers,
Burt
Thx!
Yeah I had the same problem myself at first, no real good examples of the PopupWindow that explained the entire procedure.
/A
how we can show popups on two different clicks and separate location?
Short and Nice 🙂
Great example of Android’s PopupWindow class, well worth the read!
/Cheers
Thanks!
Nice writeup on the popup windows class!
Great of the popup window write! 😀
Great post about popupwindow, thanks!
Yw 🙂
Thank you very much for your post….. it helped me a lot….
Glad to hear that, good luck! 🙂
Hi! I need your help. I try to create a popup window with a Text Edit inside them. But when a touch the Text Edit, the app cash. I think that is because i dont set the context correctly.
What does the exception say?
android.view.WindowManager$BadTokenException: Unable to add window — token android.view.ViewRoot$W@44767fc8 is not valid; is your activity running?
What does your view creation look like and what’s the name of your Activity?
See this post.
http://stackoverflow.com/questions/4829718/exception-when-focusing-a-edittext-in-a-popupwindow-running-on-device/5820571#5820571
My solution was create my own popup.
Reading that thread makes me belive it’s a bug in the framework.
Are you running on a tab as well?
No, i run in a Galaxy Europa.
you set popup window focus before showing that
If it’s a question then no, I didn’t do that.
Pingback: Using AlertDialog as popup notifier
Is it possible to hidden the layout under a popup window?
my problem is: I have an image in main activity and when I click on it, the popup is shown, but I can see some part of the image that is in background, can I hide that layout? if yes, how?
thanks
Have you tried setting the dim amount and blur behind flag?
I used that technique in this article about using AlertDialog: http://www.mobilemancer.com/2011/01/22/using-alertdialog-as-popup-notifier/
Hey,
Thanks for this awesome post, it realy helped me alot!
I’m trying to create a PopUp Window with a Spinner in it.
It Pops up fine, and every button works, but when I Click on the Spinner, the App forcecloses.
Is there anyway I can realize a Popup window including a Spinner?
Hi,
As far as I know there shouldn’t be a problem using a Spinner on a PopUp.
Sounds more like something might be wrong with the Spinner setup, check LogCat and see if you are getting an exception and what it says?
Thanks a lot Bro.
I went to many blogs and tried a lot of stuff but what I really need was in your post. 🙂
Glad to have helped! 🙂
Hi, nice example.
I would just add something i found usefull : make the view autosize.
layout.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
pw = new PopupWindow(layout, layout.getMeasuredWidth(), layout.getMeasuredHeight(), true);
Thanks for the comment, I’ll add to the code as soon as I get a few minutes spare 🙂
Happy coding!
Nice example. Thanks a lot.
You might also add this:
myPopup.setBackgroundDrawable(new BitmapDrawable());before showing the popup.
It allows the user to close the popup via backpress
can i use this pop up window to show my 4 videos when tapped?
Hi
I don’t know how to thank you for this, you’re great man 😉
Gee, thanks! 🙂
Happy coding!!
Pingback: Using AlertDialog as popup notifier | mobilemancer
Hi, can you please tell if scrolling is possible in popup window ? I have a popup window with multiple layout ( relative layout as the main parent layout), But when i wrap it under a scroll view, the popup window is not working. Later I read in few posts stating that scroll is not possible in popup window. Please let me know. 🙂
Not sure if that is doable. Maybe some one else reading knows?
Good luck!
Hi,.. nice tutorial. I need your help. I need to create a popup activity like the photos opening on new activity when we click on posts in facebook. But please help me to code.
Thanks!
Coding you have to do on your own though, maybe if you got more specific questions you could get help.
(ViewGroup) findViewById(R.id.popup_element) is null
Not much to go on, but I’d gamble on popup_element not being defined properly.
would u help me how we use callout with popup window plse
i wanted popup window with head arrow like callout in map works
but i dont to use drawable for that…is possible to use callout with popup window
Sorry, I don’t do any Android coding any more. But maybe some other helpful reader can help you 🙂
Good luck!
How can i use DP instead of PX?
// create a 300px width and 470px height PopupWindow
pw = new PopupWindow(layout, 300, 470, true);
Not sure, maybe some other user can help you?
Happy coding!
Thanks a lot
Thanks a lot
You’re most welcome 🙂
Hi,
Thanks for this clear sample.
I have just one problem that’s bugging me : when I inflate my layout passing layout xml reference and root view ((ViewGroup)findViewById(R.id.rootLayoutIdForPopup)), it crashes because the findViewById for my root view return null.
Why would it be ?
Pingback: Blur or dim background when Android PopupWindow active - ExceptionsHub