Friday, March 30, 2012

Example of using PopupWindow

android.widget.PopupWindow can be used to display an arbitrary view. The popup windows is a floating container that appears on top of the current activity.

Example of PopupWindow

Create /res/layout/popup.xml to define the view of the PopupWindow.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background="@android:color/background_light">
 <LinearLayout 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="vertical" 
     android:layout_margin="1dp"
     android:background="@android:color/darker_gray">
     >
     <LinearLayout 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical" 
      android:layout_margin="20dp">
      <TextView
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="It's a PopupWindow" />
      <ImageView
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/ic_launcher" />
      <Button
          android:id="@+id/dismiss"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="Dismiss" />
      </LinearLayout>
 </LinearLayout>
</LinearLayout>


Main activity Java code to handle the PopupWindow
package com.exercise.AndroidPopupWindow;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.PopupWindow;

public class AndroidPopupWindowActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        final Button btnOpenPopup = (Button)findViewById(R.id.openpopup);
        btnOpenPopup.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    LayoutInflater layoutInflater 
     = (LayoutInflater)getBaseContext()
      .getSystemService(LAYOUT_INFLATER_SERVICE);  
    View popupView = layoutInflater.inflate(R.layout.popup, null);  
             final PopupWindow popupWindow = new PopupWindow(
               popupView, 
               LayoutParams.WRAP_CONTENT,  
                     LayoutParams.WRAP_CONTENT);  
             
             Button btnDismiss = (Button)popupView.findViewById(R.id.dismiss);
             btnDismiss.setOnClickListener(new Button.OnClickListener(){

     @Override
     public void onClick(View v) {
      // TODO Auto-generated method stub
      popupWindow.dismiss();
     }});
               
             popupWindow.showAsDropDown(btnOpenPopup, 50, -30);
         
   }});
    }
}


main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <Button
        android:id="@+id/openpopup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Open Popup Window" />
    
</LinearLayout>

updated@2015-01-30, with demo video:

Next:
- Disable outside PopupWindow, by setFocusable(true)

Related:
- PopupMenu, for Android 3.0(API Level 11)



More examples of using PopupWindow:


38 comments:

Anonymous said...

what does the
popupWindow.showAsDropDown(rredButton, 50, -30);
code do?
What is 50 and -30?

Erik said...

it's the x, y offset of the popupWindow. Refer Here

Anonymous said...

Ok. i used that in my code and understood how it works ... BUT, i want my pop-up window to be in the CENTER of the screen and not tagged to my call Button. Is that possible?
Right now, if i have 4 buttons on screen, every pop-up window shows up in different places in the screen depending on the position of the button that calls it. I want ALL pop-up windows to be shown only in the center of the screen.
Any help is appreciated.

Erik said...

I think you can use Dialog

Rexor said...

hi there, is it possible to place a fragment in a popupWindow?

Unknown said...

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

to make the window center.

Android Dev Forums said...

How to add animation with pop up window ..??

Unknown said...

Hello, I have a problem with android Spinner when I put it in popup.xml( but only in DropDown mode) I get the folowing exception :
android.view.WindowManager$BadTokenException: Unable to add window -- token android.view.ViewRootImpl$W@42026de8 is not valid; is your activity running?
any help will be apreciated, thanks in advance.

Erik said...

hello JROUNDI Mohamed,

I can do it in android:spinnerMode="dialog" only. refer: Display Spinner inside PopupWindow.

Robert said...

Great article. Thank you for sharing it.

PopupWindow is great alternative to embedding the view into layout and switching its visibility between GONE and VISIBLE.

Unknown said...

how to set background transparent in popup window

Android Dev Forums said...

Try this..
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

Erik said...

hello Murugeswari Marimuthu,

please read PopupWindow with transparent background

Unknown said...

Sorry I didn't mean the popup background. Actually i need to make the page elements besides the popup semi transparent like light box.

Erik said...

hello Murugeswari Marimuthu,

do you means the main layout? you can also apply android:background="@android:color/transparent" on your layout, depends how you arrange your elements.

Unknown said...

Sorry,I tried your code but still not working.



Unknown said...

In android,How to Insert Auto complete text view within creating popup

Anonymous said...

Hello, I tried this and its working for me . but i want to know how to add text dynamically to the text view instead of adding text using xml.

Erik said...

To update TextView dynamically, please read Popup Window with dynamic content.

Unknown said...

hello sir, its not my problem,my problem how to integrate autocomplete textview function inside popup window. Its Possible??

Erik said...

hello Murugeswari Marimuthu,

just tried to implement AutoCompleteTextView on PopupWindow, but fail!

Unknown said...

yes eric how to fix this.

Erik said...

I FAIL to implement AutoCompleteTextView on PopupWindow!

Error of "android.view.WindowManager$BadTokenException: Unable to add window -- token android.view.ViewRootImpl$W@4205c160 is not valid; is your activity running?" when the AutoCompleteTextView try to display the dropdown list.

Unknown said...

Hi Eric how to listview onitem click listener in json android

Erik said...

what you means "json android"?

Unknown said...

Sorry Eric, Json Parsing

Unknown said...

Hi velmurugan murugesan, How to fix this? briefbrief explanation please.

Anonymous said...

Hi,
i have been trying this but not working.
when i am trying to inflate the layout my popup.xml is not recognised and it brings error that i should field popup or contant popup...
What should I do?
Help!

Anonymous said...

Great tutorial. It was easy to follow and gives you the basics so you having something to build upon.

Anonymous said...

Great tutorial. Gives you the basics so you have something to build upon. Exactly what I was looking for.

sanket said...

how to use edittext replace of textView with keyboard to be edit ! ??

androdeveloper.com said...

Thanks author, i search lot for creating text popup box for my app.
finally i found the solution via your post.

Bright u'r future said...

How to add animation to popup window?

Unknown said...

Hi you.You are used to program androi. I use androi studio version new. I dont open it and build.
Let's help me !
Thanks

Anonymous said...

Hi,
used this and it works nice! anyway, if i use this popupwindow inside more then 4 activity, my app start crashing. What could causing this?

Patooo!!! said...

Hey! Great tutorial... Thank you very much.
I have a question:
I'm develop an app which has a nav drawer on the left. It's happening that if i open the drawer, the popup shows in front of the menu list. Instead of that, i want it on the back of the drawer. Is it possible?
I have been trying so many options and i still have not solve the problem...

Unknown said...

Thank you! Very Helpfull!

Zafar said...

Hello guys, please help me to set a background color when popup window is active and when dismissed, return default color of an activity. I have followed this tutorial, everything works fine. Only need to change background of an activity.