Menús en Android, cómo añadir menús a nuestras aplicaciones Android Java Eclipse

Tutorial donde explicamos cómo añadir menús a nuestras aplicaciones Android. Mostramos cómo añadir menús y submenús y su código asociado a una aplicación Android desarrollada con IDE Eclipse. Indicamos cómo crear los menús desde el fichero XML o desde el editor gráfico y cómo generarlos sin usar fichero XML, directamente con código Java.

Tipos de menús en Android

Existen varios tipos de menús en las aplicaciones para dispositivos con sistema Android:

Menú de opciones: elementos de opción que aparecen en la parte inferior de la pantalla de un activity (ventana de aplicación) cuando el usuario pulsa la tecla "Menú" de su dispositivo Android. En versiones más actuales como Android 3.0 y superiores, es posible proporcionar accesos rápidos para seleccionar ítems de un menú colocándolos directamente en la Action Bar mediante lo que se conoce como action ítems. Estos son los menús "principales" de una aplicación.

Submenú. son menús secundarios que se pueden mostrar al pulsar sobre una opción de un menú principal (menú de opciones).

Menú contextual: es un menú de opciones flotante en forma de lista que aparece cuando el usuario utiliza el gesto de taps-and-holds o pulsación larga, es decir, tocar la pantalla y mantener la pulsación por determinado tiempo, sobre algún componente de la interfaz de usuario.

Requisitos para desarrollar aplicación para dispositivos Android con Eclipse

En el siguiente enlace mostramos un tutorial donde explicamos paso a paso cómo instalar Eclipse y cómo desarrollar una aplicación para dispositivos con Android:

Mi primera aplicación Android con Eclipse en Linux, instalar Eclipse Ubuntu.

Fichero XML para crear menús en Android con Eclipse

Existen dos modalidades para crear menús en Android, una es mediante código Java directamente y la otra es añadiendo los datos en un fichero XML y "cargándolo" posteriormente. Vamos a explicar en primer lugar cómo crear un menú usando el fichero XML. Abriremos Eclipse, abriremos nuestro proyecto Android y accederemos desde el Project Explorer a la carpeta "res" y a la subcarpeta "menu" (si no existe podemos crearla). Dentro de la carpeta "menu", si no existe un fichero XML para crear nuestro menú lo crearemos (normalmente existe). Haciendo doble clic sobre este fichero XML en la parte derecha podremos ver el "Layout" (diseño gráfico del menú) o el fichero XML directamente. Desde el módo gráfico pulsaremos en "Add" para añadir un nuevo elemento de menú:

Seleccionaremos "Item" y pulsaremos "OK":

Antes de continuar con el elemento de menú añadiremos ahora un nuevo string (value) que será el texto que aparezca en el elemento del menú (el que verá el usuario en la aplicación del dispositivo Android). Para ello accederemos a la carpeta "res" - "values" y haremos doble click sobre "strings.xml", en el Layout de la parte derecha pulsaremos en "Add":

Seleccionaremos "String" y pulsaremos "OK":

Introduciremos los datos "Name" (nombre identificativo, se usará para el código Java o XML) y "Value" (texto que verá el usuario):

Cerraremos el fichero "strings.xml":

Guardaremos los cambios pulsando en "Yes" en el mensaje "strings.xml has been modified. Save changes?":

Seguiremos con nuestro elemento de menú en la pestaña del fichero XML del menú, anteriormente añadimos el item, ahora introduciremos las propiedades, las dos más importantes:

Id: identificador del item de menú, se usará para referenciarlo en el código Java. Su formato será "@+id/nombre".
Title: texto que aparecerá en el item del menú en la aplicación Android, el que verá el usuario. Aquí usaremos el string creado anteriormente. Para seleccionarlo pulsaremos en "Browse":

Seleccionaremos el string creado anteriormente "text_menu_configuracion":

Para consultar el código XML en la parte inferior pulsaremos en la pestaña "nombre_fichero_menu.xml":

El item añadido anteriormente generará el siguiente código XML:

El contenido del fichero XML de menú generado por el diseñador gráfico:

android:title="@string/text_menu_configuracion"
android:checked="false" android:visible="true"
android:checkable="false"
android:enabled="true">

Añadiremos todos los elementos de menú que queramos que tenga nuestra aplicación Android, en nuestro caso "menu_configuracion", "menu_visitar_web", "menu_linterna" como hemos indicado anteriormente.

Si queremos que algún elemento de menú tenga a su vez un submenú lo seleccionaremos y pulsaremos "Add" :

Seleccionaremos "Sub-Menu" y pulsaremos "OK":

Pulsaremos en "Add":

Seleccionaremos "Item" y pulsaremos "OK":

Añadiremos los elementos de menú como hemos explicado anteriormente, en este caso formarán parte del submenú de "menu_linterna":

El fichero XML con algún submenú:

android:title="@string/text_menu_configuracion"
android:checked="false" android:visible="true"
android:checkable="false"
android:enabled="true">
android:title="@string/text_url">

android:title="@string/text_linterna">

android:title="@string/text_encender"/>
android:title="@string/text_apagar"/>

El fichero XML de un menú vacío contiene:

El fichero XML con todos los elementos de menú y submenús de nuestra aplicación Android:

android:title="@string/text_menu_configuracion"
android:checked="false" android:visible="true"
android:checkable="false"
android:enabled="true"
android:icon="@drawable/configuracion">

android:title="@string/text_url"
android:icon="@drawable/visitar_url">

/home/ajpdsoft/Descargas/glyfx_android_common_2/Menu/options.png
android:title="@string/text_linterna"
android:icon="@drawable/linterna">

android:title="@string/text_encender"/>
android:title="@string/text_apagar"/>

Si queremos añadir iconos a los elementos de menú los descargaremos de alguna web (o los creareamos con alguna aplicación de diseño gráfico), Android admite iconos PNG:

Copiaremos los iconos a las carpetas "res" - "drawable-...", podemos copiarlos desde el explorador de archivos del sistema operativo (Explorador de archivos en Windows o Nautilus en Linux) y pegalos en Eclipse, en las carpetas correspondientes. Cuando creamos un nuevo proyecto Android en Eclipse, se crearán varias carpetas dentro de "res" llamadas "drawable-hdpi", "drawable-ldpi", "drawable-mdpi" y "drawable-xhdpi". Crearemos o pegaremos aquí los ficheros de imagen con el tamaño adecuado para cada tipo de pantalla Android (hdpi, ldpi, mdpi, xhdpi). En nuestro caso copiaremos los ficheros "configuracion.png", "linterna.png", "visitar_url.png":

Tras agregar los iconos a las carpetas "res" - "drawable-xxx" de nuestro proyecto Eclipse, abriremos el fichero xml del menú creado anteriormente y seleccionaremos el elemento de menú al que queramos añadirle el icono, tras seleccionarlo, en la propiedad "Icon" introduciremos "@drawable/xxx" donde "xxx" será el nombre del fichero .png añadido a las carpetas "res" - "drawable-xxx" sin la extensión:

Código Java en aplicación Android para cargar fichero XML de menú

Añadiremos el código Java para cargar el menú en la aplicación Android (cuando el usuario pulse la tecla de "Menú" en su móvil Android), para ello abriremos el fichero .java de nuestro proyecto Android y añadiremos el siguiente código "onCreateOptionsMenu":

    //para mostrar el menú de la aplicación
    @Override
    public boolean onCreateOptionsMenu(Menu menu) 
    {
        getMenuInflater().inflate(
          R.menu.activity_ajpdsoft_linterna, menu);
        return true;
    }

Donde "activity_ajpdsoft_linterna" será el nombre que le hayamos dado al fichero XML donde hemos guardado las opciones de menú anteriormente:

Código Java en aplicación Android para cargar fichero XML de menú

Con este código y el fichero XML con los elementos del menú ya podremos compilar y probar el menú en el emulador Android de Eclipse, de momento no hará nada ningún elemento de menú pues aún no lo hemos programado, pero ya aparecerá al pulsar la tecla "Menú":

Pulsando en el menú "Linterna":

Nos aparecerá el submenú que hemos creado con sus dos elementos de menú:

Nota importante: para usar menús en aplicación Android deberemos añadir los siguientes imports:

import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;

Añadir código Java para cada elemento de menú en aplicación Android

Para que cada elemento de menú añadido anteriormente tenga una funcionalidad deberemos añadir el siguiente código Java:

    //código para cada opción de menú
    @Override
    public boolean onOptionsItemSelected(MenuItem item) 
    {
        switch (item.getItemId()) 
        {
            case R.id.menu_configuracion:
                menuConfiguracion();
                return true;
            case R.id.menu_linterna_encender:
             encenderLinternaAndroid();
                return true;
            case R.id.menu_linterna_apagar:
             apagarLinternaAndroid();
                return true;
            case R.id.menu_visitar_web:
             visitarURL("http://www.ajpdsoft.com");
                return true;               
                
            default:
                return super.onOptionsItemSelected(item);
        }
    }

Donde:

menu_configuracion, menu_linterna_encender, menu_linterna_apagar y menu_visitar_web son los ID de cada elemento de menú creado anteriormente.
cada "case" se corresponderá con cada elemento de menú, en cada "case" colocaremos el código Java que queramos que se ejecute para la acción del menú. Por ejemplo, para el menú "menu_visitar_web" se ejecuta un procedimiento llamado "visitarURL" que estará más abajo:

    public void visitarURL(String url)
    {
     Intent browserIntent = 
      new Intent(Intent.ACTION_VIEW, 
        Uri.parse(url));
     startActivity(browserIntent);
    }

De la misma forma, los procedimientos "menuConfiguracion", "encenderLinternaAndroid" y "apagarLinternaAndroid" existirán en nuestro código Java y realizarán la acción que deseemos para la opción de menú al que se correspondan.

Con el código anterior y cada procedimiento ya tendremos asignado el código Java a cada opción de menú de nuestra aplicación Android.

Añadir menú Android por código Java directamente sin usar fichero XML

Añadiremos el siguiente código Java para crear un menú directamente sin usar fichero XML:

private static final int menu_configuracion = 1;
private static final int menu_linterna = 2;
private static final int menu_visitar_url = 3;
private static final int menu_linterna_encender = 4;
private static final int menu_linterna_apagar = 5;
 
//...
 
@Override
public boolean onCreateOptionsMenu(Menu menu) {

    menu.add(Menu.NONE, menu_configuracion, 
         Menu.NONE, "Configuración").setIcon(R.drawable.configuracion);
    menu.add(Menu.NONE, menu_linterna, 
         Menu.NONE, "Linterna").setIcon(R.drawable.linterna);
    menu.add(Menu.NONE, menu_visitar_url, 
         Menu.NONE, "Visitar url").setIcon(R.drawable.visitar_url);
    return true;
}

Para añadir submenús:

SubMenu submenu1 = menu.addSubMenu(Menu.NONE, 
    menu_linterna, Menu.NONE, 
    "Linterna").setIcon(R.drawable.linterna);
submenu1.add(Menu.NONE, menu_linterna_encender, 
    Menu.NONE, "Encender");
submenu1.add(Menu.NONE, menu_linterna_apagar, 
    Menu.NONE, "Apagar");

Publicar aplicación Android en Google Play

En el siguiente tutorial explicamos cómo publicar una aplicación para dispotivos Android en Google Play (antes Google Android Market):

Publicar aplicación Android en Google Play, obtener beneficios.

Créditos

Artículo realizado íntegramente por Alonsojpd miembro fundador del proyecto Proyecto AjpdSoft.

Artículo en inglés.

8/04/2012