Android PopupWindow example in Listview.

Hi All ,

By this post we are going to learn about how to use Android Popup Window in listview, gridview, Your Custom Alert etc.

Whats mean by Popup Window:
 android.widget.PopupWindow  can be used to display an arbitrary view. The popup window is a floating container that appears on top of the current activity.

I am going to explain how to use popupwindow in list view. For example in listview item you have details button means you can use this popupwindow to show those details in this window. Lets see how to do it.

Step 1 : Main.xml

You can use either list view or any other Composite listviews:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:orientation="vertical"
        >
      <ListView
          android:id="@+id/listView1"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" >
      </ListView>

      </LinearLayout>

</RelativeLayout>

Step 2 : listviewchild.xml
You can design your own custom view.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear_item"
    android:layout_width="fill_parent"
    android:layout_height="100dp"   
   
  android:gravity="right"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="15dp"       
        android:layout_toRightOf="@+id/textview_name"
        android:src="@drawable/ic_launcher" />
   
</RelativeLayout>


Step 3 :

Your MainActivity.java

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

public class MainActivity extends Activity {

    String TAG = "MainActivity.java";

    String popUpContents[];
    PopupWindow popupWindowDogs;  
    ListView listView1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
      
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView1=(ListView)findViewById(R.id.listView1);
        listView1.setAdapter(new MyAddapter(MainActivity.this)); // binding the list view.
        /*
         * initialize pop up window items list
         */
      
        // add items on the array dynamically
        // format is Company Name:: ID
        List<String> dogsList = new ArrayList<String>();
        dogsList.add("Samsung");
        dogsList.add("Google");
        dogsList.add("Yahoo");
        dogsList.add("Microsoft");

        // convert to simple array
        popUpContents = new String[dogsList.size()];
        dogsList.toArray(popUpContents);

        /*
         * initialize pop up window
         */
        popupWindowDogs = popupWindowDogs();

      
    }

    /*
     *
     */
    public PopupWindow popupWindowDogs() {

        // initialize a pop up window type
        PopupWindow popupWindow = new PopupWindow(this);

        // the drop down list is a list view
        ListView listViewDogs = new ListView(this);
      
        // set our adapter and pass our pop up window contents
        listViewDogs.setAdapter(dogsAdapter(popUpContents));
      
        // set the item click listener
        listViewDogs.setOnItemClickListener(new DogsDropdownOnItemClickListener());

        // some other visual settings
        popupWindow.setFocusable(true);
        popupWindow.setWidth(250);
        popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
      
        // set the list view as pop up window content
        popupWindow.setContentView(listViewDogs);

        return popupWindow;
    }

    /*
     * adapter where the list values will be set
     */
    private ArrayAdapter<String> dogsAdapter(String dogsArray[]) {

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, dogsArray) {

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {

                // setting the ID and text for every items in the list
                          
                String text = getItem(position);              

                // visual settings for the list item
                TextView listItem = new TextView(MainActivity.this);

                listItem.setText(text);
                listItem.setTag(position);
                listItem.setTextSize(22);
                listItem.setPadding(10, 10, 10, 10);
                listItem.setTextColor(Color.WHITE);
              
                return listItem;
            }
        };
      
        return adapter;
    }
}

Step 4:
Your Adapter class


class MyAddapter extends BaseAdapter {
        Context rContext;
        private LayoutInflater rInflater;
        private Activity activity;

        public MyAddapter(Context c) {

            rInflater = LayoutInflater.from(c);

            rContext = c;

        }     
              
        public MyAddapter(Activity imagebinding) {
            // TODO Auto-generated constructor stub

            activity = imagebinding;       
           
            rContext = imagebinding;
            rInflater = LayoutInflater.from(imagebinding);
            rContext = imagebinding;
            rInflater = (LayoutInflater) activity
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
       

           
        }
       
        @Override
        public int getCount() {
            // TODO Auto-generated method stub   
           
                       
            return 10;
        }

        @Override
        public Object getItem(int arg0) {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return 0;
        }

        @Override
        public View getView(final int position, View convertView,
                ViewGroup parent) {
            // TODO Auto-generated method stub
            convertView = rInflater.inflate(R.layout.child, null);
            final MyDat mydat = new MyDat();   
           
            mydat.imageView1=(ImageView)convertView.findViewById(R.id.imageView1);
            mydat.imageView1.setOnClickListener(new OnClickListener() {
               
                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    popupWindowDogs.showAsDropDown(v, -5, 0);
                   
                }
            });
           
            return convertView;
        }
                             
        class MyDat {
           
                   
           
            ImageView imageView1;
           
           
        }

    }
 
Step 5 :
Your Popup Windows items Click listener





You can use this if you want proceed furtherly for activity transitions.

import android.content.Context;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Toast;

public class DogsDropdownOnItemClickListener implements OnItemClickListener {
   
    @Override
    public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3) {

        // get the context and main activity to access variables
        Context mContext = v.getContext();
        MainActivity mainActivity = ((MainActivity) mContext);
       
        // add some animation when a list item was clicked
        Animation fadeInAnimation = AnimationUtils.loadAnimation(v.getContext(), android.R.anim.fade_in);
        fadeInAnimation.setDuration(10);
        v.startAnimation(fadeInAnimation);
       
        // dismiss the pop up
        mainActivity.popupWindowDogs.dismiss();
       
        // get the text and set it as the button text
       
        Toast.makeText(mContext, "Selected Positon is: " + arg2, 100).show();
       
       
    }

}
Screen Shots: 

Hope this helps you. Comments are welcome. Happy coding.