Action Bar_ Tutorial Para Implementarla en Android

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

1/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/

Tutorial Sobre La Action Bar En

Androidseptiembre 26, 2014 James Revelo

En este articulo

estudiaremos las

caractersticas y el

uso de la Action Bar

(Barra de accin) en

el desarrollo Android.

Veremos su

anatoma, como crear

un archivo de diseo

para ella, como

ejecutar las acciones una vez presionado sus opciones y otras

caractersticas relevantes.

Qu Es La Action Bar Y Para Que

Funciona?Para quienes tienen dispositivos mviles ya puede deducir

algunas funciones de este maravilloso elemento. La Action Bar

es un men auxiliarde las aplicaciones Android, que se ubica

en al parte superior de cada actividad. Digo de cada actividad,

ya que es un elemento que por lo general es persistente.

COMIENZA AQU SQL RECURSOS CONTACTO

Gmail Para Tu

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

2/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 2

Esta pequea barra tiene enormes utilidades, como por

ejemplo: Proveernos acceso rpido a las acciones mas

comunes y solicitadas por los usuarios, organizar la navegacin

entre actividades(pestaas para swiping, expand and

collapse, navigation drawers, etc), proporcionarnos un

espacio donde diferenciar nuestra aplicacin de otras

aplicaciones( a travs del ttulo, iconos particulares y dems) yproyectar fcil acceso de las funcionalidades de la aplicacin.

Anatoma De La Action Bar

La barra de accin se divide en cuatro partes fundamentales

que debemos reconocer antes de empezar a programar sobre

ella. Por lo que veremos la siguiente ilustracin sobre su

estructura:

Observemos la definicin de cada segmento:

Icono de la aplicacin: Como ya hemos visto, en

esta ubicacin se proyecta el recurso drawable delicono de la aplicacin. Por defecto se ha usado un

icono predeterminado por los recursos de Android,

pero es ideal darle vida a tu aplicacin diseando

tu propia imagen, logo o distincin.

View de control: Este espacio esta diseado para

Buscar

Suscripcin Por CorreoObten gratis en tu email los nuev

artculos

Direccin De Email

Subscribirse

Sguenos En Las Redes

Sociales

Template Material Design

Be the first of your friends to li

Hermosa progr1,077 likes

Like Page

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

3/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 3

insertar views que permitan acceder al contenido de la

actividad con el fin de mejorar la navegacin. Por lo

general se usan Spinners, TextViews, SearchViews,

etc., para controlar el contenido. Normalmente vemos un

texto esttico que visualiza el nombre de la aplicacin.

Botones de accin: Representan las acciones maspopulares dentro de la aplicacin, las cuales podemos

ejecutar rpidamente al presionarlos.

Despliegue de acciones: Este segmento contiene una

lista de acciones que no son tan populares, pero pueden

ser necesitadas en algn momento por el usuario para

tener acceso de forma sencilla.

Archivo De Diseo De La Action Bar

Comencemos con el cdigo. Para experimentar el poder de la

barra de accin vamos a crear una sencilla aplicacin que nos

permita entender como funciona este elemento.

Improvisaremos una Action Bar que provea las operacionesCRUD para los elementos de una base de datos. Para ello

usaremos 5 acciones:Aadir, Editar,Eliminar, BuscaryAjustes.

Lo primero que haremos ser crear un nuevo proyecto con una

actividad principal en blanco llamado Cruder.

Para aadir el diseo a la Action Bar necesitamos usar un

archivo de diseo que contenga los nodos necesarios paragenerar las opciones.

Pero eso no es problema para nosotros, ya que Android Studio

autogener un archivo de recursos en la direccin

main/res/menu.

Contenido Recomendado

Configurar Layouts y

Views En Android Studio

Crear Swipe Views En

Android Con Tabs En La

Act ion Bar

Tutorial De Layouts En

Android

Como Crear Dilogos

En Android?

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

4/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 4

Si abres el archivo main.xml vers el diseo de nuestra Action

Bar que ha sido creada por defecto.

Veamos:

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

5/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 5

Los elementos tienen cinco atributos prioritarios que

debemos establecer para darles forma, as que veamos sus

definiciones:

id: Representa la identificacin de cada tem para serreferenciado en nuestro archivo R.java.

title: Es un string asignado para el ttulo del botn.

icon: Aqu asignaremos el icono que representar la

accin en la Action Bar . Recuerda usar una referencia

hacia tus recursos drawables.

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

6/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 6

showAsAction: Este atributo permite establecer cuando y

donde veremos nuestros botones de accin. Las

opciones mas usadas son ifRoom y never. La primera

indica que si existe espacio disponible para nuestro tem,

entonces se visualizar. La segunda indica que nunca

debe aparecer en la Action Bar, solamente en el

despliegue de botones de poco uso(Action overflow).

orderInCategory: Es un valor entero que establece la

preponderancia que tiene un tem con respecto a otro. Lo

que quiere decir que un tem con categora 1 es mas

prioritario que uno en categora 2.

Ejemplo de uso de la Action BarEn base a este conocimiento, procederemos a crear nuestro

propio men. Como ya sabemos que son cinco Action Buttons,

entonces elegiremos cuales de esos son los mas populares

para los usuarios de nuestra aplicacin.

A mi parecer, creo que la bsqueda y aadir un nuevo elemento

a la base de datos es muy relevante, el resto de opciones no es

tan frecuente usarlas. Tal vez tu lo consideres distinto y es

valido que uses tus propios criterios, por lo que no nos

complicaremos, ya que esta aplicacin solo es de propsito

educativo.

Una vez elegidos los que deseamos ver persistentemente en la

actividad, procederemos a escribir el archivo de diseo.

Este quedara de la siguiente forma:

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

7/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 7

android:title="@string/add"

android:orderInCategory="1"

android:showAsAction="ifRoom"/>

Que puedes notar? exacto!, los tems que dijimos que eran

los mas importantes se les asigno en su atributo showAsAction

la opcinifRoom

, a los dems les asignamos never.

Algo mas?bueno, si an no lo has visto, fjate en los valores

del atributo icon para los botones que se mostrarn. Tienen

referencias raras y Android Studio no muestra error alguno

por qu?

Se debe a que esos recursos drawables que estamos

referenciando no son de nosotros, son del sistema como tal. Poreso usamos el namespace android:drawable. Con eso

declaramos que deseamos usar los iconos del sistema.

Aprende ms sobre el desarrollo de aplicaciones Android

con Android Studio

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

8/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 8

Tambin hemos ubicado en orden prioritario nuestros action

buttons desde 1 a 4. ParaAjustesusamos el ndice 100 debido

a que siempre ser considerado la opcin menos solicitada en

una aplicacin.

Para este diseo la previsualizacin qued de la siguiente

forma:

El botn de Aadir se ha mostrado primero que el de buscar

debido a su prioridad. Al igual que en la seccin de despliegue,

primero est Editary Eliminarque la opcinAjustes.

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

9/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 9

Programar Los eventos En La Action

Bar

Una vez diseado el cuerpo de nuestra barra, procedemos a

programar los eventos que puedan producirse sobre ella. Para

ello disponemos de mtodos callback especiales similares a losque poseen las actividades.

Inflar el men de la Action BarEn primer lugar encontramos a onCreateOptionsMenu() . Si te

fijas en el archivo Main.java autogenerado por Android Studio,

este mtodo ya esta sobrescrito con algunas instrucciones por

defecto. Este mtodo es autoinvocado para inflar todo el cdigo

XMLque tenemos en nuestro archivo de diseo.

@Override

publicboolean onCreateOptionsMenu(Menu menu){

getMenuInflater().inflate(R.menu.main, menu);

returntrue;

}

El mtodo recibe como parmetro una instancia de tipo Menu,equivalente al elemento XML . Las instrucciones que se

dan dentro de ese mtodo son muy similares a las del mtodo

onCreate() de las actividades.

Lo primero que se hace es obtener una referencia del

MenuInflater al cual esta relacionada la actividad. Este objeto

es el encargado de inflar el cdigo de los mens para

combinarlo con la actividad. En la segunda instruccin seinvoca al mtodo inflate() para inflar el archivo R.menu.main.

Finalmente se retorna en true para indicar que todo sali como

se esperaba.

Programar los eventos de los action Buttons

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

10/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 10

Ahora usaremos el mtodo onOptionsItemSelected() para

asignar las funciones a cada botn. Este mtodo es

autoinvocado cuando el usuario presiona un botn. Al igual que

el mtodo anterior tambin veremos que Android Studio lo ha

sobrescrito:

@Override

publicboolean onOptionsItemSelected(MenuItem item){

int id = item.getItemId();

if(id == R.id.action_settings){

returntrue;

}

returnsuper.onOptionsItemSelected(item);

}

Como parmetro tiene un objeto del tipo MenuItem el cual es el

equivalente Java del nodo de XML. Para saber que

botn ha sido presionado obtenemos su identificador con el

mtodo getItemId(). Luego se usa el id como entrada de una

estructura switch , donde habr un caso por cada botn que

exista.

As que eliminaremos lo que Android Studio nos sobrescribi y

pondremos las siguientes instrucciones:

@Override

publicboolean onOptionsItemSelected(MenuItem item){

switch(item.getItemId()){

case R.id.add:

//metodoAdd() info.setText("Se presion Aadir");

returntrue;

case R.id.search:

//metodoSearch()

info.setText("Se presion Buscar");

returntrue;

case R.id.edit:

//metodoEdit()

info.setText("Se presion Editar");

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

11/24

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

12/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 12

@Override

publicboolean onCreateOptionsMenu(Menu menu){

getMenuInflater().inflate(R.menu.main, menu);

returntrue;

}

@Override

publicboolean onOptionsItemSelected(MenuItem item){

switch(item.getItemId()){

case R.id.add:

//metodoAdd()

info.setText("Se presion Aadir");

returntrue;

case R.id.search:

//metodoSearch()

info.setText("Se presion Buscar");

returntrue;

case R.id.edit:

//metodoEdit()

info.setText("Se presion Editar");

returntrue;

case R.id.delete:

//metodoDelete()

info.setText("Se presion Eliminar");

returntrue;

case R.id.action_settings:

//metodoSettings()

info.setText("Se presion Ajustes");

returntrue;

default:

returnsuper.onOptionsItemSelected(item);

}

}

}

Si todo ha salido muy bien, al ejecutar veras un resultado muy

parecido al de la siguiente ilustracin.

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

13/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 13

Hay que tener en cuenta que la seccin Action overflow de la

Action Bar se visualiza solo en los dispositivos que no tengan la

tecla men en su hardware. Si seleccionas algn AVD que

represente un modelo que contenga la tecla men, entonces

debes presionarla para poder visualizar el despliegue de

nuestras acciones secundarias.

Situaciones Enfoque-Solucin Con La

Action Bar

A continuacin te mostrar dos situaciones que tal vez puedas

llegar a necesitar cuando ests desarrollando tus aplicaciones.

Ocultar/Mostrar la Action BarEn ocasiones los desarrolladores desean ocultar la Action Bar

para satisfacer alguna necesidad o reclamar ms espacio y

claridad para la navegacin.

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

14/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 14

Resolver este inconveniente es muy sencillo y prctico,

simplemente haremos uso de los mtodos hide() y show() de

la clase ActionBar. Como su traduccin lo indica, hide()

esconde la barra y show() la muestra de nuevo.

Observemos ambos casos:

import android.app.ActionBar//Incluye la dependencia

...

//Obteniendo la instancia

ActionBar actionBar = getActionBar();

//Escondiendo la Action Bar

actionBar.hide();

...

//Mostrando de nuevo la Action Bar

actionBar.show();

Solo basta con acceder a la instancia de la barra con el mtodo

getActionBar() de la clase Activity.

Cambiar el icono de la Action BarEste cambio es muy frecuente para la personalizacin de

nuestras aplicaciones. Ya hemos visto que el icono de la ActionBar es el mismo icono de lanzamiento de los recursos de

Android. As que para cambiarlo debemos crear primero nuestro

propio icono o logo y situarlo en la seccin App Icon.

Si el icono ser prestablecido cuando se inicia la aplicacin,

entonces podemos aadirlo de forma descriptiva al archivo del

men. Para asignar el icono usaremos el atributo android:logo

en la etiqueta del archivoAndroidManifest.xml. Su valor ser la referencia de un recurso

drawable que represente a nuestro logo.

Por ejemplo

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

15/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 15

android:icon="@drawable/ic_launcher"

android:logo="@drawable/logo"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

Esta indicacin especifica que deseamos que este logo

aparezca en la Action Bar una vez iniciada la aplicacin. La

siguiente ilustracin muestra el uso de un logo personalizado.

Y finalizando, si deseas aadir el icono en tiempo de ejecucin,

entonces usa el mtodo setIcon() de la clase ActionBar.

ActionBar actionBar = getActionBar();

//Seteando el icono

actionBar.setIcon(R.drawable.logo);

Con este sencillo mtodo podemos acceder en tiempo real a

nuestro recursos y asignar la imagen correspondiente. El

parmetro que recibe setIcon() es un entero que representa la

referencia que tenemos en las carpetas drawables.

Conclusin

En este artculo vimos cmo implementar la action bar en

Android. Esto permitir aadir action buttons para el

funcionamiento general de una app.

Se explicaron varias caractersticas como ocultar la action bar,

cambiar el icono y procesar eventos de los botones.

Sin embargo, el nuevo estilo de diseo creado por Google

llamado Material Design, ha cambiado un poco el enfoque de la

action bar a travs de un nuevo componente llamado App Bar.

Si deseas aprender ms puedes ver el artculo Toolbar En

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

16/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 16

Android: Creacin De Action Bar En Material Design.

Obtn plantilla para crear juego estilo Flappy Bird

Contenido Recomendado

Desarrollo Android Desarrollo Android, UI. permalink.

Configurar Layouts y

Views En Android Studio

Crear Swipe Views En

Android Con Tabs En La

Act ion Bar

Tutorial De Layouts En

Android

Como Crear Dilogos

En Android?

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

17/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 17

Comentarios 1

Wilson F Lemus Montaa

Este codigo va en el onCreate() ?? porque ahi lo agrego y no

me deja ejecutar la app.

ActionBar actionBar = getActionBar()

//Seteando el icono

actionBar.setIcon(R.drawable.logo)

James Revelo Urrea

Moder.

Creo que primero debes comprobar que el resultado

de getActionBar() no sea null y luego si llamar a

setIcon().

Wilson F Lemus Montaa

Gracias. Ps lo que hice fue esto. Yo estaba

haciendo un extends Activity, y lo cambie a

un extends ActionBarActivity y ahi si me

sirvio. Pero el ActionBarActivity me aparece

tachado lo cual quiere decir que ya no se

debe utilizar. Aun estoy leyendo creo que en

las ultimas versiones de Android Studio toca

extender de AppCompatActivity. Si alguiensabealgo sobre el tema, le agradeceria.

Gracias James por respoder

James Revelo Urrea

Moder.

Si wilson, en este momento se usa

AppCompatActivity y la action bar

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

18/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 18

Toolbar. Mira este articulo:

www.hermosaprogramacion.com/20...

Wilson F Lemus Montaa

James muchas gracias, la verdad que

buen aporte!!! Pronto le contare comome fue

James Revelo Urrea

Moder.

ok amigo :)

Jess

Hola, primero felicitaros por la estupenda web!

No se como solucionar: al intentar personalizar el action bar,

en style me arroja error de "top level element is not

completed" y "valid xml document must have a root tag" la

hacer la herencia del tema

"Theme.AppCompat.Light.DarkActionBar"

@color/primary

@color/primary_dark

@color/accent

Gracias, y saludos

James Revelo Urrea

Moder.

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

19/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 19

Jess

Me subraya en rojo

Theme.AppCompat.Light.DarkActionBar y

pinchando en la marca roja de la derecha me

da "top level element is not completed" y "validxml document must have a root tag"....He

vuelto ha cargar un nuevo proyecto y he

comprobado con en style que por defecto

incorpora tambin lo marca, adems, aunque

"reconoce" los colores tambin lo marca....

Vaya ando algo perdido, espero que despus

de un tiempo me encuentre :( !

Gracias

Jess

Hola de nuevo... cada pasito que doy

me tropiezo :(. Ahora al intentar

insertar el logo en el action bar me da

el siguiente error Cannot resolve

symbol "R"...Gracias, y disculpa las

molestias...

James Revelo Urrea

Moder.

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

20/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 20

Compaero revisa que el paquete

Java que est referenciado en tu

AndroidManifest tiene el mismo

nombre que el de tu proyecto. Fijate.

Si es igual, entonces dale rebuil

project o clean project.

Jess

muchsimas gracias! Con rebuilt

project ha solucionado el Cannot

resolve symbol R. : )

Pero no he conseguido solucionar en

styles, el error que me seala "top

level is not completed" y "Valid xml

must have a root tag", aunque no

impide que el emulador lance la

aplicacin. : (

Alguna idea?

James Revelo Urrea

Moder.

Que tal si en el encodificado de tu

archivo cambias CRLF por LF?

Jess

En primer lugar, agradecerte el tiempo

prestado y la ayuda.

Lo he cambiado pero me sigue

marcando ese error.

Jess

Al rebuilt project me rebota el siguiente

mensaje:

Error:(2) Error retrieving parent for

item: No resource found that matches

the given name

'Theme.Appcompat.Light.DarkActionB

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

21/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 2

rror: xecu on a e or as

':app:processDebugResources'.

>

com.android.ide.common.process.Pro

org.gradle.process.internal.ExecExcep

Process 'command

'C:\Users\Public\programacion\Android

tools\23.0.1\aapt.exe'' finished with

non-zero exit value 1

Por si podra ayudar para solucionar el

problema...pues como podrs

comprobar, an intentando gatear me

pierdo. : (

Gracias, nuevamente por la ayuda : )

James Revelo Urrea

Moder.

Mira esta respuesta:

http://stackoverflow.com/quest...

aldakur

Alguna idea, para que algn botn aparezca en la parte

izquierda de la ActionBar mientras que otros se mantengan a

la derecha?

James Revelo Urrea

Moder.

Hola amigo, te refieres al orden de que uno vaya

primero que otro o a mover el action button al lado del

titulo?

Cristopher

Funciona en la version 2.3 de android???

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

22/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 22

Marien Sequera

Gracias, me sirvio mucho

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

23/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

http://www.hermosaprogramacion.com/2014/09/android-action-bar/ 23

an er or.

de paso otra como puedo hacer que

mi aplicativo muestre un tutorial solo

una vez al instalar de ah nunca mas

aparezca, a menos que lo desinstale y

lo vuelva a instalar.

James Revelo Urrea

Moder.

Una solucin sencilla podra ser

almacenar un valor en un shared

preferences que se guarde en disco

para tener como bandera el estado

actual. Cuando inicie la app

preguntaras la preferencia es true?,

si es positivo entonces no muestras laintroduccin y sigues de largo.

Gonzalo Mosquera

EL icono personalizado de donde lo saca usted?

James Revelo

Hola Gonzalo.

Lo encontr en iconfinder.com

Miguel

Porque no aparece el icono en la actividad a pesar de

ponerlo en el manifest.?

Miguel

Hola, fijate que hice el ejercicio pero el icono que deseo

poner en el action bar no aparece. Puse en el manifest

android:logo="@drawable/logo"

James Revelo

Hola Miguel.

7/24/2019 Action Bar_ Tutorial Para Implementarla en Android

24/24

4/11/2015 Action Bar: Tutorial Para Implementarla En Android

Esto sucede porque tal vez ests extendiendo tu

actividad de ActionBarActivity o de

AppCompatActivity. En este caso debes poner el

cono en onCreate() de la siguiente manera:

// Habilitas icono

getSupportActionBar().setDisplayShowHomeEnabled(true)// Usas el drawable que deseas

getSupportActionBar().setIcon(R.drawable.logo);

Gabriel RS

Proudly powered by WordPress| Theme: Bizmo by Storefront Themes.