Pop-up Window in Android

How to Display A Smaller Window on Top of an Activity

The Activity screen is not the only way to interact with the user of an App. A brief message or dialog can be displayed in appropriate circumstances to ask a specific question or get specific input. Android has build in support for such small focused interactions that require immediate attention.

  • The Toast class – to display brief informational only message.
  • The Dialog class, managed by a DialogFragment – to support a flexible input that can display information and can ask for inputs or choices. There are several built in sub-classes including:
    • AlertDialog – supports buttons (from zero to three), list selections, check boxes and radio buttons.
    • ProgressDialog – supports a progress bar or wheel and supports buttons because it extends AlertDialog.
    • DatePickerDialog – supports selecting a date.
    • TimePickerDialog  – supports a time selection.
  • The PopupWindow class – allows a View to float on top of an existing activity. Suitable for custom informational messages.

These classes build their user interfaces through class methods with support from custom layouts when required. This article looks at using the PopupWindow class. What is the PopupWindow? The Android developer documention has the following class overview:

“A popup window that can be used to display an arbitrary view. The popup window is a floating container that appears on top of the current activity.”

It can be used to display extra information without needing to code another Activity. An example would be to show results at the end of a game (or end of a level), which we will be doing in the following tutorial. The steps for this example code are:

  1. Create a new project.
  2. Design the pop-up window.
  3. Add the code to load and populate the pop-up window.
  4. Call the code.

Open a Project to Add the Pop-Up Window

In this tutorial we are assuming that you have a working project in Eclipse to use as a base, either open an existing project or create a new one (if you need help see Your First Android Hello World Java Program).

Design the Layout for the Pop-Up

For this example we are going to have a pop-up to display a game’s result as gold, silver and bronze medal positions. The pop-up will have a graphic (ImageView) for each of the medals, a TextView for the winner’s name and one for the score. The images for the medals came from Open Clip Art Library user momoko. They have been resized for an Android project and you can download medals_png.zip ready for importing into a project.

Gold Medallion Silver MedallionBronze Medallion

Add a new XML file to the project’s layout folder, here we call it winners.xml. Open the file, add the medal images and TextViews, either in the XML editor or graphical designer, some interest is added to the screen by setting a blue background an adding rounded corners, this is done using a shape drawable (see Add a Border to an Android Layout):

Desiging an Android Window

Here is an example layout in XML:

And the custom background definition (create a file in the folder res/drawable called customborder.xml and add this shape definition):

Code to Load a Pop-up Window

The code to display the pop-up window will be wrapped in a function called showWinners() so that it can be called from a button press or other action. The window layout is inflated using a LayoutInflater:

The inflated layout is used to get the id of the TextViews so we can set the names of the winners and their scores, e.g. here we assume that the name of the gold medal winner is stored in the string goldWinner:

The pop-up window is created by passing in the layout and required size. We defined a size in the XML which is used here, scaled by the screens density to support different devices:

The button on the pop-up is given an OnClickListener so that the pop-up can be closed:

We will also allow a touch event outside of the pop-up to close it:

Finally display the pop-up:

Calling the Pop-up Function

The following listing is for a simple Activity with a button that has an OnCLickListener to call the showWinners() function that is described above. The names of the medal winners and there scores are simple variables, in a real App game they would come from the game results. This is the complete code for the example:

Here’s the example in action:
Example Android Pop-up Window

Bookmark this page in your browser so that you can use the code as a template for future projects that require a pop-up.

Acknowledgments

Open Clip Art Library user momoko for the medal images.

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.