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: