How to create popups in Android

In this post I’ll show you how to create a popup window in Android. A popup window can be used to display an arbitrary view, and it can be very convenient in cases when you want to display an additional information, but don’t want or it’s not appropriate to launch a new activity or  display a dialog.

The final output should look like this:

Android Popup

We will use the PopupWindow class to create the popup.

One thing I would like to mention is that we want the popup to be attached to the button that opened it. For example if the “Show Popup” button from the screenshot above would be positioned in the middle of the screen, we want the popup window stick to the button’s position. To achieve this, first we should get the button’s “x” and “y” position on the screen, and pass them to the popup window. Then will we use an offset to align the popup properly – a bit to the right, and a bit down, so it won’t overlap the whole button.

Another think I would like to mention is that we will use a 9 patch background image for the popup, so it will look more fancy. But of course you can skip it and put any background you want, or no background at all.

9 patch image:

9 patch image

Put the image into res/drawable directory.


1. Create a new project in Eclipse:
Project: TestPopup
Activity: TestPopupActivity

2. Open layout/main.xml file and add a button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
android:orientation="vertical" >

   android:text="Show Popup" />


3. Create a new layout file: layout/popup_layout.xml that defines the layout of popup.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
   android:orientation="vertical" >

   android:textAppearance="?android:attr/textAppearanceLarge" />

   android:text="This is a simple popup" />

   android:text="Close" />



4. And now the most interesting part. Open the TestPopupActivity and fill it with below code. Carefully read the comments to understand what’s going on.

public class TestPopupActivity extends Activity {

//The "x" and "y" position of the "Show Button" on screen.
Point p;

public void onCreate(Bundle savedInstanceState) {

   Button btn_show = (Button) findViewById(;
   btn_show.setOnClickListener(new OnClickListener() {
     public void onClick(View arg0) {

       //Open popup window
       if (p != null)
       showPopup(TestPopupActivity.this, p);

// Get the x and y position after the button is draw on screen
// (It's important to note that we can't get the position in the onCreate(),
// because at that stage most probably the view isn't drawn yet, so it will return (0, 0))
public void onWindowFocusChanged(boolean hasFocus) {

   int[] location = new int[2];
   Button button = (Button) findViewById(;

   // Get the x, y location and store it in the location[] array
   // location[0] = x, location[1] = y.

   //Initialize the Point with x, and y positions
   p = new Point();
   p.x = location[0];
   p.y = location[1];

// The method that displays the popup.
private void showPopup(final Activity context, Point p) {
   int popupWidth = 200;
   int popupHeight = 150;

   // Inflate the popup_layout.xml
   LinearLayout viewGroup = (LinearLayout) context.findViewById(;
   LayoutInflater layoutInflater = (LayoutInflater) context
   View layout = layoutInflater.inflate(R.layout.popup_layout, viewGroup);

   // Creating the PopupWindow
   final PopupWindow popup = new PopupWindow(context);

   // Some offset to align the popup a bit to the right, and a bit down, relative to button's position.
   int OFFSET_X = 30;
   int OFFSET_Y = 30;

   // Clear the default translucent background
   popup.setBackgroundDrawable(new BitmapDrawable());

   // Displaying the popup at the specified location, + offsets.
   popup.showAtLocation(layout, Gravity.NO_GRAVITY, p.x + OFFSET_X, p.y + OFFSET_Y);

   // Getting a reference to Close button, and close the popup when clicked.
   Button close = (Button) layout.findViewById(;
   close.setOnClickListener(new OnClickListener() {

     public void onClick(View v) {

54 thoughts on “How to create popups in Android

  1. Hello! Your blog is great. I’m a total beginner in web design, but hope that one day I’ll also write apps for android.
    If you have any ideas what I should start with, please write it on my blog.
    Keep codin’😀

  2. hi! have u tried this already using GridView? when an item is clicked the popup will be displayed. your reply will be a great help for me tnx.

    1. There isn’t any difference showing the pop-up when a button is clicked, or when an item from GridView is clicked.

      Just call showPopup() in onItemClicked and it should work.

      1. hi again! it worked! but how do i access the text view from the popup_layout.xml and set some text when the button is clicked dynamically. i’ve been trying lot of things that may work regarding my question but all of them is giving me an error.. pls help.. thanks in advance…

  3. hai i when i switched from portrait mode to landscape mode pop up view is disappeared i want retain that popup. please tell me what i need to implement?

  4. Joanne :

    hi again! it worked! but how do i access the text view from the popup_layout.xml and set some text when the button is clicked dynamically. i’ve been trying lot of things that may work regarding my question but all of them is giving me an error.. pls help.. thanks in advance…

    Any controls you want to access from the Popup should be accessed through a reference to the layout of the pop-up.
    This line from the “showPopup()” inflates the layout:

    View layout = layoutInflater.inflate(R.layout.popup_layout, viewGroup);

    Then you would access any controls like TextViews, Buttons through the “layout”, ex:

    TextView text = (TextView)layout.findViewById(;

    notice, “layout.findViewById()”

  5. Thanks. I found this needed some tweaking of margins, and some density-independence calculations to look right. Here’s a way to set the popup size in a general way at the start of showPopup().
    // Convert density independent pixels to pixels
    float density = context.getResources().getDisplayMetrics().density;
    int popupWidth = Math.round(200 * density);
    int popupHeight = Math.round(150 * density);

  6. LinearLayout viewGroup = (LinearLayout) context.findViewById(;

    View layout = layoutInflater.inflate(R.layout.popup_layout, viewGroup);

    In eclipse its giving me error,
    In 1st line i.e
    a red line appears on popup and the below error is :-
    (popup cannot be resolved or not a field)

    In 2nd line R.layout.popup_layout
    a red line appears on popup_layout and the below error is :-
    (popup cannot be resolved or not a field)

    please tell me the solution as soon as possible

  7. Helpful post. Thanks for that.
    I am a beginner on the mobile app and your post helped me a lot but i need one more thing:
    let’s keep the presented case: i need the popup to block all the content from the activity( same way as a dialog box, with background color), except the show popup button.
    Basically the popup should have the picture as background but also a background color and fill everything starting below the show popup button.
    Please if you have any ideas on how i could implement this i would appreciate.

  8. I had to rename the 9 patch file after downloading (I assume that is an HTTP server configuration issue) and create the drawable directory, but after that, the project built w/o error. But when I run, I see no text on the Close button, the text, foreground and background of the popup are all out of alignment. Not to mention: the text is very hard to see against the popup background, since they are both shades of grey. On the emulator, (emulating a Nexus 7 but with 8″ screen), I cannot see the difference at all. On the Nook Color HD, I can see the difference, but as I mentioned, everything it out of alignment. Is this sample code making assumptions about screen size/density or about text size?

  9. Hi Veaceslav.
    Thanks a lot for the great, easy to follow tutorial !

    Question : (I haven’t started looking yet, and will do so now, but)
    How would you suggest making the size of popup more dynamic ?
    Maybe doing something like : “Fixed Height with Dynamic width” ?

    1. Hi,

      If you need the popup to take as much space as its content takes, then you could specify the window layout mode to WRAP_CONTENT:


      and remove: popup.setWidth() and popup.setHeight()

  10. may want to revisit the example as this line doesn’t do what you might think…
    LinearLayout viewGroup = (LinearLayout) context.findViewById(;

  11. I just put in this class in my file, and my entire code in the file breaks, errors everywhere in the file (except in the class I just added)…
    Is there something dangeriously wrong with this class?

    class TestPopupActivity extends Activity {
    Point p;
    if (mKCSWindowView == null)
    Button popupButton = (Button) mKCSWindowView.findViewById(;
    popupButton.setOnClickListener(new OnClickListener() {
    public void onClick(View arg0) {

    // Open popup window
    if (p != null)
    showPopup(audio_routing.this, p);

  12. Thanks for this man! I just implemented it in my app and it works great. I’m a beginner and will use this to further my knowledge of how the class relations work.

  13. LinearLayout viewGroup = (LinearLayout) context.findViewById(;
    this is useless becouse findViewById returns null. doesn’t exists in context so result is null.

  14. Hi thanks for the tutorial. I was wondering how to generate a popup to trigger when i open an application like whatsapp.

    I’ve been told I don’t read full messages often and I haven’t found an app that would force me to do it. hence thinking of making something of my own.

    Looking at your blog i will need to build the layout of the popup and most likely tweak the popup activity itself. I’m thinking what i’m wanting would be active all the time and just wait for me to click “whatsapp” to display the pop up.

    I hope you can guide me. haven’t seen any guides to do this so far.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s