Inicio Android Action Bar en Android (I)

Action Bar en Android (I)

por sgoliver

La action bar de Android es la barra de título y herramientas que aparece en la parte superior de muchas aplicaciones  actuales. Normalmente muestra un icono, el título de la actividad en la que nos encontramos, una serie de botones de acción, y un menú desplegable (menú de overflow) donde se incluyen más acciones que no tienen espacio para mostrarse como botón o simplemente no se quieren mostrar como tal.

actionbar-partes

La action bar de Android es uno de esos componentes que Google no ha tratado demasiado bien al no incluirla en la librería de compatibilidad android-support. Esto significa que de forma nativa tan sólo es compatible con versiones de Android 3.0 o superiores. En este artículo nos centraremos únicamente en esta versión nativa de la plataforma (configuraremos nuestra aplicación de ejemplo para ejecutarse sobre Android 4).

Tan sólo a modo de referencia diré que existe una librería muy popular llamada ActionBarSherlock que proporciona una implementación alternativa de este componente que es compatible con versiónes de Android a partir de la 2.0. Otra alternativa para compatibilizar nuestras aplicaciones con versiones de Android anteriores a la 3.0 sería utilizar la implementación que Google proporciona como parte de los ejemplos de la plataforma, llamada ActionBarCompat, que puedes encontrar en la siguiente carpeta de tu instalación del SDK: <carpeta-sdk>\samples\android-nn\ActionBarCompat

Cuando se crea un proyecto con alguna de las últimas versiones del plugin ADT para Eclipse, la aplicación creada por defecto ya incluye «de serie» su action bar correspondiente. De hecho, si creamos un proyecto nuevo y directamente lo ejecutamos sobre un AVD con Android 3.0 o superior veremos como no solo se incluye la action bar sino que también aparece una acción «Settings» como muestra la siguiente imagen.

actionbar-inicial

Vale, ¿pero donde está todo esto definido en nuestro proyecto? La action bar de Android toma su contenido de varios sitios diferentes. En primer lugar muestra el icono de la aplicación (definido en el AndroidManifest mediante el atributo android:icon del elemento <application>) y el título de la actividad actual (definido en el AndroidManifest mediante el atributo android:label de cada elemento <activity>). El resto de elementos se definen de la misma forma que los «antiguos» menús de aplicación que se utilizaban en versiones de Android 2.x e inferiores. De hecho, es exactamente la misma implementación. Nosotros definiremos un menú, y si la aplicación se ejecuta sobre Android 2.x las acciones se mostrarán como elementos del menú como tal (ya que la action bar no se verá al no ser compatible) y si se ejecuta sobre Android 3.0 o superior aparecerán como acciones de la action bar, ya sea en forma de botón de acción o incluidas en el menú de overflow. En definitiva, una bonita forma de mantener cierta compatibilidad con versiones anteriores de Android, aunque en unas ocasiones se muestre la action bar y en otras no.

Y bien, ¿cómo se define un menú de aplicación? Pues en el curso hay un artículo dedicado exclusivamente a ello donde poder profundizar, pero de cualquier forma, en este artículo daré las directrices generales para definir uno sin mucha dificultad.

Un menú se define, como la mayoría de los recursos de Android, mediante un fichero XML, y se colocará en la carpeta /res/menu. El menú se definirá mediante un elemento raiz <menu> y contendrá una serie de elementos <item> que representarán cada una de las opciones. Los elementos <item> por su parte podrán incluir varios atributos que lo definan, entre los que destacan los siguientes:

  • android:id. El ID identificativo del elemento, con el que podremos hacer referencia dicha opción.
  • android:title. El texto que se visualizará para la opción.
  • android:icon. El icono asociado a la acción.
  • android:showAsAction. Si se está mostrando una action bar, este atributo indica si la opción de menú se mostrará como botón de acción o como parte del menú de overflow. Puede tomar varios valores:
    • ifRoom. Se mostrará como botón de acción sólo si hay espacio disponible.
    • withText. Se mostrará el texto de la opción junto al icono en el caso de que éste se esté mostrando como botón de acción.
    • never. La opción siempre se mostrará como parte del menú de overflow.
    • always. La opción siempre se mostrará como botón de acción. Este valor puede provocar que los elementos se solapen si no hay espacio suficiente para ellos.

Así, por ejemplo, si abrimos el menú definido por defecto en el proyecto nuevo (llamado normalmente /res/menu/activity_main.xml si no lo hemos cambiado de nombre durante la creación del proyecto) veremos el siguiente código:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_settings"
        android:showAsAction="never"
        android:title="@string/menu_settings"/>

</menu>

Como vemos se define un menú con una única opción, con el texto «Settings» y con el atributo showAsAction=»never» de forma que ésta siempre aparezca en el menú de overflow.

Esta opción por defecto se incluye solo a modo de ejemplo, por lo que podríamos eliminarla sin problemas para incluir las nuestras propias. En mi caso la voy a conservar pero voy a añadir dos más de ejemplo: «Save» y «New», la primera de ellas para que se muestre, si hay espacio, como botón con su icono correspondiente, y la segunda igual pero además acompañada de su título de acción:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_settings"
        android:showAsAction="never"
        android:title="@string/menu_settings"/>

    <item
        android:id="@+id/menu_save"
        android:showAsAction="ifRoom"
        android:icon="@android:drawable/ic_menu_save"
        android:title="@string/menu_guardar"/>

    <item
        android:id="@+id/menu_new"
        android:showAsAction="ifRoom|withText"
        android:icon="@android:drawable/ic_menu_add"
        android:title="@string/menu_nuevo"/>
</menu>

Como podéis ver en la segunda opción, se pueden combinar varios valores de showAsAction utilizando el caracter «|«.

Una vez definido el menú en su fichero XML correspondiente tan sólo queda asociarlo a nuestra actividad principal. Esto se realiza sobrescribiendo el método OnCreateOptionsMenu() de la actividad, dentro del cual lo único que tenemos que hacer normalmente es inflar el menú llamando al método inflate() pasándole como parámetros el ID del fichero XML donde se ha definido. Este trabajo suele venir hecho ya al crear un proyecto nuevo desde Eclipse:

public class MainActivity extends Activity {

	...

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}
}

Ejecutemos la aplicación ahora a ver qué ocurre.

actionbar-vertical

Como podemos observar, la opción «Settings» sigue estando dentro del menú de overflow, y ahora aparecen como botones de acción las dos opciones que hemos marcado como showAsAction=»ifRoom», pero para la segunda no aparece el texto. ¿Y por qué? Porque no hay espacio disponible con la pantalla en vertical. Pero si rotamos el emulador para ver qué ocurre con la pantalla en horizontal (pulsando Ctrl + F12) vemos lo siguiente:

actionbar-horizontal

Con la pantalla en horizontal sí se muestra el texto de la segunda opción, tal como habíamos solicitado con el valor withText del atributo showAsAction.

Ahora que ya sabemos definir los elementos de nuestra action bar queda saber cómo responder a las pulsaciones que haga el usuario sobre ellos. Para esto, al igual que se hace con los menús tradicionales (ver artículo sobre menús para más detalles), sobrescribiremos el método OnOptionsItemSelected(), donde consultaremos la opción de menú que se ha pulsado mediante el método getItemId() de la opción de menú recibida como parámetro y actuaremos en consecuencia. En mi caso de ejemplo tan sólo escribiré un mensaje al log.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	switch (item.getItemId()) {
        case R.id.menu_new:
            Log.i("ActionBar", "Nuevo!");
            return true;
        case R.id.menu_save:
            Log.i("ActionBar", "Guardar!");;
            return true;
        case R.id.menu_settings:
            Log.i("ActionBar", "Settings!");;
            return true;
        default:
            return super.onOptionsItemSelected(item);
	}
}

Si ejecutamos ahora la aplicación y miramos el log mientras pulsamos las distintas opciones de la action bar veremos como se muestran los mensajes definidos.

Y bien, esto es todo lo que habría que contar a nivel básico sobre la action bar, si no fuera porque los chicos de Android pensaron que también sería interesante «integrar» con ella de alguna forma la barra de pestañas, en caso de utilizarse este tipo de interfaz en la aplicación. Para no alargar demasiado este artículo, de momento pararemos aquí y dedicaré una segunda parte a este tema.

Puedes consultar y/o descargar el código completo de los ejemplos desarrollados en este artículo accediendo a la pagina del curso en GitHub.

También te puede interesar

23 comentarios

Felipe Borja 14/03/2013 - 17:28

Hola Oliver.
Me parece muy bueno tu blog y tu libro, lastima que no este disponible en el momento, pero he buscado por la web la tabla de contenidos y me parece muy interesante.

He escrito una reseña sobre Libros para aprender a programar para Android, tu libro es uno de los destacados. Si quieres ver pasate por el link
http://www.usergeek.net/2013/03/libros-para-aprender-programar-para-android.html

Responder
Action Bar en Android (II) | sgoliver.net blog 14/03/2013 - 19:52

[…] comenté en el artículo anterior del curso Android proporciona un mecanismo que nos permite “integrar” (por llamarlo de […]

Responder
Donnie Emanuel 14/06/2013 - 15:27

Muchas gracias, está muy instructivo y directo al grano.

Responder
Aj 26/06/2013 - 16:06

Si quiero modificar el color, cambiar el lugar del icono?¿

Responder
Aj 26/06/2013 - 16:07

Y gracias por tu aporte muy completo!!

Responder
Action Bar en Android (III): ActionBar Compat | sgoliver.net blog 03/08/2013 - 16:57

[…] ya algún tiempo que hablamos en el curso sobre uno de los elementos visuales más representativos de las aplicaciones Android […]

Responder
Erick Cerecedo 12/09/2013 - 4:26

como le hago si quiero cambiar el icono !!!!!

Responder
asier gonzalez 17/10/2013 - 21:07

Hola creador:

muchas gracias por la dedicación de crear tan buenos manuales. Se agradece la claridad de las explicaciones y la corrección gramatical. Estar actualizado se valora muchísimo.

tengo la publicidad de internet bloqueada pero vy a clicar en tu publicidad para recompensarte por tu trabajo.

Ánimo y sigue así!

Responder
Jhon 13/01/2014 - 18:49

Buenas tardes, he seguido todos los pasos para la creación del Action Bar, cuando ejecuto la app en el emulador si se muestra el menu overflow, sin embargo cuando copio el apk a mi celular no se muestra el menú overflow mas si todas las otros botones del Action Bar.
La version de android de mi celular es 4.1.2, la app la compile con la api 4.0

Mucho agradecere su ayuda.

Responder
admin 14/01/2014 - 12:43

Hola Jhon, ¿tu terminal tiene botón (físico) de Menú? Si es así es normal que no aparezca el menú de overflow. Funciona así por diseño.

Según la documentación de Google: «The overflow icon only appears on phones that have no menu hardware keys. Phones with menu keys display the action overflow when the user presses the key.». Es decir, el menú de overflow aparecerá al pulsar el botón de Menú del terminal.

Saludos.

Responder
Pedro López 15/01/2014 - 20:17

Muchas gracias por el post me ha sido de gran ayuda. Un saludo

Responder
Daniel 22/01/2014 - 21:09

Es posible cambiar la posición del action bar? Es decir, poner por ejemplo una imagen en la parte superior de la pantalla y luego el elemento Action bar.

Saludos

Responder
Alan 11/03/2014 - 21:26

A mi me aparece solo el menu overflow y dentro de este todos los items, use android 4.4.2 y Android Studio, tiene algo que ver esto?

Responder
Jota 22/04/2014 - 12:12

Tengo una duda acerca de los action bar. Tengo 3 imágenes en las carpetas drawable, y tengo 3 item en el menu, pero no me aparecen las imágenes (una es jpg y las otras dos png, no sé si importa el tipo de archivo). Adjunto el código, para ver si me puedes decir por qué me está pasando esto:

estoy usando minimun required sdk, api 8 (android 2.2) y api 19 (android 4.4) para target sdk y compile with.

Gracias por todo.

Responder
Jota 22/04/2014 - 12:13

He pegado el código pero no aparece aquí.

Responder
pluginboy 18/05/2014 - 22:55

Buenas noches,

A mi me sucede el siguiente problema: Cuando arranca mi aplicación, primero me muestra un actionbar con el nombre de la Activity y el icono por defecto de android (el robot) como imagen del action bar y el contenido me aparece todo en blanco hasta que me carga la vista de la activity y el ActionBar tal y como lo he configurado yo. Como hacer para que salga por defecto el aspecto de mi Activity?

Responder
Erick Gallegos 09/10/2014 - 23:04

Buenas tardes, estoy haciendo una app de consulta de productos y estoy implementando en el menu 4 items diferentes los cuales representan cada uno a un filtro diferente a la busqueda, dependiendo de que opcion escojas en el menu muestra el EditText correspondiente y oculta el resto de los EditText, puse un para que cada opcion tenga un check y lo que pretendo es que en cada check se marque solo si el filtro que esta ligado a el esta activo o tiene algun valor (esto para al momento de ver el menu puedas ver que filtros estan puestos), supongo que esto se tiene que hacer en run-time ya que al momento de hacer la busqueda se tiene que validar que filtro esta activo y posteriormente marcarlo o desmarcarlo segun sea el caso solo que no eh encontrado la forma de poder hacer esto. Espero de favor me puedan ayudar con esta duda.

Responder
juan vera castillo 13/02/2015 - 17:28

Sr. Gómez

Yo adquirí vía web su libro digital.
Me parece encomiable que profesionales como usted contribuya decididamente a elevar las capacidades de mucha gente interesada en Android.
Una sola recomendación : falta distribuir a los adquirientes los proyectos completos (el código completo) de cada tema o ejercicio que usted propone, explica o desarrolla, porque todo no puede ser solo teoría y «algo de código». Se lo va a agradecer mucha gente. Felicitaciones y desde ya, gracias por la atención a esta pequeña solicitud.

Responder
sgoliver 13/02/2015 - 17:34

Hola Juan, si tienes la versión 3 del documento, al final de cada capítulo tienes un acceso directo al código completo del ejemplo en GitHub, desde donde puedes consultarlo online o descargarlo. Saludos.

Responder
Edwin 18/02/2015 - 23:05

Como puede quitar el titulo para aumentar el espacion y añadir mas botones.

Gracias

Responder
Fernando 03/04/2015 - 9:33

Como puedo hacer para quitar la actionbar y muestre la aplicación en pantalla completa

Responder
Curso Programación Android por Salvador Gómez – Indice de Contenidos | Miguel Moyetones 17/06/2015 - 21:24

[…] Interfaz de usuario en Android: ActionBar (I): Introducción [v3] [Obsoleto. Ver Appbar/Toolbar] […]

Responder

Responder a Jhon

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. Aceptar Más Información

Política de Privacidad y Cookies