Index / Android / Crear PopupMenu (Ventana Emergente)

Crear PopupMenu (Ventana Emergente)

Autor jc mouse lunes, enero 5, 2015

En este tutorial crearemos una aplicación android que nos permitirá abrir un PopupMenu de donde podremos seleccionar una acción y ejecutar esa acción.

¿Qué es un Popup Menú?

Un PopupMenu en android muestra un menú en una «ventana emergente» modal anclado a una View. El menu emergente aparece debajo de la vista de anclaje si hay espacio, o encima de ella si no la hay. Esta ventana desaparece cuando se toca fuera del componente que lo llama.

Necesitas: Eclipse con SDK Android instalado

Nivel: Principiante

Tiempo: 10 minuto

Paso 1. Crea una nueva aplicación android llamado «Demo PopupMenu» deja como esta la Activity que crea por defecto «activity_main.xml»

* importante con SDK mínimo de API 11: Android 3.0 (Honeycomb)

Paso 2. Crear el menu en XML

Crea un nuevo archivo XML en RES/MENU con el nombre de «my_popupmenu.xml«, el código para el menú es:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/action_one"
        android:title="Accion1"/>

    <item
        android:id="@+id/action_two"
        android:title="Accion2"/>

    <item
        android:id="@+id/action_three"
        android:title="Accion3"/>

</menu>

Paso 3. Nuestro interfaz principal «activity_main.xml» solo tendrá un botón, el XML es:

<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" >

    <Button
        android:id="@+id/btnShowPMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="46dp"
        android:text="Ver Popup Menu" />

</RelativeLayout>

Paso 4. Código

Abre MainActivity.java

package com.bolivia.demopopupmenu;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.PopupMenu;
import android.widget.Toast;

public class MainActivity extends Activity {

 private Button btnShowPMenu;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //nuevo codigo
  btnShowPMenu = ( Button )findViewById( R.id.btnShowPMenu );
  btnShowPMenu.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                     popupMenu();
                    }});
 }//end:onCreate

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

 /** Popup Menu */
 private void popupMenu()
 {
  //Crea instancia a PopupMenu
        PopupMenu popup = new PopupMenu(this, btnShowPMenu);
        popup.getMenuInflater().inflate(R.menu.my_popupmenu , popup.getMenu());
        //registra los eventos click para cada item del menu
        popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
            public boolean onMenuItemClick(MenuItem item) {                
                if (item.getItemId() == R.id.action_one)
       {
                 Toast.makeText(MainActivity.this, 
                   "Ejecutar : " + item.getTitle() ,Toast.LENGTH_SHORT).show();
       }
                else if (item.getItemId() == R.id.action_two)
       {
                 Toast.makeText(MainActivity.this, 
                   "Ejecutar : " + item.getTitle() ,Toast.LENGTH_SHORT).show();
       }                         
                else if (item.getItemId() == R.id.action_three)
       {
                 Toast.makeText(MainActivity.this, 
                   "Ejecutar : " + item.getTitle() ,Toast.LENGTH_SHORT).show();
       }                         
                return true;
            }
        });
        popup.show();
 }

}//end:MainActivity