ActionBar y Tabs en AndroidPodramos decir que la ActionBar es una barra de herramientas que nos permite ubicar al usuario en todo momento indicando en que actividad se encuentra (a travs de un titulo y subtitulo) y a parte nos proporciona un espacio para crear acciones de usuario (ya sean botones de accin, botn de bsqueda, listas desplegables, tabs, ...)

La API de esta herramienta apareci por primera vez en Android 3.0 (API 11) pero a travs de lalibrera de compatibilidad"android-support-v7-appcompact" podemos hacerla compatible a partir de Android 2.1 (API 7). En esta guia haremos uso de dicha librera para hacer compatible la ActionBar con el mayor numero de dispositivos posibles.

Para la realizacin de este articulo se ha cogido como base la guia de desarrolladores Android:ActionBar. Al final de este articulo tendremos la descarga del proyecto con todo lo incluido en l.

Comentar que tendramos la posibilidad de crear una ActionBar a travs de una librera externa que prcticamente es una extensin de la librera de compatibilidad que usaremos en este articulo. Dicha librera se llamaActionBarSherlocky es compatible a partir de Android 2.0 (API 5).

Tabla de contenidos

1. Aadir librera de compatibilidad 2. Utilizar ActionBar en nuestro proyecto 2.1 Aadir elementos de accin 2.2 Manejar clicks en los elementos de accin 2.3 Habilitar el botn volver en la ActionBar 2.4 Dividir ActionBar 2.5 Aadir drop-dwon (spinner) 2.6 Aadir una vista de accin 2.7 Aadir un proveedor de accin 2.8 Crear layout personalizado

3. Crear men de navegacin (Navigation Drawer) 3.1 Habilitar el icono de la ActionBar 3.2 Manejar eventos click del men 3.3 Manejar eventos de apertura y cierre del men

4. Creacin de pestaas (Tabs) 4.1 Crear views deslizantes (ViewPager) 4.2 Crear tabs para ViewPager 4.3 Utilizar view desplazables

5. Aplicar estilo a la ActionBar

6. Cdigo fuente del articulo

1. Aadir librera de compatibilidad

Primero debemos importar la librera a nuestro workspace siguiendo estos pasos:1. File/Import/Android/Existing Android Code Into Workspace.2. Buscamos la librera ubicada en la carpeta/android-sdk/extras/android/support/v7/appcompact/3. Seleccionamos la librera y finalizamos.Con esto ya tenemos la librera cargada en nuestro workspace. Lo siguiente es aadir la librera a nuestro proyecto siguiendo estos pasos:1. Seleccionamos nuestro proyecto y entramos en sus Propiedades (hay varias maneras de hacerlo: desde el men Project, con click derecho encima de nuestro proyecto o combinando las teclas Alt+Enter).2. Una vez abierta la nueva ventana pinchamos abajo del todo en Add...3. Seleccionamos la librera y aceptamos.Al final debe quedar algo muy similar a esta captura:

2. Utilizar ActionBar en nuestro proyecto

Para hacer visible la ActionBar en nuestra aplicacin simplemente deberemos editar el AndroidManifest y establecer un theme del conjunto de temas "Theme.AppCompact". Podemos hacerlo directamente en o en la , todo dependern de nuestras necesidades.

Seguidamente en nuestra actividad tendremos que extender la clase "ActionBarActivity" y con esto ya podramos ejecutar la aplicacin y tendramos visible la ActionBar en pantalla. Por defecto pondr como icono el establecido en "android:icon" y como titulo lo establecido en "android:label".

Para poder trabajar con ella tendremos que crear una instancia del objetoActionBar.

ActionBar actionBar = getSupportActionBar();

Y ya podramos usar mtodos como los siguientes:

actionBar.hide(); //Ocultar ActionBar actionBar.setIcon(Drawable); //Establecer icono actionBar.setTitle(CharSequence); //Establecer titulo actionBar.setSubtitle(CharSequence); //Establecer Subtitulo

2.1 Aadir elementos de accin

Para crear elementos de accin primero tenemos que crear un recurso del tipo "menu" en el que indicaremos todos los items o elementos de accin que nos sean necesarios. Este recuso hay que crearlo dentro de la carpeta /res/menu/

A continuacin vemos un ejemplo que explicaremos seguidamente:

Para crear un tem o elemento de accin simplemente utilizaremos los atributos "id" y "title". Con esto conseguiremos que en nuestra aplicacin nos muestre un men desplegable.

Si lo que queremos es mostrar los elementos de accin como un icono en el ActionBar, deberemos aadir a la declaracin de nuestro men, la siguiente herramienta:

xmlns:yourapp="http://schemas.android.com/apk/res-auto"Donde "yourapp" tenemos que sustituirlo por el nombre del paquete de nuestra aplicacin, ejemplo:

xmlns:com.example.actionbar="http://schemas.android.com/apk/res-auto"Una vez hecho esto ya podremos hacer uso del atributo "showasaction" en el que tendremos que hacer exactamente lo mismo con "yourapp". Este atributo nos permite controlar de que manera se va a mostrar el elemento de accin. Tiene las siguientes configuraciones:1. ifRoom(Mostrara el "icon" en el ActionBar si tiene espacio)2. always(Mostrara siempre el "icon" en el ActionBar)3. withText(Se debe usar junto a "ifRoom" o "always" y mostrara el "icon"+ "title" si tiene espacio)4. never(El tem siempre estar incluido en el men desplegable)Deberemos tener en cuenta que hacer uso de la conflagracin "always" puede causar problemas de diseo en dispositivos con pantallas pequeas, por lo que es mas que recomendable utilizar la configuracin "ifRoom" para que nos gestione el espacio disponible y muestre automticamente los elementos de accin que entren en ese espacio.

Una vez creado el recurso men con los elementos de accin necesarios deberemos inflar la vista en nuestra activity a travs del siguiente mtodo:

public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu, menu); return super.onCreateOptionsMenu(menu); }

Para la creacin de los iconos podemos visitar esta herramienta de Android Studio:Action Bar and Tab Icon Generator

El resultado puede ser el siguiente:

2.2 Manejar clicks en los elementos de accin

Cuando pulsamos un elemento de accin, el sistema hace una llamada al mtodo "onOptionsItemSelected()". A travs de este mtodo podremos identificar que botn de accin se a pulsado, simplemente le tendremos que aplicar el mtodo "getItemId()" a su parmetro "MenuItem" y como resultado tendremos id del tem pulsado. Podemos ver todo esto en un ejemplo:

public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.buscar: Toast.makeText(getApplicationContext(), "BUSCAR", Toast.LENGTH_SHORT).show(); return true; case R.id.cortar: Toast.makeText(getApplicationContext(), "CORTAR", Toast.LENGTH_SHORT).show(); return true; case R.id.copiar: Toast.makeText(getApplicationContext(), "COPIAR", Toast.LENGTH_SHORT).show(); return true; ... ... ... default: return super.onOptionsItemSelected(item); }}Lo primero que hacemos es crear un switch para manejar los diferentes botones de accin que hayamos declarado en nuestro recurso men. Al switch le aplicamos el mtodo "getItemId()" para conocer la id del botn de accin que ha sido pulsado y para terminar creamos tantos casos como botones de accin tengamos. En este caso simplemente mostramos un Toast al pulsar un botn de accin.

2.3 Habilitar el botn volver en la ActionBar

Android nos permite habilitar el icono de la ActionBar como un botn volver. Para ello tenemos que seguir dos pasos:1. Activar el botn volver en la ActionBar a travs del siguiente mtodo: actionBar.setDisplayHomeAsUpEnabled(true);

1. Indicar a que actividad volver despus de pulsar el botn volver, para ello tenemos dos posibilidades de hacerlo:(2.1) Especificar la actividad padre en el AndroidManifest (es la mejor opcin cuando la actividad padre siempre es la misma, a continuacin se muestra un ejemplo)

(2.2) Reemplazar los metodos "getSupportParentActivityIntent()" y "onCreateSupportNavigateUpTaskStack()" en nuestra activity (esta forma es apropiada cuando la actividad padre puede ser diferente).

2.4 Dividir ActionBar

Android nos ofrece la posibilidad de dividir la ActionBar (Split ActionBar), esto quiere decir que nuestra aplicacin podr tener un panel superior (ActionBar) y un panel inferior (con los elementos de accin). Para hacer uso de una ActionBar dividida simplemente deberemos establecer un atributo para cada activity que lo necesite dentro del AndroidManifest.1. Aadiendo el atributo "uiOptions" a cada activity conseguiremos una ActionBar dividida (este mtodo solo es compatible con versiones superiores a un nivel de API 14)2. Para hacerlo compatible con versiones anteriores de Android tendremos que agregar un a cada activityUn ejemplo para hacerlo compatible con la mayora de versiones seria el siguiente:

El resultado puede ser el siguiente:

2.5 Aadir un drop-down (spinner)

Podremos crear una lista deplegable como la que muestra la imagen:

Empezaremos creando un recurso string-array que nos servira para almacenar los items de la lista desplegable, podemos hacerlo tanto dentro del archivo strings.xml o bien podemos crear uno nuevo, como nos sea mas cmodo.

Lunes Martes Miercoles Jueves Viernes Sabado Domingo

El siguiente paso seria modificar el modo de navegacin de la ActionBar y establecerlo en lista deplegable. Para ello utilizaremos el siguiente cdigo en el onCreate de nuestra activity:

ActionBar actionBar = getSupportActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

Una vez hecho esto necesitaremos crear un adaptador "SpinnerAdapter" que utilizaremos para indicar que items se mostraran en la lista desplegable (el recurso string-array creado antes) y que diseo tendr dicha lista.

SpinnerAdapter adapter = ArrayAdapter.createFromResource(this, R.array.lista, android.R.layout.simple_spinner_dropdown_item);

Para terminar implementamos la interface "ActionBar.OnNavigationListener" que nos servir para manejar los eventos del usuario al pulsar un tem de la lista desplegable. Vamos a dividir este paso en tres:1. Implementar interface"ActionBar.OnNavigationListener"2. Aplicar interface a nuestro objeto ActionBar a traves del metodo "setListNavigationCallbacks()"3. Sobreescribir el mtodo obligado de esta interface "onNavigationItemSelected()" // Implementar interface ... implements ActionBar.OnNavigationListener { ...} // Aplicar interface a nuestro ActionBar (dentro del onCreate) actionBar.setListNavigationCallbacks(adapter, this); // Sobreescribir metodo public boolean onNavigationItemSelected(int arg0, long arg1) { switch (arg0) { case 0: // Opcion seleccionada Lunes break; case 1: // Opcion seleccionada Martes break; ... ... } return false; }

2.6 Aadir una vista de accin

Una vista de accin es simplemente un widget que aparece en nuestro ActionBar como un elemento de accin. Cada vez que pulsemos ese elemento de accin nuestro ActionBar se transformara ofreciendo un acceso rpido a otras opciones sin tener que cambiar de activity, fragment o ActionBar. Uno de los mas conocidos es la barra de bsqueda que aparece en unas cuantas aplicaciones, al pulsar sobre el icono de la lupa se nos abre automticamente un edittext:

Lo primero que tenemos que hacer para crear una vista de accin es generar un recurso "menu" indicando el atributo "actionLayout" o "actionViewClass". De esta manera crearemos un recurso de diseo o una clase widget respectivamente. Vamos a ver como crear el recurso para el "SearchView" de la imagen de arriba:

Cosas a tener en cuenta, primero acordaros de cambiar el nombre de paquete y poner el de vuestra aplicacin (sustituir "com.example.actionbar").En el atributo showAsAction estamos indicando "collapseActionView" para establecer que el tem tiene que aparecer en la aplicacin como un elemento de accin (imagen 1).Y por ultimo en el atributo actionViewClass establecemos la clase widget del SearchView a travs de la librera de soporte v7.

Solo nos quedara configurar el mtodo onCreateOptionsMenu para hacer funcional esta vista de accin. Voy a explicar como hacerlo y a parte le vamos a aplicar dos listeners. Uno para cuando se expanda y se cierre el elemento de accin y otro para cuando el usuario introduzca un texto y lo acepte. Por lo tanto pongo el cdigo y luego lo explico un poco:

public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.vistabusqueda, menu); MenuItem searchItem = menu.findItem(R.id.buscar); SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem); // LISTENER PARA EL EDIT TEXT searchView.setOnQueryTextListener(this); // LISTENER PARA LA APERTURA Y CIERRE DEL WIDGET MenuItemCompat.setOnActionExpandListener(searchItem, this); return super.onCreateOptionsMenu(menu);}Lo primero que hacemos es inflar la vista creada anteriormente a travs del mtodo getMenuInflater().Seguidamente creamos un objeto MenuItem correspondiente al tem creado en el recurso men. Este sera el elemento de accin que veremos en el ActionBar.Seguimos creando otro objeto SearchView al que le aplicaremos la vista del elemento de accion que hemos creado antes, para ello utilizamos el mtodo getActionView(). De esta manera estamos convirtiendo el elemento de accin en una vista de accin. Si ejecutamos el cdigo en este punto obtendremos como resultado lo que se ve en las imgenes de arriba.

Para configurar los listener debemos implementar las interfaces "OnQueryTextListener" y "OnActionExpandListener". Una vez hecho esto ya podemos aplicar los listeners a los dos objetos creados en el "onCreateOptionsMenu" (las dos siguientes lineas de cdigo).

Al implementas estas dos interfaces estamos obligados a sobreescribir los siguientes mtodos:

public boolean onQueryTextChange(String arg0) { return false;}public boolean onQueryTextSubmit(String arg0) { return false;}public boolean onMenuItemActionCollapse(MenuItem arg0) { return true;}public boolean onMenuItemActionExpand(MenuItem arg0) { return true;}Los dos primeros mtodos corresponden a la interface "OnQueryTextListener". Con el primero podemos trabajar en el momento que el usuario pincha el elemento de accin y se expande el edittext capturando todo lo que haga. Con el segundo mtodo podremos trabajar cuando el usuario acepte una bsqueda.

Y para terminar los dos siguientes mtodos corresponden a la interface "OnActionExpandListener". El primero lo usaremos para cuando el elemento de accin se cierre. Y el segundo mtodo para cuando el elemento de accin se expanda.

2.7 Aadir un proveedor de accin

Es muy similar al ejemplo anterior (vista de accin) pero en este caso un "action provider" o proveedor de accin reemplazara a un elemento de accin con un diseo personalizado. Esto quiere decir que un proveedor de accin tiene todo el control del elemento de accin y es capaz de mostrar un submenu al pulsar el botn de accin entre otras cosas.

Tenemos la posibilidad de crear nuestro propio proveedor de accin utilizando la clase "ActionProvider" aunque Android por defecto nos ofrece la posibilidad de crear alguno como el "ShareActionProvider" que seria el botn de compartir que aparece en alguna que otra aplicacion, el de la imagen:

En este caso tenia preparado crear lo que se ve en la imagen que es lo que incluye el cdigo fuente del final del articulo pero he decidido crear un ActionProvider personalizado y hacer algo similar al ejemplo anterior (vista de accin) para ver el resultado mas rpidamente y tener una base de esto.

La documentacin Android nos dice que tenemos que crear nosotros mismos nuestro ActionProvider, por lo tanto empezaremos creando una clase que extienda de ActionProvider:

public class BusquedaAP extends ActionProvider{ Context context;

public BusquedaAP(Context context) { super(context); this.context = context; }

public View onCreateActionView() { LayoutInflater layoutInflater = LayoutInflater.from(context); View view = layoutInflater.inflate(R.layout.ap_busqueda, null); return view; }}

Despus necesitaremos crear el layout que estamos inflando en el mtodo "onCreateActionView":

Continuamos creando un recurso men que har referencia a nuestra clase "BusquedaAP" a travs del atributo actionProviderClass:

Recordar cambiar el nombre del paquete y la clase en el atributo "actionProviderClass" para hacer referencia a la clase que hayamos extendido de ActionProvider.

Por ultimo solo nos queda configurar el cdigo Android, para ello inflaremos el men que acabamos de crear en el mtodo "onCreateOptionsMenu()":

public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.busqueda_ap, menu); return super.onCreateOptionsMenu(menu); }

El resultado sera el siguiente:

Es un ejemplo muy rpido de las posibilidades que ofrece utilizar un proveedor de accin o ActionProvider. El tema es un poco mas extenso al utilizar la clase ActionProvider porlo que es mas que recomendable echarle un ojo en google. Pero la idea es esa, adaptar un botn de accin a lo que nosotros queramos.

2.8 Crear layout personalizado

Otra opcin que nos ofrece Android es la posibilidad de aplicar un layout personalizado a la ActionBar, de esta manera se nos abre otro abanico de posibilidades.

El primer paso seria crear un layout con la disposicin que necesitemos de la ActionBar.

Una vez creado el layout nos vamos a nuestra activity y simplemente tendramos que poner el modo de navegacin de la ActionBar en custom y aplicarle el nuevo layout, metiendo el siguiente cdigo en el onCreate podramos realizarlo: ActionBar actionBar = getSupportActionBar(); actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); actionBar.setCustomView(R.layout.actionbar_top);A parte de introducir este cdigo en el onCreate tendriamos que configurar los botones, textos, imagenes que hayamos metido en el layout personalizado.

Pero el resultado puede ser algo similar a esto:

3. Crear men de navegacin

Este tipo de men se llama "Navigation Drawer" y es un panel oculto que esta ubicado en el borde izquierdo de la pantalla. Se puede hacer visible de dos maneras, o bien haciendo un gesto desde la izquierda de la pantalla o pulsando directamente el icono de la ActionBar.

Para aadir el men de navegacin a nuestra aplicacin tenemos que hacer uso de la API "DrawerLayout" disponible en la librera de compatibilidad v4.

Primero deberemos crear el layout del DrawerLayout:

Al hacer uso de DrawerLayout, deberemos especificar 2 tipos de vista:1. Una vista principal que sera la mostrada por la activity (en este caso es un FrameLayout)2. Otra vista para el men de navegacin (en este caso un simple listview)

En la segunda vista (listview) deberemos indicar su gravedad (normalmente "start") y su anchura (no debe sobrepasar los 320dp).

Una vez creada la vista del Navigation Drawer ya podemos pasar a nuestra actividad para trabajar con ella. Primero extenderemos la clase "ActionBarActivity" y con el siguiente cdigo crearamos nuestra actividad con su Navigation Drawer:

public class CrearCajon extends ActionBarActivity {

private DrawerLayout cajon; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.cajon);

String[] valores = getResources().getStringArray(R.array.cajon); cajon = (DrawerLayout) findViewById(R.id.drawer_layout); ListView opciones = (ListView) findViewById(R.id.left_drawer); opciones.setAdapter(new ArrayAdapter(this, R.layout.plantilla_cajon, valores)); }}Primero establecemos la vista creada anteriormente a travs del mtodo setContentView().Creamos un array String que usaremos para aplicar al ListView (sern todas las opciones de nuestro Navigation Drawer)Continuamos creando un objeto ListView.Y aplicamos un adaptador para ese ListView

Con esto ya podramos visualizar la actividad con su men de navegacin. Lo nico que para acceder al men solo podramos hacerlo dibujando el gesto desde el lado izquierdo. Vamos a continuar y a ver como podramos habilitar el icono de la aplicacin para acceder a este men.

3.1 Habilitar el icono de la ActionBar

Lo primero que tenemos que hacer es crear un objeto de la clase "ActionBarDrawerToggle" y habilitar el icono de la aplicacin como botn. Por lo tanto empezaremos aadiendo el siguiente cdigo al OnCreate anterior:

// CREAMOS EL OBJETO FUERA DEL ONCREATE private ActionBarDrawerToggle toggle;

// ESTO DENTRO DEL ONCREATE toggle = new ActionBarDrawerToggle(this, cajon, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true);El constructor del objeto "toggle" nos pide como parmetros la actividad que aloja el men de navegacion (this), el DrawerLayout (cajon), un icono drawable y dos palabras que describirn la apertura y cierre del cajn (para la accesibilidad).

Para terminar de habilitar el icono de la aplicacin deberemos sobreescribir los siguientes mtodos en nuestra activity:

protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); toggle.syncState(); } public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); toggle.onConfigurationChanged(newConfig); } public boolean onOptionsItemSelected(MenuItem item) { if (toggle.onOptionsItemSelected(item)) { return true; } return super.onOptionsItemSelected(item); }El primero mtodo sera llamado una vez que la actividad haya sido creada (justo despus del onStart y onRestoreInstanceState). En el simplemente le aplicamos el mtodo "syncState()" al objeto "toggle" para sincronizar el estado del icono de la aplicacin con nuestro DrawerLayout.

El segundo mtodo sera llamado cuando haya cambios en la configuracin del sistema. Por lo tanto aplicaremos la nueva configuracin a nuestro objeto "toggle" a travs del mtodo "onConfigurationChanged()".

Y el ultimo mtodo no es realmente necesario pero nos puede servir para manejar los clicks en nuestro men de navegacin. Este sera llamado cuando tenga lugar un click en nuestro men. En el simplemente indicamos que si se a pulsado una opcin del men devuelva true. Tendramos la posibilidad de manejar los clicks en nuestro men a travs del parmetro MenuItem de dicho mtodo.

El resultado despus de crear todo lo anterior es el siguiente:

3.2 Manejar eventos click del men

Podramos hacerlo de dos maneras o bien utilizando el mtodo anterior (onOptionsItemSelected) o implementando la interface "ListView.OnItemClickListener". En este caso usaremos la segunda opcin.

Empezamos implementando la interface y se la aplicamos a nuestro listview aadiendo esto al cdigo que vamos creando en nuestra actividad:

opciones.setOnItemClickListener(this);Esta interface que estamos implementando nos obliga a sobreescribir el mtodo "onItemClick()":

public void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) { switch (arg2) { case 0: Toast.makeText(getApplicationContext(), "BUSCAR", Toast.LENGTH_SHORT).show(); break; case 1: Toast.makeText(getApplicationContext(), "CORTAR", Toast.LENGTH_SHORT).show(); break; ... ... ... } cajon.closeDrawer(opciones);}Para conocer la posicin del tem que se a pulsado del men utilizaremos el parmetro "arg2" y creamos un switch para manejar todas las opciones de nuestro men de navegacin. Deberemos acordarnos de cerrar el men de navegacin con el mtodo "closeDrawer()" indicando la vista a cerrar, en nuestro caso es el listview.

3.3 Manejar eventos de apertura y cierre del men

Android tambin nos ofrece la posibilidad de manejar estos eventos y controlar en cada momento que hacer cuando se abre o se cierra el men de negacin.

En este caso vamos a implementar la interface "DrawerListener" y se la aplicamos a nuestro objeto DrawerLayout:

cajon.setDrawerListener(this);Esta interface que estamos implementando nos obliga a sobreescribir los siguientes mtodos:

public void onDrawerClosed(View arg0) { actionBar.setTitle("EJ ActionBar"); } public void onDrawerOpened(View arg0) { actionBar.setTitle("Menu Principal"); }

public void onDrawerSlide(View arg0, float arg1) {}

public void onDrawerStateChanged(int arg0) {}El primer mtodo y el segundo son llamados cuando el men de navegacin es abierto o cerrado. En este caso simplemente modificamos el titulo de la ActionBar.

El tercer mtodo es llamado cuando cambia la posicin del men de navegacin. Como parmetros tenemos la vista hija que a sido movida.

Y el cuarto y ultimo mtodo es llamado cuando hay un cambio de estado de movimiento en el men de navegacion. Como parmetro tenemos el nuevo estado de movimiento del men. Este nuevo estado puede ser (STATE_IDLE, STATE,DRAGGING, STATE_SETTLING).

4. Creacion de pestaas (Tabs)

Crear pestaas o tabs en nuestra aplicacin puede ser una buena practica de cara al usuario, le ayudara a explorar nuestra aplicacin y le sera fcil cambiar entre las diferentes vistas rpidamente. Comentar que cuando el tamao de pantalla es lo suficientemente grande (normalmente pantalla en modo landscape o tablets) estas pestaas aparecen dentro de la ActionBar junto a los elementos de accin. Por otro lado cuando el tamao de pantalla es reducido (smartphones con pantalla pequea) estas pestaas suelen aparecer en barra separada justo debajo de la ActionBar.

A continuacin vamos a ver como crear tabs de una manera muy sencilla. Lo primero que nos dice la documentacin Android es que tenemos que implementar la interface "ActionBar.TabListener" por lo tanto crearemos la siguiente clase para ello:

public class TabsListener implements TabListener {

private Fragment fragment; private final String tag; public TabsListener(Activity activity, String tag, Class cls) { this.tag = tag; fragment = Fragment.instantiate(activity, cls.getName()); } public void onTabSelected(Tab tab, FragmentTransaction ft) { ft.replace(android.R.id.content, fragment, tag); } public void onTabUnselected(Tab tab, FragmentTransaction ft) { ft.remove(fragment); } public void onTabReselected(Tab tab, FragmentTransaction ft) {} }Esta clase sera la encargada de manejar los eventos que tengan lugar en las pestaas o tabs. Al implementar la interface "ActionBar.TabListener" debemos sobreescribir los mtodos "onTabSelected()", "onTabUnselected()" y "onTabReselected()" que practicamente el nombre lo dice todo.

En este caso cuando se seleccione una pestaa simplemente reemplazamos el fragmento y establecemos la view de ese fragmento. Para las pestaas que no estn seleccionadas simplemente eliminamos ese fragmento y por lo tanto su view. De esta manera lo que estamos haciendo es que se cargue la view de un fragmento cada vez que pulsamos una pestaa y para las pestaas no seleccionadas se elimine la view de cada fragmento. No es la manera mas practica pero es un buen comienzo.

Lo siguiente que tenemos que hacer es crear los fragmentos, por cada pestaa que queramos incluir en la aplicacin tendremos que crear un fragmento. En este caso solo voy a exponer como se crea un fragmento pero en la aplicacin del final del articulo lo veres con tres. Por lo tanto vamos a crear una nueva clase que extienda de "Fragment":

public class Fragment_Productos extends Fragment { public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fm_productos, container, false); TextView texto = (TextView) rootView.findViewById(R.id.texto_productos); texto.setText("Tab seleccionada" + "\n\n" + "Productos");; return rootView; } }Esta clase tambin es muy simple, os recomiendo echarle un ojo a los fragmentos porque tiene bastantes mas posibilidades de las que se exponen aqu. En este caso hemos creado previamente un layout "fm_productos" en el que simplemente ponemos un texto en medio de la view.

Una vez creado el layout pasamos a la clase "Fragment_Productos" que extendemos de "Fragment". Dentro de la clase simplemente sobreescribimos el mtodo "onCreateView()" que sera el encargado de crear la vista cada vez que pulsemos en una pestaa. Dentro del mtodo simplemente inflamos el layout creado previamente, configuramos el texto y establecemos un nuevo texto.

Recordar que tendramos que repetir este paso por cada pestaa que creemos para nuestra aplicacin. Ya por ultimo solo nos queda crear nuestra activity, dejo el cdigo y lo explicamos debajo:

public class CrearTabs extends ActionBarActivity { protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ActionBar actionBar = getSupportActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

/**CREAR TABS**/ Tab tab = actionBar.newTab() .setText(R.string.productos) .setTabListener(new TabsListener( this, "productos", Fragment_Productos.class)); actionBar.addTab(tab);

.... .... ....

}}Al crear nuestra activity extendemos la clase "ActionBarActivity" y sobreescribimos el mtodo "onCreate()". Dentro del mtodo creamos el objeto ActionBar y ponemos el modo de navegacin de la ActionBar en modo pestaas o tabs.

Y ya para terminar tendramos que crear tantas pestaas como fragmentos hayamos creado. Para crear una nueva pestaa utilizamos el mtodo "newTab()" al que le indicamos el texto a mostrar en la pestaa a traves del metodo "setText()". Tambin podramos indicarle un icono a mostrar a travs del mtodo "setIcon()" pero no es el caso. Seguimos creando el listener para esa pestaa, aqu es donde entra la clase creada al principio de este punto. Por lo tanto creamos el listener para esa pestaa a travs del mtodo "setTabListener()" y le aplicamos un nuevo TabsListener indicando los parmetros del constructor de esta clase, (una activity, un tag o identificador, y la clase o fragmento). Para concluir tendremos que aadir la nueva pestaa creada a la actionbar a travs del mtodo "addTab()".

Si todo nos a salido bien como resultado podremos obtener algo parecido a esto:

Como se comentaba al principio de este punto, dependiendo de si tiene espacio se mostraran las pestaas en nuevo panel (imagen superior) o incluidas en el ActionBar (imagen inferior).

4.1 Crear views deslizantes

Quizs no sea el termino mas correcto pero mas o menos se entiende, realmente se le llama paginacin horizontal. El caso es que la idea es poder cambiar de vista deslizando el dedo de un lado a otro. La documentacin Android nos dice que para crear este tipo de vista tenemos que utilizar un "ViewPager" disponible a travs de la librera de compativilidad v4.

As que empezamos creando este layout:

El siguiente paso es crear las vistas que incluir ese ViewPager. Para ello es necesario utilizar un "PagerAdapter" y Android nos ofrece dos posibilidades:1. FragmentPagerAdapter: es la clase mas indicada para crear un numero determinado de vistas2. FragmentStatePagerAdapter: clase mas indicada para cuando tenemos un numero indeterminado de vistas, automticamente Android ira destruyendo fragmentos que no estn a la vista reduciendo el consumo de memoria.En este caso vamos a partir del ejemplo anterior y vamos a adaptar los mismos fragmentos. Por lo tanto vamos a crear una clase que extienda de "FragmentPagerAdapter" estableciendo un numero determinado de tres vistas (en la aplicacin del final de articulo podris observarlo).public class PagerAdapter extends FragmentPagerAdapter {

public PagerAdapter(FragmentManager fm) { super(fm); }

public Fragment getItem(int arg0) { switch (arg0) { case 0: return new Fragment_Productos(); case 1: return new Fragment_Clientes(); case 2: return new Fragment_Pedidos(); default: return null; } }

public int getCount() { return 3; }

}Creamos nuestro adaptador y al extender "FragmentPagerAdapter" nos obliga a crear un constructor (que en este caso no lo usaremos, por lo tanto lo dejamos tal cual), y deberemos sobreescribir los mtodos "getItem()" y "getCount". Con el primer mtodo le estamos indicando que cuando tenga que cargar dicha vista nos cree un nuevo fragmento. Y con el segundo mtodo simplemente le devolvemos el numero de vistas.

De esta manera siempre tendr cargado en memoria el fragmento o pestaa que este visible en pantalla y tambin el mas cercano a la derecha e izquierda, el resto de pestaas o fragmento no existirn hasta que no nos acerquemos a ellos.

Para terminar tendremos que configurar el onCreate de nuestra activity principal por lo tanto pongo el cdigo y luego lo explico un poco:

public class CrearTabsSwipe extends FragmentActivity {

protected void onCreate(Bundle arg0) { super.onCreate(arg0); setContentView(R.layout.tabs_swipe); PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager()); ViewPager mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(adapter);}Aqu simplemente establecemos el layout creado previamente a travs del mtodo "setcontentView()". Y creamos un objeto de nuestra clase (PagerAdapter) que utilizaremos como adaptador de las vistas. Ya por ultimo configuramos el "ViewPager" de nuestro layout y le aplicamos el adaptador.

El resultado sern estas tres vistas, conforme deslicemos el dedo veremos una u otra y siempre tendr cargada en la memoria la vista mas cercana a la que se vea en pantalla:

Comentar un par de cosas, la ActionBar es visible porque hemos configurado el botn volver a travs del AndroidManifest. Y las tabs o pestaas no estn presentes porque simplemente hemos creado una paginacin horizontal. En el siguiente punto vamos a ver como aadir las tabs para estas vistas.

4.2 Crear tabs para ViewPager

En este punto vamos a partir del ejemplo anterior donde habamos creado tres vistas. Vamos a crear una tab o pestaa por cada vista que al pulsarla nos mostrara la vista de esa pestaa. A parte tambin tendr implementado el sistema de paginacin horizontal, cada vez que deslicemos a un lado o a otro nos mostrara una vista y cambiara automaticamente la pestaa.

Para empezar tenemos que modificar nuestra activity e implementar alguna cosilla mas, la dejo y se explica abajo:

public class CrearTabsSwipe extends ActionBarActivity implements ActionBar.TabListener, OnPageChangeListener {

private ViewPager mViewPager;; protected void onCreate(Bundle arg0) { super.onCreate(arg0); setContentView(R.layout.tabs_swipe); PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager()); mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(adapter); mViewPager.setOnPageChangeListener(this); ActionBar actionBar = getSupportActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); Tab tab = actionBar.newTab().setText(R.string.productos).setTabListener(this); actionBar.addTab(tab);

... ... ... }}Primeramente empezamos cambiando la extensin de la clase por "ActionBarActivity" para poder hacer uso de las tabs. Implementamos las dos interfaces "ActionBar.TabListener" y "OnPageChangeListener" que mas abajo explicare sus mtodos obligados.

El cdigo es practicamente le mismo hasta el metodo "setOnPageChangeListener()" que le aplicamos a nuestro ViewPager. Y los pasos siguientes tambin se han visto anteriormente. Se crea el objeto actionBar para ponerlo en modo tabs y creamos las tres pestaas aplicndoles el listener a travs del "this"

Ahora vamos con las intefaces muy sencillas tambin, primero con "ActionBar.TabListener":

public void onTabSelected(Tab arg0, FragmentTransaction arg1) { mViewPager.setCurrentItem(arg0.getPosition()); } public void onTabReselected(Tab arg0, FragmentTransaction arg1) {} public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {}Esta interface la hemos visto antes as que simplemente dir que utilizamos el mtodo "setTabSelected()" para que cuando el usuario pinche en una tab o pestaa nuestro ViewPager cambie automaticamente de vista.

La siguiente interface es "OnPageChangeListener":

public void onPageSelected(int arg0) { getSupportActionBar().setSelectedNavigationItem(arg0); } public void onPageScrollStateChanged(int arg0) {} public void onPageScrolled(int arg0, float arg1, int arg2) {}Esta interface tambin utiliza tres mtodos y en este caso solo haremos uso del primero que se utiliza cuando una vista se muestra en pantalla al deslizar de un lado a otro. Nosotros dentro del mtodo le estamos diciendo que cambie de tab y ponga la correspondiente.

El siguiente mtodo "onPageScrollStateChanged" se utiliza para controlar el estado de desplazamiento, es decir, podramos controlar el puntero del usuario al cambiar de vistas y preguntar cuando empieza a deslizar, cuando esta deslizando y cuando a terminado de deslizar una vista.

Y el ultimo mtodo "onPageScrolled" lo podremos utilizar para controlar cuando una vista se esta desplazando.

El resultado sera el mismo del punto anterior pero en este caso tendremos pestaas que cambian segn el usuario deslice la vista de un lado a otro e incluso el usuario podr seleccionar las pestaas y se mostrara su contenido automaticamente. La imagen muestra el resultado:

4.3 Utilizar view desplazable

En este punto vamos a ver como crear lo que muestra la siguiente imagen:

En este caso en vez de utilizar pestaas, simplemente es una barra de informacin donde le indicara al usuario en que vista esta ubicado. Esta barra de informacin se ira deslizando conforme el usuario vaya deslizando las vistas o fragmentos.

Primero tendremos que crear el layout, es muy similar al del punto anterior:

Seguimos utilizando la clase "ViewPager" pero en este caso le aadimos un "PagerTitleStrip" que nos servir para establecer la vista de la imagen de arriba. Podemos controlar su gravedad a travs del atributo "layout_gravity" para ponerlo en el top (arriba) o en el bottom (abajo).

El siguiente paso es crear un adaptador y vamos a coger el del punto 4.1 (PageAdapter y le vamos a aadir el siguiente cdigo, dentro de su clase como si fuera otro mtodo mas de la clase:

public CharSequence getPageTitle(int position) { String titulo = null; switch (position) { case 0: titulo = "PRODUCTOS"; break; case 1: titulo = "CLIENTES"; break; case 2: titulo = "PEDIDOS"; break; } return titulo;}Este mtodo sera el encargado de poner el titulo en el nuevo panel informativo que estamos creando. Comentar que seguimos utilizando los tres fragmentos de siempre (en el cdigo fuente lo viereis claro).

Para terminar crearemos nuestra activity que viene siendo la misma que hemos creado en los puntos anteriores:

public class CrearTabsSwipe2 extends ActionBarActivity { protected void onCreate(Bundle arg0) { super.onCreate(arg0); setContentView(R.layout.tabs_swipe_dos); PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager()); ViewPager mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(adapter); }}

5. Aplicar estilo a la ActionBar

Una buena manera de crear los recursos de iconos para nuestra ActionBar (ya sea para elementos de accion o tabs) es utilizar la herramienta:ActionBar and Tab Icon Generator

Tambin podemos crear los recursos del icono del men de navegacin o Navigation Drawer a travs de la siguiente herramienta:Navigation Drawer Indicator Generator

Y para terminar recomiendo crear un tema para nuestra ActionBar a travs de la herramienta:ActionBar Style Generator. Indicando en "Style compatibility" que sea un tema para "AppCompact", de esta manera conseguiremos que sea compatible con versiones anteriores de Android.

Una vez creado el tema para nuestra ActionBar tendremos que descomprimir e incluir todas las carpetas en nuestro proyecto. Teniendo esa base podremos modificar cualquier cosa a nuestro gusto a parte de aprender como se modifica cada cosa de la ActionBar.

Un ejemplo de lo que podramos hacer con esto es el siguiente:

6. Cdigo fuente del articulo

Aqu os dejo practicamente todo lo que se a visto en el articulo en forma de aplicacin un poco simple, pero con esta base aprenderemos a manejar bastante bien la ActionBar +Tabsy sus posibilidades.

DESCARGAR:EJEMPLO ACTION BAR & TABS