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.
Create layout/main.xml file and add a button:
<?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:background="#CCC" android:orientation="vertical" > <Button android:id="@+id/show_popup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Popup" /> </LinearLayout>
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="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:id="@+id/popup" android:layout_height="wrap_content" android:background="@drawable/popup_bg" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Popup" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textView2" android:layout_marginTop="5dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is a simple popup" /> <Button android:id="@+id/close" android:layout_marginTop="10dp" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Close" /> </LinearLayout>
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; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button btn_show = (Button) findViewById(R.id.show_popup); btn_show.setOnClickListener(new OnClickListener() { @Override 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)) @Override public void onWindowFocusChanged(boolean hasFocus) { int[] location = new int[2]; Button button = (Button) findViewById(R.id.show_popup); // Get the x, y location and store it in the location[] array // location[0] = x, location[1] = y. button.getLocationOnScreen(location); //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(R.id.popup); LayoutInflater layoutInflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View layout = layoutInflater.inflate(R.layout.popup_layout, viewGroup); // Creating the PopupWindow final PopupWindow popup = new PopupWindow(context); popup.setContentView(layout); popup.setWidth(popupWidth); popup.setHeight(popupHeight); popup.setFocusable(true); // 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(R.id.close); close.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { popup.dismiss(); } }); } }
