Androideity

Programación android en español, tutoriales, documentación, noticias, smartphones, tablets, programación android, aplicaciones android

Action Bar Android usando Eclipse

| | 32 Comentarios

Twitter: @JaimeYesidLeon

En repetidas ocasiones me han dicho que las TabActivity que explicamos en 2 artículos anteriores, Pestañas en Android usando Eclipse y Pestañas en Android usando Eclipse segunda Parte están obsoletas en las versiones 3.0 de Android en adelante, y tienen razón, pero si Android hace esto es porque quiere que las aplicaciones que desarrollemos sean cada vez más funcionales y estéticamente más agradables para los usuarios. Es por eso que hoy les traigo un tutorial en el cual podremos ver el Action Bar que nos ofrece Android para nuestros desarrollos.

Los desarrolladores de aplicaciones en Android cuentan con varios patrones de diseño que proporciona Google para que sus apps sean agradables, fácilmente entendibles y lo mayormente intuitivas posible, es por eso que los recursos con los que se contaban en versiones anteriores, van siendo obsoletas o no más soportadas, cosa que se agradece por parte de nosotros lo que desarrollamos apps en Android; pongámoslo asíi de fácil, imagina que tu eres fabricante de ropa, y sigues haciendo los mismos pantalones bota campana, camisas de solapas gigantes  y zapatos doble piso o suecos que fueron furor en los años 70, pues muy seguramente nadie te va a comprar la ropa a menos que vayan a comprar un disfraz para el dia de Halloween; así que pasemos a usar los recursos que nos recomiendan desde la casa de Android.

 Las aplicaciones no se pueden quedar como inicialmente fueron concebidas, como diseñador de apps debes estar muy pendiente de las nuevas tendencias en el diseño, “debes estar a la moda” en cuanto a funcionalidad y esteticidad se trata, así que hoy te traemos la tendencia en el diseño de las aplicaciones, en donde en la misma pantalla tienes diferentes botones que con su imagen nos dan una idea de lo que son y para lo que sirven, un ejemplo de estas aplicaciones son las de Youtube, Twitter, Instagram, Facebook y muchas mas:

Podemos ver que las apps más populares para Android usar ActionBar como herramienta de acceso a sus diferentes opciones de uso, así que hoy vamos a ver lo sencillo que es el uso de esta herramienta en nuestra aplicaciones, pero como siempre te decimos, el mejor sitio para que consultes sobre este y cualquier tema de desarrollo es la página oficial de desarrolladores de Android, y el enlace que habla sobre ActionBar es el siguiente: ActionBar Android al cual te remitimos para que lo estudies y encuentres toda la información que no te podemos hacer llegar, nosotros te damos un acercamiento y un ejemplo del recurso, pero si quieres profundizar más en este tema, ve directamente a la fuente.

Así que si nada más que hablar, vamos a empezar con el ejemplo de uso en el cual mostraremos como se usa el ActionBar, como crear un ítem dentro de la barra, como saber cuando fue pulsado el item respectivo y como acceder a nuestro boton de Home, no sin antes dejar claro que el proyecto funciona para versiones de Android 3.0 y superior, si deseas usar este recurso en versiones menores, debes importar la librería de compatibilidad, cosas que si es necesario lo explicaremos en otro tutorial, por ahora empecemos con el tutorial:

1. Creamos nuestro proyecto al cual llamaremos “TutorialActionBar” y en este caso usaremos la versión 4.0 y que soporte hasta la versión 3.1.

2. Ya creado nuestro proyecto, le damos un nombre a nuestra Activity principal y a nuestro layout, que en este caso le daremos el nombre de ActionBarActivity y al layout el nombre de main, como te muestro a continuación:

3. Cuando creamos nuestro proyecto, empezamos a codificar nuestra Activity, vamos a sobreescribir un método de esta clase llamado onCreateOptionsMenu que sirve para crear nuestro menú y que recibe como parámetro un objeto de tipo Menu, y dentro de este método llamamos a un método que llamamos CreaMenu y le pasamos el objeto menu, quedando el código de la siguiente manera:

4. El método que llamamos CreaMenu y el cual recibe un objeto de tipo Menu crea cada uno de los ítems que se mostrarán en nuestro ActionBar; en nuestro caso vamos a crear 5 ítems de los cuales los 3 primeros van a tener un icono que los identificará y los otros 2 solo tendrán texto. Para crear un ítem lo hacemos utilizando un objeto de tipo MenuItem y para agregarlo utilizamos el método add, que recibe tres parámetros: el Id, el orden, y el nombre que va a tener cada item.
Por último para cada item que creamos, llamamos al método setIcon para indicarle la imagen que utilizará el item. Además debemos llamar al método setShowAsAction con la constante SHOW_AS_ACTION_IF_ROOM para indicar que vamos a usar este ítem como un elemento interactivo el cual vamos a pulsar y usar para hacer alguna acción; así que el código de este método es el siguiente:

 Cuando llamamos al método setIcon, seleccionamos las imágenes que van a ir en cada uno de los ítems, para este caso elegí 3, los cuales se llaman calendar, lock y question y deben ir guardados en la carpeta res/drawable,como se ve en la siguiente imagen:

 5. Como ya creamos nuestros items, debemos crear un método para que cuando estos sean pulsados sepamos cual fue, para hacer esto debemos sobreescribir el método onOptionsItemSelected que recibe como parámetro un objeto de tipo MenuItem:

Dentro de este método vamos a llamar un método llamado MenuSelecciona y que recibe el objeto MenuItem, y que devuelve una variable de tipo boolean para saber si fue consumida la acción de cada item creado. Dentro de este método definiremos las líneas que nos ayudarán a mostrar una alerta de tipo Toast que indicará que fue pulsado ese ítem. Es aquí dónde deberás sustituir el código que te permita realizar las acciones que necesites que haga tu aplicación. El código quedaría de la siguiente manera:

 Hasta este paso ya podremos terminar con nuestro código, pero como mencioné en la introducción al tutorial, vamos a aprender cómo se utiliza el elemento Home del ActionBar. Pero, ¿qué es el botón Home? Pues es aquel que siempre está en la barra del título pero que no se le daba ningún uso, si has usado la app de Youtube en Android es aquel que se activa cuando pulsas sobre el logo de Youtube:

Para activarlo lo que vamos a hacer primero es crear un objeto de la clase ActionBar dentro del método onCreate de la Activity principal y llamamos al método setDisplayHomeAsUpEnabled y lo configuramos a true, para que se active este botón, quedando el código de la siguiente manera:

 También necesitaremos saber cuando el botón Home sea pulsado, así que dentro de nuestro método MenuSelecciona, adicionamos un nuevo case dentro del switch para saber cuando sea pulsado el Home, así que el método quedaría de la siguiente manera:

 Con esto quedaría listo todo el código que necesitamos para manejar nuestro ActionBar, si corremos el código y pulsamos sobre cada uno de nuestros items se vería cómo se ve en la siguiente imagen:

 Y si te preguntas, ¿en dónde rayos están los otros item que agregaste? Como podrás observar en tu ejemplo únicamente están visibles 2 de los 5 items y el item de Home (la lupita con la fecha). Pues la respuesta es que mires la siguiente imagen y obtengas la respuesta:

 Ah ok, entonces cuando la pantalla está en modo retrato solo muestra unos ítem y cuando está en modo paisaje muestra lo demás porque la pantalla tiene más espacio disponible, ¿pero en dónde está el quinto item que agregamos? ¿y si mi aplicación sólo estará configurada para mostrarse en modo retrato que pasa con los demás ítems? Ok, entonces te invito a que mires la siguiente imagen y saques la respuesta:

Lo que pasa es que como creamos objetos de tipo Menu, cuando no son mostrados están ocultos los item que no pueden ser mostrados, pero podrás ser activados con el botón Menu.

Bueno como siempre hago en mis tutoriales un video del paso a paso del proyecto, y cómo está vez no será la excepción, te dejo abajo el video que muestra cómo manejar el ActionBar en Android usando eclipse para aquellos que prefieren ver todos los detalles, y además como en Androideity se ha venido haciendo desde hace unos meses, todos los proyectos los dejamos en GitHub para que los descargues, y puedas revisar algún error que te haya salido a lo largo del seguimiento del tutorial. Con esto ya tienes todos los recursos para trabajar, así que dale.

Por ahora no es más pero tampoco menos, espero que te sirva este aporte a tus proyectos Android, y si tienes dudas con mucho gusto déjalas abajo en los comentarios que tan pronto como pueda las contestaré, aunque si puedes darme una manito y avisar por twitter que dejaste un comentario te lo agradezco.

Nota: Si detectas algún error en el código, en la explicación, escrito o en el video, por favor escríbenos y con mucho gusto la corregimos. Agradecemos tu ayuda.
Nota 2: A partir de esta entrega dejaremos todo el código de los proyectos en un repositorio alojado en GitHub , por lo tanto solo tendrás que descargar el proyecto y verificar si tienes alguna duda. Abajo te dejo el enlace directo para la descarga.

 

Descarga el proyecto:

Comparte este post

Acerca de: jaime

Hola, mi nombre es Jaime Yesid Leon, soy de Bogotá–Colombia, soy Ingeniero Electrónico, me encanta la electrónica, los microcontroladores y la programación. Practico futbol, leo mucho y no dejo los video-juegos para nada. Hago lo que me gusta y desde que conocí el SO Android me enamore y por eso estaré aquí aportando mi granito de arena a Androideity, una pagina genial.

Sígueme en Twitter

Leer todos mis artículos

También puede interesarte

Comentarios de este artículo

  • http://twitter.com/seba_cipolat sebastian cipolat

    Muy interesante!

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Gracias Sebastian, aunque el de Twitter tuyo esta pasado, muy bueno amigo, si sigues asi la pagina va a seguir creciendo mucho.

      Saludos

  • José Intriago

    Excelente artículo!!!… Solo como sugerencia se podría complementar el artículo haciendo uno que explique como utilizar el paquete de compatibilidad para tener funcionalidad como el ActionBar por ejemplo, en terminales con S.O. menos a 3.1.

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola José,
      Muchas gracias por tu comentario. Y tienes toda la razon, como digo en el articulo es necesario la libreria de compatibilidad para versiones menores a HoneyComb, y no lo explique para que no se extendiera mucho el tutorial, pero si es necesario claro que hacemos otro tutorial de como usar esta libreria.

      Cordial saludo

      Jaime

      • DMR

        Yo creo que sería bueno hacer ese tutorial. Al menos yo lo necesito.

        He probado diferentes implementaciones pero na…

        Por cierto gracias por los tutoriales. Son muy buenos.

  • Raul

    Muy buen artículo! Tenía tiempo de estar esperando otra de sus publicaciones. Su página es excelente. Sigan adelante.

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Muchas gracias por tu comentario Raul.
      A veces duramos algo de tiempo sin publicar porque debemos sacar tiempo del resto de actividades, pero cuando nos dedicamos a escibir lo hacemos con gusto.
      Espero sacar mas tiempo para escribir porque tengo varios temas para muchos tutoriales.
      Cordial saludo

      Jaime

  • Andresbv

    Hola Jaime,

    lo primero agradecerte tu trabajo y tu amabilidad compartiendo conocimientos.
    No se si estaré pasando algo por alto, pero intento bajar el proyecto y desde la imagen que hay al final del tutorial, el enlace es a un png y busco el proyecto en el github de androideity y no lo localizo.
    Serías tan amable de indicarme de donde descargarlo?

    Gracias y un saludo :)

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Andres,
      Tienes toda la razon, el enlace esta fallando, espero corregirlo lo mas pronto que pueda para que lo puedas descargar, gracias por el aviso.

      Cordial saludo

      Jaime

      • Andresbv

        Estupendo, pues agradecería mucho si nos comentáis por aquí cuando esté disponible. Estamos ya unos cuantos esperándolo.

        Gracias de nuevo y saludos

        Andrés

  • Byron Abel Arciniega Orozco

    Hola, Muchas Gracias por tu aporte nos está haciendo de mucha ayuda con el desarrollo de una aplicación aunque penas la estamos realizando, nos seria de mucha ayuda tus consejos, soy un estudiante de preparatoria te agradecería si podrías hablar un poco en tus videos así creo que sería un poco más fácil, pero dejando eso de lado gracias y si podrías ponerte en contacto conmigo para que me des algunos consejos sobre cómo tanto comenzar y terminar mi proyecto te estaría muy agradecido…

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Byron Abel:
      Muchas gracias por tus comentarios, son de mucho aliento para seguir escribiendo mas tutoriales.
      Lo de hablar en los videos ya me lo han dicho antes y no lo hago para que los videos no sean muy largos, pero voy ha hacer la prueba en el siguiente video a ver como me va; si ves el proximo video me dices como sale.

      Si necesitas ayuda puntual, escribemela aqui en los comentarios para que otras personas te puedan ayudar o que la respuesta les sriva a otros; pero si es algo mas de tu proyecto en particular enviame un tweet y nos contactamos.

      Cordial saludo

      Jaime

  • condesa

    Hola a todos los lectores,

    Ya se ha actualizado la falla que había con el link del proyecto en el repositorio. Disculpen las molestias. Ahora sí, ya pueden descargarse el código de Yesid :)

    Saludos.

  • Sergio Dorantes

    Se

  • Sergio Dorantes

    Se agradece el tutorial acerca del uso del Action Bar, y tengo una duda que espero que este relacionada con este tema. Veo que hay kits para photoshop de todos los views disponibles digamos para ICS, pero quiero saber cómo se utilizan, como se mezcla la parte de photoshop con el desarrollo en eclipse, espero puedas comentar al respecto

  • Butifarro

    Más vale tarde que nunca. Buen tutorial, gracias por el aporte

  • J@S

    Gracias por el tutorial pero como se haría para versiones menores?????

  • Ignasi

    Hola, gracias por el tutorial, muy bueno. Creo que a partir de la versión 3.0 de Android, los terminales no disponen de la tecla menú. Estoy creando una aplicación con:

    Y no consigo que aparezca el menú de ninguna forma en los terminales que no tienen la tecla menú. Debería de salir por defecto la action bar? Un saludo.

  • LuiTrO

    Gracias por vuestro trabajo. Podíais hacer un tuto sobre el menú latera (como el menú del youtube) como hacerlo aparecer y desaparecer con un gesto de arrastre. O sobre el desplazamiento de tabs haciendo un gesto de arrastre (swipe). A ver si me animo y hago aplicaciones exclusivas de android 4.

    De nuevo, gracias por vuestro trabajo, ya podía aprender google y traducir su pagina de desarrolladores.

  • Bto

    y si quiero poner un tab host y aparte funciones en el action bar??? que me recomiendan

  • Melissa

    Me funciona si elimino

    @Override
    public boolean onOptionsItemSelected {
    return MenuSeleciona(item);

    El override me sale como error.. Porque sucede esto?
    Excelente aporte!

    • Melissa

      Listo, tenia un error en el codigo. Muchas gracias. Excelente todo..
      Puedo el Item1 y el Item2 a diferentes layout?

  • http://twitter.com/kennyeni Kenny

    Solo queria recomendarles Sherlock Action Bar para que tengan retro compatibilidad :)

  • Luitgy

    Hola,
    .
    primero de todo muchas gracias por todos vuestros tutoriales, siempre son de gran ayuda!!! estaríamos perdidos sin vosotros :D . Nos podrían explicar como hace por ejemplo la aplicación twitter para que también se pueda cambiar arrastrando con el dedo? Es que me iría genial para la aplicación que estoy desarrollando

    Muchas gracias por vuestra ayuda!

  • chipilofan

    Seria bueno completar este tutorial, abriendo camino de como se implementa la librearia de ActionBarSherlock, para dar soporte a otras versiones, saludos.

  • chipilofan

    Seria bueno completar este tutorial, abriendo camino de como se implementa la librearia de ActionBarSherlock, para dar soporte a otras versiones, saludos.

  • http://www.facebook.com/opintosalazar Oscar Jose-Antonio Pinto Salaz

    Muy bueno Jaime, muy buen ejemplo…

  • Brandon

    Hola que tal, como hago un boton de desbordamiento e ingresar dentro de el un icono y un texto que yo quiesiera??? Saludos

  • Edgar Tenesaca

    jajajaj busque como hacer eso por todo internet… y era asi de facil.. muchas gracias..

  • Edgar Tenesaca

    Hola soy desarrollador de software desde hace ya varios años… pero ahora estoy incursionando en Android… sera que me pueden agregar los miembros de su organizacion Androideity en GITHUB.. para asi poder colaborar con sus proyectos???. muchas gracias de antemano. yo soy https://github.com/etenesaca mi correo es edgartenesaca@gmail.com

  • Ismael

    y para el caso de los telefonos que no tienen ya el botón de menú como el Mototola Razor D3, como le haría para mostrar los items ocultos si no cuenta ya con el botón de menu??
    Gracias.

  • Enrique Gudiño

    Estaba en un bomberaso para añadir un action bar y de verdad que me saco del apuro muchas gracias Jaime