Android. Juego del ahorcado (III). Añadiendo un menú.

android Podemos desarrollar dos tipos de menús en Android: Uno que aparece al pulsar el botón menú del teléfono y otro que aparece cuando pulsamos y aguantamos un momento la pantalla o el botón central del D-pad.

Vamos a empezar por crear un menú que aparezca cuando pulsamos el botón menú del teléfono:

android tutorial

En un post anterior, ya creamos algunas definiciones de cadenas de texto en el fichero “Proyecto Ahorcado -> res -> values -> strings.xml”, en Eclipse. Vamos ahora a crear algunas más, como paso previo a la creación del menú. El fichero strings.xml quedará de la siguiente forma:

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<string name=”app_name”>Ahorcado</string>
<string name=”titulo_principal”>El juego del Ahorcado</string>
<string name=”nuevo_juego”>Empezar nuevo juego</string>
<string name=”salir”>Salir</string>
<!– A partir de aquí las entradas de menús –>
<string name=”titulo_config”>Configuración de Ahorcado</string>
<string name=”etiqueta_config”>Configuración</string>
<string name=”tecla_config”>c</string>
<string name=”titulo_audio”>Audio</string>
<string name=”etiqueta_audio”>Activar música de fondo</string>
</resources>

Ahora definimos el menú. Para ello, necesitamos el fichero “Proyecto Ahorcado -> res -> menu -> menu.xml”. Este fichero no existe, ni la carpeta menu tampoco, así que vamos a crearlos. Para crear la carpeta, hacemos click encima de la carpeta “res” con el botón derecho del ratón y seleccionamos New -> Folder en el menú emergente. Le ponemos el nombre y ya está. Para crear el fichero menu.xml hacemos click en la carpeta “menu” recién creada con el botón derecho del ratón y seleccionamos “New -> Other” en el menú emergente.

Aparecerá el siguiente diálogo:

android tutorial

En este diálogo seleccionamos, dentro de la carpeta Android, la opción “Android XML File”. Fíjate en la siguiente imagen. Como puedes comprobar, está seleccionado el radiobutton “Menu”. Le damos como nombre “menu.xml” y pulsamos el botón Finish. Ya está.

android tutorial

En otros posts anteriores, he modificado siempre “a pelo” el código xml. En esta ocasión, voy a utilizar un asistente incluido en el plugin de Android para Eclipse: Android Menu Editor. Esposible que te aparezca de forma automática una vez has creado el menú. Si no fuese así, busca en el navegador de proyectos de Eclipse el fichero creado (Proyecto Ahorcado -> res -> menu -> menu.xml) y le haces click encima con el botón derecho del ratón. En el menú emergente, selecciona “Open With-> Menu Editor”. El aspecto del Menu Editor es el siguiente:

android tutorial

Vamos a crear la primera entrada del menú. Para ello, pulsa el botón “Add”. Aparece el siguiente diálogo:

android tutorial

Podemos crear entradas de menú, o grupos de entradas. En este último caso, serían entradas que al seleccionarlas no llevarían a un submenú. En este ejemplo crearemos sólo entradas simples, lo que en el diálodo aparece como “Item”. Selecciónalo y pulsa “OK”. Ahora, el diálogo ha cambiado de aspecto:

android tutorial

En la parte izquierda, tenemos las entradas de menú. En nuestro caso, sólo una que por defecto se llama “item01”. Este nombre es el identificador que tiene esta entrada de menú. Es importante cambiarlo por un identificador más explicativo ya que, como veremos en futuros posts, a partir de estos identificadores hacemos referencia a los objetos del programa. En la parte derecha vemos la sección de “Attributes”. En ella definimos las características de la entrada de menú seleccionada en la parte derecha.

Lo primero que haremos es cambiar el id. Quedará de la siguiente forma: @+id/config. Otros datos a cambiar son:

Title: pulsa el botón Browse a la derecha de Title. Te aparecerá el siguiente diálogo:

android tutorial

Te darás cuenta que esta ventana presenta las entradas definidas en el fichero “Proyecto Ahorcado -> res -> values -> strings.xml”, que creamos antes. Es recomendable que los textos se definan de esta manera, para no ponerlos “fijos” en la caja de texto. Es importante desarrollar programas fácilmente modificables en el futuro, pero de esto ya hablaremos en futuros posts. Selecciona “etiqueta_config” y pulsa OK.

Alphabetic shortcut: pulsa Browse. Te vuelve a aparecer la misma ventana de antes. Selecciona ahora “tecla_config” y pulsa OK.

Lo demás lo dejamos como está, de momento. Ahora que tenemos la entrada del menú creada, necesitamos modificar el código del fichero “Proyecto Ahorcado -> src -> misejemplos.ahorcado -> Ahorcado.java”. Haz doble click en él para ver el código. El estado actual es el siguiente:

package misejemplos.ahorcado;

import android.app.Activity;
import android.os.Bundle;

public class Ahorcado extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

Puedes ver los cambios en negrita a medida que los hacemos:

Importamos lo necesario para el control de los menús con las líneas import siguientes:

package misejemplos.ahorcado;

import android.app.Activity;
import android.os.Bundle;

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

public class Ahorcado extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

}

Ahora redefinimos el método OnCreateOptionsMenu:

package misejemplos.ahorcado;

import android.app.Activity;
import android.os.Bundle;

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

public class Ahorcado extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
MenuInflater preparamenu = getMenuInflater();
preparamenu.inflate(R.menu.menu, menu);
return true;
}

}

Este último paso necesita una pequeña explicación. Este método se ejecutará cuando pulsamos el botón menú del dispositivo.

“preparamenu” es un objeto de tipo MenuInflater. Lo creamos en la línea de código:

MenuInflater preparamenu = getMenuInflater();

Luego lo utilizamos para que “coja” el fichero “Proyecto Ahorcado -> res -> menu -> menu.xml” y lo “convierta” en un menú y lo presente. Esto es lo que hace la línea:

preparamenu.inflate(R.menu.menu, menu);

Donde R.menu.menu se refiere a “Recursos del proyecto -> menús -> fichero menu.xml”.

Si ejecutamos el emulador con haciendo click con el botón derecho en el proyecto Ahorcado -> Run As -> Android Application, y pulsamos el botón menú, el aspecto es el siguiente:

android tutorial

En el siguiente post, vamos a definir lo que hará nuestro programa cuando seleccionamos la entrada “Configuración” del menú que hemos creado.

¡Hasta pronto!.

Acerca de Isildur Fuentes

Apasionado de las buenas historias y aikidoka de la tierra.

Publicado el noviembre 4, 2010 en Android, Programación y etiquetado en , , , , , , , . Guarda el enlace permanente. 41 comentarios.

  1. Hola soy novata en Android y quería felicitarte por estos tutoriales, se aprende mucho.

    En este post he seguido paso a paso lo que dice y no me da ningún error, pero lo único es que no se me ve el botón de configuración (menu).

    Hay que tocar algo para activarlo o debería verlo.

    Muchas gracias y felicidades de nuevo

    • problema resulto.

      • Isidro Fuentes Hermoso

        Hola Maite (cactus).

        ¡Muchas gracias por tu comentario!.

        Estaba ahora mismo redactando un comentario para ver si te podía ayudar, pero no me ha dado tiempo. Espero que la solución no fuese muy difícil. Si te parece de interés para los compañeros que leen este blog y que puedan tener el mismo caso, por favor coméntamelo para tenerlo en cuenta e indicarlo en la entrada.

        En breve seguiré creando entradas sobre Android.

        Un saludo.

  2. Hola, excelente tutorial y que me ayuda muchos en mis inicios. El problema que se me presenta es que cuando intento utilizar el menu editor al hacer ADD no me aparecen las filas de Items y Grupos y el cuadro queda desactivado y no puedeo seguir
    ¿ Sabes que problema puede ser ?

    Gracias

  3. Hola, ya he encontrado el motivo por el cual no aparecían los iconos en el editor de menú.
    Había un erro en el fichero XML

    Gracias y saludos

    • Isidro Fuentes Hermoso

      ¡Hola Josep!

      ¡Muchas gracias por tus comentarios!

      Te ruego no dudes en seguir aportando tus experiencias en este blog.

      Un saludo.

      Isidro

  4. Hola Isisdro, me queda un problema por resolver en este ejemplo , a ver si me puedes ayudar. No logro ver el botón de configuración. El código es idéntico al que has escrito , aunque en el fichero ahorcado.java , en la línea de código
    import android.view.MenuItem;
    veo que a la izquierda me aparece el símbolo en amarillo.
    El emulador lo arranco mediante comando dos ya que si no es así no logor ver el móvil completo
    Muchas gracias por todo lo que estás haciendo.

    • Isidro Fuentes Hermoso

      Hola Josep.

      Acabo de ver tu comentario. Le echaré un vistazo y te comento cosas.

      Un saludo y muchas gracias por visitar este blog.

      Isidro.

    • Isidro Fuentes Hermoso

      Hola Josep.

      He estado mirando el código del post y comparándolo con el mío y a mí sí me funciona. Lo que comentas del símbolo amarillo es una advertencia (que no un error) que indica que el paquete que estás importando no lo utilizas. Es normal, ya que ese paquete (MenuItem) lo utilizarás cuando desarrolles las opciones de menú (ver post http://robiol.org/android-juego-del-ahorcado-iv-entradas-de-menu/ ). Necesitaría más datos de tu código para poder ayudarte, por lo que si quieres, puedes pasárme el package entero (a la cuenta de email de contacto que verás en la “Sobre robiol.org”), para ver qué podemos investigar.

      Un saludo.

  5. Hola! Excelente tutorial!

    Solo un problemilla y es el mismo que Josep. No se me ve el botón de configuración. Alguna idea? Un saludo y seguiré realizando los pasos!

    • Isidro Fuentes Hermoso

      Muchas gracias por tu comentario!

      Josep solucionó el problema borrando el código y picándolo de nuevo. En principio no había diferencias, pero en el segundo intento funcionó. Por mi parte, revisé el código y no encuentro el problema aparentemente, ya que lo tengo igual y me funciona. Todo ello me lleva a una posible causa: los juegos de caracteres que dan estos problemas al copiar y pegar código fuente, sobre todo con símbolos como comillas y otros.

      Espero haber sido de ayuda. De todas formas, si el problema persiste, no dudes en hacerlo saber a la comunidad.

      Un saludo y de nuevo gracias por tu aportación.

      • Gracias por la respuesta tan rápida!
        He escrito yo todo el código a mano de nuevo, pero nada, sigue sin salirme. ¿No tendrá nada que ver con las opciones disponibles al crear el item config? He probado varias cosas, pero no consigo visualizarlo😦
        Seguiré buscando posibles fallos! Gracias por la atención!

      • Isidro Fuentes Hermoso

        Espero que encuentres el problema…Si no das con él, no dudes en contactar de nuevo, a ver si entre todos lo encontramos.

        Un saludo.

  6. que tal amigo, al igual que Nu, yo copie el codigo al igual que lo escribi yo mismo y no me sale el boton de configuracion, copiando todo a mano (desde la parte uno del tutorial) o con copy/paste… espero me puedas ayudar🙂

    Aprovecho para felicitarte por tu gran aporte a esto de la programacion… se me ha hecho facil entender hasta el momento sigue asi que aqui estare para aprender🙂

    • Encontre mi error, espero les ayude a algunos como yo que le falto presionar el BOTON menu en el AVD🙂

      • Isidro Fuentes Hermoso

        Hola Carlos.

        Acabo de ver tus dos comentarios. Me alegro mucho que hayas dado con la solución y te agradezco que la hayas compartido con todos.

        Espero que nuestros próximos posts sobre desarrollo en Android te sigan gustando.

        Un saludo.

  7. Hola, he seguido los pasos y lo he escrito todo yo mismo, pero aun así no consigo encontrar el error por el cual no me aparece el botón de Configuración…

    • Isidro Fuentes Hermoso

      Hola Kilo!

      Muchas gracias por tu comentario!.

      Respecto a que no te aparece el menú de configuración, si como has escrito todo tú mismo y si pulsas en botón MENU del emulador y no pasa nada, y si no encuentras el origen del problema, puedes (si quieres) enviar el paquete completo de tu desarrollo (tal y como lo tienes) a la cuenta de email que aparece en la página “Sobre Robiol.org”, para intentar, entre todos, solucionarlo.

      Un saludo.

  8. Hola de nuevo, mi problema es que el emulador tiene un tamaño desproporcionado y sale de los limites de mi pantalla, quedándome el botón de Configuración fuera de mi visión.
    Como puedo reducir el tamaño de mi emulador?

    • Isidro Fuentes Hermoso

      Hola Darío.

      Gracias por el interés que estás demostrando por estos articulillos de Android. Respecto a cómo redimensionar el emulador, hay una manera:

      – En Eclipse, selecciona tu proyecto con el botón derecho y ve a “Run As” -> “Run Configurations”
      – En la parte derecha verás tres pestañas. Selecciona la de título “Target”.
      – Selecciona el AVD. Yo sólo tengo uno, de nombre “defecto”.
      – Ahora, en la parte inferior, verás un campo de texto con el título “Additional Emulator Command Line Options”.
      – En este campo, puedes escalar el emulador. Por ejemplo, escribe (sin las comillas) “-scale 0.50”. Con este comando, te saldrá el emulador reducido un 50%. No te olvides de pulsar el botón “Apply”.
      – Dale ahora al botón “Run”.

      Espero haber sido de ayuda.

      Muchas gracias de nuevo. ESpero que sigamos en contacto.

      Un saludo

  9. Gracias, ya lo conseguí.
    Un pequeño detalle que puede ahorrar tiempo a novatos como yo, antes cuando abría la ventana de “Run Configurations” en la pestaña de “Target” no me salía el campo de texto “Additional Emulator Command Line Options”. Solo tuve que ampliar la ventana en la parte inferior un poco para que apareciese y ya queda para siempre así.
    Un saludo.

  10. Donde estan los dos tutoriales que faltan cheke tus publicaciones pero no los encunetro el i y el ii porque este es el primero que veo iii

    • Hola Oscar. Si entras en cualquier artículo del ahorcado con android, en la parte inferior verás las categorías. Haz clic en la categoría android y te saldrán todos los artículos de Android ordenados del más nuevo al más antiguo. Como hay unos cuantos, deberás paginar a publicaciones más antiguas.
      Muchas gracias por tu comentario
      Un saludo

    • Las categorías las encontrarás al final de cada artículo, donde pone “Escrito en:”

  11. JEJEJE DISCULPE OTRA VES YO es que me equivoque puse esto:
    package misejemplos.ahorcado;

    import android.app.Activity;
    import android.os.Bundle;

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

    public class Ahorcado extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);
    MenuInflater preparamenu = getMenuInflater();
    preparamenu.inflate(R.menu.menu, menu);
    return true;
    }

    }

    en MainActivity.java de el folder src y no se como quedaba el codigo de esa clase
    espero tu respuesta de antemano graciasss

  12. ok ahorita le pongo el error

  13. Multiple markers at this line
    – R cannot be resolved to a
    variable

  14. ahora mi error es este:
    Link all references for a local rename (does not change references
    in other files) y este:
    Multiple markers at this line
    – R cannot be resolved to a variable
    – Line breakpoint:MainActivity [line: 15] –
    onCreate(Bundle)
    – main cannot be resolved or is not a field

    • Enviame el proyecto comprimido al mail que aparece en la pagina “Sobre Robiol”, a ver si encontramos el problema

      • no veo el correo si me lo puede dar

      • ya no encontre pero no se como enviarte el archivo rar
        oye no me podrias pasar tu el proyecto ya terminado esque lo necesito para pasar una materia en mi carrera de informatica😉

      • Si avanzas en los post tienes links de descarga de los fuentes. Puedes descargarlos sin problema.
        Saludos

      • ya lo envie por si puede fijarse😉

      • Le he echado un vistazo. Te explico lo que he hecho:

        Lo primero que debes tener en cuenta es que este ejemplo ya tiene un tiempo y se hizo bajo el SDK de la versión 2.2 de Android. A día de hoy es antigua, por lo que podría ser que tuvieses algunas diferencias si utilizas una versión posterior.

        1- En el Eclipse, bajo la carpeta “res” del proyecto, he borrado dos carpetas values-v11 y values-v14.
        2- he ido al menú de Eclipse project->properties y he elegido en Android el Project Build target al SDK que yo tengo instalado y con el que se elaboraron estos tutoriales, que es el 2.2 (no sé si tienes el mismo SDK, este es el que se utilizó para este tutorial)
        3- Luego he hecho Project-Clean
        4- Como último paso he borrado y reescrito las líneas de los errores (Las dos R……), le he dado a guardar y ya está arreglado.

        Supongo que todas estas modificaciones han sido obligadas porque tu entorno no es igual al utilizado en este tutorial. Te recomiendo que descargues los fuentes en posts posteriores. Encontrarás enlaces de descargas a partir del post número (V). Verás que encontrarás al final de cada post links para descargar los fuentes hasta ese punto del tutorial.

        Saludos

      • mire ya vi como enviarle bien todo el proyecto voy a enviarlo y espero su respuesta sobre mi error

      • Te recomiendo, debido a los problemas que tienes, que descargues los fuentes que encontrarás a partir del post (V)

        Saludos

A %d blogueros les gusta esto: