BÚSCAME EN: Last FM Filmaffinity Facebook Youtuve Blogger Twitter Feed Instagram
Puedes acceder a este blog mediante las direcciones www.ignacionario.com o ignacionario.blogspot.com. También puedes contactar a través de la dirección de correo electrónico contacto@ignacionario.com.

22 de abril de 2011

Android (V): Crear opciones de menú

Android: Desarrollo de opciones de menú en layouts (Activity)

¡Ya iba tocando dejar por aquí un nuevo post sobre desarrollo en Android!, esta vez voy a intentar explicar algo bastante sencillo pero al mismo tiempo muy útil y versátil en las aplicaciones: las opciones de menú dentro de cada pantalla, donde normalmente añadimos las pequeñas funcionalidades que no tienen que mostrarse siempre en pantalla pero que de vez en cuando usamos, lo explicaré en 4 sencillos pasos:

  • Crear imágenes de icono (opcional)
  • Crear elemento XML con las diferentes opciones de menú
  • Añadir opciones al Activity deseado
  • Añadir funcionalidad a cada una de las opciones de menú

1. Crear los iconos para cada opción de menú (opcional)

Si queremos que el tamaño de la imagen cambie según la resolución del dispositivo que ejecuta la aplicación deberemos generar distintos tamaños de cada imagen. En general las aplicaciones suelen tener imágenes para tres resoluciones como mínimo: HDPI (alta), MDPI (media) y LDPI (baja), a continuación os dejo una relación de las distintas resoluciones existentes para aplicaciones android. Debemos tener cada imagen para cada resolución dentro de la carpeta correspondiente en res: drawable-hdpi, drawable-mdpi drawable-ldpi.

Android: Diferentes carpetas de imagenes según la resolución
Dando soporte a distintas resoluciones de pantalla (clic aquí para más info)

2. Crear elemento XML que contiene las diferentes opciones de menú

El siguiente paso necesario es definir un medio desde el cual leamos las opciones de menú. Puede configurarse desde una base de datos, desde el propio código o (la parte más sencilla a mi parecer) desde un fichero XML dentro de la carpeta menu, en res.

Como costumbre, suelo nombrar a los ficheros XML que forman parte de un menú con el mismo nombre que el layout al que van a pertenecer y así tener mejor organizados los ficheros a la hora de reconocerlos, esto es muy aconsejable sobre todo si la aplicación va a tener una estructura de ficheros bastante amplias. Como en este caso el menú va a ir asociado al layout home, lo he nombrado home_menu.xml.
Android: Desarrollo de opciones de menú en layouts (Activity) - Estructura de carpetas
Estructura de ficheros del proyecto
El contenido de home_menu.xml tiene la siguiente estructura:


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
      <item
            android:id="@+id/btConfig"
            android:title="Configuración"
            android:icon="@drawable/config">
      </item>
      <item
            android:id="@+id/btInfo"
            android:title="Acerca de"
            android:icon="@drawable/info">
      </item>
</menu>


3. Añadir las opciones de menú dentro del Activity deseado

Este paso es bastante sencillo, sólo debemos sobreescribir el método onCreateOptionsMenu dentro del Activity que implemente el menú e indicarle el documento XML que contiene dichas opciones.

// Añadiendo las opciones de menú
      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
          MenuInflater inflater = getMenuInflater();
          inflater.inflate(R.menu.home_menu, menu);
          return true;
      }

Android: Desarrollo de opciones de menú en layouts (Activity) - Resultado final
Vista final de la pantalla cuando se pulsa el botón MENÚ

4. Dando funcionalidad a cada una de las opciones de menú

El código que muestra a continuación muestra un mensaje de texto diferente según que opción se pulsa, se deberá cambiar el contenido de cada case según la funcionalidad que queremos dar a la aplicación: Acceder a la base de datos para modificar algún registro, cambiar de Activity, etc.

// Añadiendo funcionalidad a las opciones de menú
@Override
public boolean onOptionsItemSelected(MenuItem item) {
   switch (item.getItemId()) {
        case R.id.btConfig:
           Toast.makeText(getApplicationContext(), "Has pulsado Config"
                 Toast.LENGTH_SHORT).show();
           return true;
        case R.id.btInfo:
           Toast.makeText(getApplicationContext(), "Has pulsado la opción 
                 Info"Toast.LENGTH_SHORT).show();
           return true;
        default:
           return super.onOptionsItemSelected(item);
    }
}


27 comentarios:

  1. No tengo idea de como y dónde crear todo es pero me pareces un tio listo, así que para que tu blog no adelgace, te dejo estas letrujas mas o menos bien juntadas.

    ResponderEliminar
  2. jajaja, qué gracioso el cometario! Esto es para hacerlo en un programa para desarrollar aplicaciones para Android, programación y esas cosas :P

    Muchas gracias por esas letrotas Ziota! :)

    ResponderEliminar
  3. Hola, me ha sido muy util la explicacion. Sin tanta complicacion como en varios otros que he visto. Faltaria aumentarle el como se definen las opciones del menu con java y estaria completisimo. Sigue adelante, que android es todo un mundo (en el cual voy viviendo por ahora ).

    ResponderEliminar
  4. Hola Anónimo!!, Lo comento en el post, que también se puede crear desde código aunque lo he omitido porque me parece más correcto usar un XML, ya que es mucho más intuitivo a la hora de cambiar valores o añadir nuevas opciones al menú.

    Muchas gracias por dejar por aquí un comentario y tu aportación :)

    ResponderEliminar
  5. Pues a mí no me funciona. Cuando doy al botón menú no aparece ningún mensaje ni nada por el estilo. Me interesa que al hacer click, aparezca una activity para elegir la configuración de la app, pero como digo ni siquiera sale el mensaje Toast.

    ResponderEliminar
  6. Hola Anónimo! Es muy probable que si no te sale el mensaje es que no hayas creado correctamente el menú, revisa el punto 3 y revisa también que el XML donde se indican las distintas opciones del menú.

    Si en vez de un mensaje quieres que se acceda a otra Activity, debes cambiar el código por el necesario para hacer dicha función, echa un vistazo si quieres al post Android número III, que indico como cambiar de Activity.

    Un saludo y espero que te sirva de ayuda :)

    ResponderEliminar
  7. Ya lo he hecho y tampoco cambia de Activity. Al arrancar en el emulador, después del splash, aparece el activity del menú durante unos segundos y luego el activity principal. Luego cuando hago click en el botón de menú para que ejecute el código, el logcat me dice algo así como que la actividad ya tiene el foco y que ignora la pulsación del botón. He revisado todo mil veces, pero lo que sea se me pasa siempre.
    Saludos y gracias.
    Jose AR

    ResponderEliminar
  8. Hola Jose AR!

    Te aconsejo que primero intentes hacer funcionar el menú con el mensaje tipo Toast, tal y como aparece en mi ejemplo para asegurarte de que eso funciona bien y, una vez comprobado que muestra el mensaje es que el código está bien echo, ya que se muestra el menú y además ejecuta su funcionalidad. A partir de ahí ya vas complicando la cosa con el tema del cambiar Activity.

    Ten en cuenta que todas las Activities deben estar indicadas en el AndroidManifiest.xml, si no dará un error al ejecutarlas, a lo mejor es eso lo que te está fallando, cuando salta un error no controlado, a veces la aplicación se reinicia y vuelve a la pantalla inicial.

    A ver si consigues sacarlo! :P

    ResponderEliminar
  9. Te agradezco tu ayuda Ignacio. Todo está bien. La Activity está indicada en el AndroidManifest.xml. El error cre que está en que se "crea" el Activity, sin pulsar en el menú y se queda "debajo" del Activity Main. Tampoco me ha llegado a funcionar con el mensaje Toast. Seguiré intentado hasta conseguirlo. Muchas gracias, por gente como tú, aprendemos gente como yo.

    Jose AR

    ResponderEliminar
  10. Bueno, pues ya lo he solucionado. ¿Cómo?. Ni idea. Simplemente le indiqué a Eclipse que limpiara mi código. En el menú archivo, aparece una opción que pone Limpiar.
    Volví a escribir el código correspondiente al menú y....voilá! Aparece.
    Gracias

    Jose AR

    ResponderEliminar
  11. Bueno! Este tipo de batallas con el código simepre suelen salir, pero al menos nos compensa la satisfacción de ver que lo que hemos escrito funciona!!

    Enhorabuena, Jose AR! :P

    ResponderEliminar
  12. Podrias ayudarme a crear una tabla en android.

    ResponderEliminar
  13. Hola davidsistemas, a qué tipo de tablas te refieres? si quieres envíame un correo o algo, porque no sé cual es tu problema :P

    Saludos

    ResponderEliminar
  14. Buenas tardes!
    Es que necesito hacer un opcion menú que dependiendo de la opcion dibuje algo en un canvas...
    Me podria ayudar?

    ResponderEliminar
  15. Hola, como sugerencia podrias subir los archivos de tus proyectos para que puedan bajarlos y aprender los que recien estan iniciando. Te felicito pro el blog.

    Saludos!

    ResponderEliminar
  16. Buenas. Gracias por la felicitación del blog pero prefiero no subir siempre el código, sobre todo por que en muchos casos son ejemplos de código de mis aplicaciones.

    En cualquier caso lo mejor es hacerlo uno mismo.

    Gracias por tu comentario

    ResponderEliminar
  17. Hola! Antes de nada agradecer tu trabajo por blog como éste. Sirve de mucha ayuda para gente que estamos empezando en este mundo.
    Tengo un problema y es que al ejecutar esta aplicación de los menus no me da ningún tipo de error pero sin embargo no consigo que me aparezca nada más que el mensaje del archivo strings.xml
    te adjunto aquí 3 imágenes con los códigos del archivo .java, el del home_menu.xml y el del main.xml.
    Si pudieras echártelo un vistazo y decirme donde esta el fallo te lo agradecería mucihsimo porque no consigo solucionarlo de ninguna manera.

    ResponderEliminar
  18. Muy buenas Nilag 90, gracias por dejar aquí tu comentario con tus dudas. En un rato intento echarle un vistazo a tus archivos adjuntos e intento darte una respuesta, a ver si consigo ayudarte :)

    ResponderEliminar
  19. Hola Niga 90... mirando tu código parece que está todo OK. No sé si sabes que las opciones de menú sólo aparecen cuando pulsas el botón Propiedades (creo que es F2), a lo mejor por eso no te está apareciendo en el emulador, porque no has pulsado el botón de opciones de menú, otra cosa no se me ocurre -_-

    ResponderEliminar
  20. Muchas gracias Ignacio, efectivamente ahora me salen las opciones del menú.

    ResponderEliminar
  21. Hola muy buen post me ayudo mucho pero tengo una duda te explico mi caso
    tengo que hacer una aplicacion que cosnta de 5 pantallas pero para cada pantalla al deslizar el dedo pudieras navegar entre las pantallas y otra funcion seria dejar picado en un textview y que aparesacan las opcones a los diferentes lados de las pantallas espero si me aya explicado y si tienes alguna idea o forma de hacerlo te lo agradeseria

    Jorge Chavez

    ResponderEliminar
  22. Hola mira he mirado tu codigo y otros codigos y son parecidos, pero aun no me salen los iconos en el menu, no se si tenga que ver con el tamaño del icono, cual es el indicado para poner en el menu, de lo demas todo funciona perfectamente, al pulsar sobre la opcion me aparece el texto que debe aparecer, pero se veria mucho mejor mi menu con los iconitos... Ahora mi menu aparece cuando le doy clic al boton menu o con F2 y sale de la parte de abajo en forma de lista vertical y no como tu ejemplo que esta en forma horizontal... Alguna idea???

    ResponderEliminar
  23.  Excelente post pero creo que falta explicar mejor a donde pertenece cada código para que lo entiendan mejor, saludos.

    ResponderEliminar
  24. Hola Ignacio, he implementado un menú muy similar al que tu describes y funciona perfectamente cuando lo pruebo en el galaxy ace, pero no consigo abrirlo en el galaxy nexus ya que este móvil no tiene ningún botón de opciones (los botones de home, atrás y apps abiertas forman parte de la pantalla). Si sabes como solucionarlo estaría muy agradecido, gracias.

    ResponderEliminar
  25. Me urge saber como lanzar un segundo activity seleccionando una opcion de un menu  puesto en el primer activity. Les agradeceria mucho si me pueden ayudar.

    ResponderEliminar
  26. Expande el mundo de tus aplicaciones con la NUEVA herramienta de desarrollo para plataformas Android.

    Ahora podrás crear aplicaciones para Android e iOS usando una única base de código sin sacrificar la calidad, conectividad o rendimiento de tus aplicaciones.

    Con RAD Studio XE5 podrás
    •Llegar a las plataformas de Android, iOS, OS X y Windows con un solo código fuente y utilizando un único entorno de desarrollo IDE.

    •Alcanzar las plataformas móviles más grandes del planeta.

    •Sin necesidad de aplicar tecnologías de scripts o de tiempo de ejecución –simplemente un ejecutable de compilación nativa rápido y directo para cada plataforma.

    •Añadir compatibilidad con servicios web de RESTful.Con MBaaS (Mobile Backend as a Service), tienes todo lo necesario para lograr sorprendentes aplicaciones del lado del cliente como también una infraestructura de back-end escalable y conectada.

    Para mas información visita nuestra pagina web http://www.gopac.com.mx

    ResponderEliminar

Si estás conectado a tu cuenta de Google, puedes pulsar la opción Suscripción por correo electrónico que aparece a la derecha del botón Publicar comentario para recibir los comentarios que se publiquen en tu cuenta de correo electrónico, así podrás realizar un seguimiento de lo que se habla en esta entrada.
Si quieres enterarde de nuevos post, puedes subscribirte por correo, o hacerte seguidor tanto en blogger como en mi cuenta de twitter (ignacionario)

Related Posts Plugin for WordPress, Blogger...