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:

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

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

    ReplyDelete
  3. 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.

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

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

    to make the window center.

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

    ReplyDelete
  7. 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.

    ReplyDelete
  8. hello JROUNDI Mohamed,

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

    ReplyDelete
  9. 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.

    ReplyDelete
  10. how to set background transparent in popup window

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

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

    ReplyDelete
  13. 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.

    ReplyDelete
  14. Sorry,I tried your code but still not working.



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

    ReplyDelete
  16. 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.

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

    ReplyDelete
  18. hello Murugeswari Marimuthu,

    just tried to implement AutoCompleteTextView on PopupWindow, but fail!

    ReplyDelete
  19. 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.

    ReplyDelete
  20. Hi Eric how to listview onitem click listener in json android

    ReplyDelete
  21. what you means "json android"?

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

    ReplyDelete
  23. 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!

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

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

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

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

    ReplyDelete
  28. 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

    ReplyDelete
  29. 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?

    ReplyDelete
  30. 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...

    ReplyDelete
  31. 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.

    ReplyDelete