PESTAÑAS O TABS EN ANDROID: TabLayout

DESARROLLO

1. USO DE PESTAÑAS CON TABLAYOUT

En Android se pueden utilizar Tabs o Pestañas para mejorar el diseño de una aplicación;
la vista TabLayout permite mostrar pestañas horizontalmente en el diseño de nuestras
aplicaciones. Cuando se agrega un objeto de la clase TabLayout al diseño de una
pantalla, se tienen que agregar las pestañas o Tabs que tendrá la vista TabLayout; para
esto se agregan elementos TabItem. Además, se debe vincular con el TabLayout una
vista ViewPager para indicar que fragmento o diseño se debe mostrar en la pantalla
cuando se selecciona una determinada pestaña (DEVELOPER ANDROID, 2019).

Los fragmentos serán los diseños que se muestran en la pantalla cuando se selecciona
una determinada pantalla. Para vincular los fragmentos con las pestañas del TabLayout
se debe utilizar un adaptador.

TabLayout con tres TabItem

Fragmentos

ViewPager

Figura 1. Apariencia del TabLayout

2. IMPLEMENTACIÓN DE PESTAÑAS CON TABLAYOUT

A continuación se diseñará una pequeña aplicación para probar el uso de las Pestañas
o Tabs, utilizando la vista TabLayout. Primero se crea un nuevo proyecto en Android
Studio, al cual se le colocará el nombre de “TrabajarConTabs”, igual pueden colocarle
el nombre que deseen a sus proyectos y actividades. Los pasos para crear un proyecto
en Android Studio, están descritos en el ítem 2.2 de la primera guía (Introducción al
Entorno Android). Igualmente en el ítem 2.4 de la primera guía se explica cómo pueden
agregar nuevas actividades a sus proyectos (Figura 28). La aplicación consta de un
TabLayout con tres Pestañas o Tabs (TabItem). El usuario podrá seleccionar una de las
tres pestañas y se visualizará un fragmento o diseño asociado a la pestaña que
selecciono el usuario; cada fragmento mostrara una pequeña información sobre los
controles de selección que se estudiaron en la guía de aprendizaje anterior.

2.1. Estructura del proyecto TrabajarConTabs

 Cuando se crea el nuevo proyecto, se genera la actividad principal que tendrá los
archivos MainActivity.java para la parte lógica y el archivo activity_main.xml para
diseñar la interfaz gráfica que tendrá el TabLayout con tres Pestañas.

 Luego se deben crear tres fragmentos o diseños en blanco para mostrar al usuario
información asociada a la pestaña que selecciono. Como se mencionó tendremos
tres pestañas; cada pestaña cuando se seleccione, mostrara información sobre algún
control de selección (Spinner, ListView y GridView). Los nombres que se le colocaran
a los fragmentos serán los siguientes: SpinnerFragment, ListViewFragment y
GridViewFragment. Igual pueden asignar los nombres que deseen.

Cuando se crean los fragmentos, por defecto se crean los archivos XML para realizar
el diseño que tendrán estos fragmentos, los archivos son: fragment_spinner.xml,
fragment_list_view.xml y fragment_grid_view.xml; recuerden solo se asignara
apariencia a los diseños en los archivos XML; la parte lógica de los fragmentos solo
contaran con el método onCreateView() para dibujar el diseño de cada fragmento.

 Se crea un adaptador para indicarle a la vista ViewPager que fragmento debe

mostrar; dependiendo la pestaña que seleccione el usuario; el nombre que se le
asigna al adaptador es AdaptadorPaginas.java.

 Nota: Cada uno de los pasos descritos anteriormente, se explicaran en los siguientes
apartados de la guía. A continuación se muestra la estructura del proyecto
“TrabajarConTabs”.
 Figura 2. Estructura del proyecto TrabajarConTabs

2.2. Diseño de la actividad principal del proyecto

 Para el diseño de la interfaz gráfica en la actividad principal, vamos al archivo

activity_main.xml; aquí se utiliza un contenedor LinearLayout para alojar la vista
TabLayout, dentro del TabLayout se agregan tres TabItem (pestañas). Al primer
TabItem se le agregar el texto Spinner; al segundo TabItem se le asigna el texto
ListView y en el último TabItem se asigna el texto Gridview. Igualmente se agrega
una vista de tipo ViewPager para indicar cuales son los fragmentos o diseños que se
mostraran cuando el usuario selecciona una pestaña.

 Antes de implementar el archivo activity_main.xml, se agregan tres iconos a la

carpeta drawable de nuestra aplicación para agregarlos en cada una de las pestañas.
Los pasos para agregar un icono son los siguientes: se hace clic derecho sobre la
carpeta drawable; luego se va a New ---- Vector Asset; como se indica en la siguiente
figura.
 Figura 3. Agregar iconos a una aplicación

 Luego aparece la siguiente ventana en donde se le puede asignar un nombre a

nuestro icono; seleccionar un icono de la galería y asignarle color al icono.

Se asigna un nombre para el icono

Doble clic para buscar otro icono en la galería

Doble clic para cambiar el color

Figura 4. Asistente para agregar un nuevo icono en el proyecto

 Para el caso puntual del este proyecto se seleccionaron tres iconos de la galería y se
le asignaron los siguientes nombres: lista_desplegable.xml, lista.xml y grid.xml;
ustedes le pueden colocar los nombres que quieran a sus iconos.

Figura 5. Agregar un nuevo icono al proyecto

Figura 6. Iconos agregados al proyecto

 Los iconos se agregan a nuestro diseño en el archivo en el activity_main.xml, con el
atributo:

android:icon="@drawable/nombre_del_icono"

Archivo activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabControlesSeleccion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#AACED3">
<com.google.android.material.tabs.TabItem
android:id="@+id/tabSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Spinner"
android:icon="@drawable/lista_desplegable"/>
<com.google.android.material.tabs.TabItem
android:id="@+id/tabListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ListView"
android:icon="@drawable/lista"/>
<com.google.android.material.tabs.TabItem
android:id="@+id/tabGridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GridView"
android:icon="@drawable/grid"/>
</com.google.android.material.tabs.TabLayout>

<androidx.viewpager.widget.ViewPager
android:id="@+id/paginas"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.viewpager.widget.ViewPager>
</LinearLayout>

 En la Figura 7, se describe el diseño inicial que tendrá nuestra pantalla o actividad

principal del proyecto.
 Figura 7. Diseño inicial de la pantalla principal

2.3. Creación de los fragmentos

 El siguiente paso después de realizar el diseño en el archivo activity_main.xml; es

crear tres fragmentos o diseños en blanco; los cuales se mostraran al usuario cuando
este seleccione una pestaña, con información asociada a la pestaña que selecciono.
La aplicación tendrá tres pestañas; cada pestaña cuando se seleccione, mostrara
información sobre algún control de selección (Spinner, ListView y GridView). Los
nombres que se le asignaran a los fragmentos serán los siguientes: SpinnerFragment,
ListViewFragment y GridViewFragment. Se desean pueden asignar nombres
diferentes a sus fragmentos.

 Para crear un nuevo fragmento en blanco, se hace clic derecho sobre el paquete de
java en donde están las clases lógicas del proyecto, luego se va a New ---- Fragment
---- Fragment (Blank). Como se muestra en la Figura 8.
Figura 8. Agregar un fragmento en blanco al proyecto

Se asigna nombre al fragmento

Seleccionar esta opción

Figura 9. Asignar nombre al fragmento y crearlo

 Cuando se crean los fragmentos, por defecto se crean los archivos XML para realizar
el diseño que tendrán estos fragmentos, los archivos son: fragment_spinner.xml,
fragment_list_view.xml y fragment_grid_view.xml; recuerden solo se asignará
apariencia a los diseños en los archivos XML; la parte lógica de los fragmentos solo
contará con el método onCreateView() para dibujar el diseño de cada fragmento.

 El diseño de cada fragmento solo tendrá dos controles o vistas de tipo TextView; una
etiqueta de texto para mostrar un título y otra etiqueta para mostrar información.

Archivo fragment_spinner.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SpinnerFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textTitulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="100dp"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="Lista Desplegables (Spinner)"
android:textColor="#0C4176"
android:textSize="10pt"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/mostrarInformacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:ellipsize="end"
android:gravity="center"
android:maxLines="5"
android:singleLine="false"
android:text="Es una listas desplegable o emergente; en donde el usuario
selecciona el control y se despliega un listado de opciones."
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/textTitulo" />
</androidx.constraintlayout.widget.ConstraintLayout>
 Figura 10. Apariencia del diseño en el archivo fragment_spinner.xml

Archivo fragment_list_view.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ListViewFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textTitulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="100dp"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="Listas Fijas (ListView)"
android:textColor="#0C4176"
android:textSize="10pt"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/mostrarInformacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:ellipsize="end"
android:gravity="center"
android:maxLines="5"
android:singleLine="false"
android:text="Es una lista de selección fija, que se le visualiza al
usuario directamente en el control ListView."
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/textTitulo" />
</androidx.constraintlayout.widget.ConstraintLayout>
 Figura 11. Apariencia del diseño en el archivo fragment_list_view.xml

Archivo fragment_grid_view.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".GridViewFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textTitulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="100dp"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="Tabla de Selección (GridView)"
android:textColor="#0C4176"
android:textSize="10pt"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/mostrarInformacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:ellipsize="end"
android:gravity="center"
android:maxLines="5"
android:singleLine="false"
android:text="El componente GridView, visualiza al usuario una lista de
opciones en forma de tabla o de rejilla."
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/textTitulo" />
</androidx.constraintlayout.widget.ConstraintLayout>
 Figura 12. Apariencia del diseño en el archivo fragment_grid_view.xml

2.4. Creación del Adaptador

 Se crea un adaptador para indicarle a la vista ViewPager que se agregó en el archivo

activity_main.xml, el fragmento que debe mostrar; dependiendo la pestaña o Tab
seleccionada por el usuario.

 Para crear el adaptador, se crea una nueva clase Java; y se asigna el nombre
AdaptadorPaginas.java. En la Figura 13, se describen los paso para crear la clase
adaptador; clic derecho sobre el paquete del proyecto New --- Java Class.

Figura 13. Creación de la clase AdaptadorPaginas

Archivo AdaptadorPaginas.java

package com.example.trabajarcontabs;
//Se importan las clases que contienen algunos métodos a utilizar en la implementación del código.
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
//Se indica que la clase AdaptadorPaginas es una clase extendida de la clase FragmentPagerAdapter.
//La clase FragmentPagerAdapter se puede utilizar como un administrador de fragmentos, cuando se
//tienen varias pestañas. Después de declarar la clase AdaptadorPaginas se agregan todos sus métodos:
//el método constructor, el método getItem() y getCount().
public class AdaptadorPaginas extends FragmentPagerAdapter {
//Se declara una variable de tipo entero llamada numeroPaginas para asociarla al número de tabs
//o pestañas y a los fragmentos asociados.
int numeroPaginas;
public AdaptadorPaginas(@NonNull FragmentManager fm, int numPaginas) {
super(fm, numPaginas);
this.numeroPaginas = numPaginas;
}
@NonNull
@Override
//Al método getItem(), se le pasa como parámetro una posición. Luego se agrega una sentencia switch, y
//dependiendo de la posición que se pase como parámetro; se retorna el fragmento que mostrará la
//información asociada a la pestaña seleccionada.
public Fragment getItem(int position) {
switch (position){
case 0:
return new SpinnerFragment();
case 1:
return new ListViewFragment();
case 2:
return new GridViewFragment();
default: return null;
}
}
@Override
//El método getCount() retorna el número de Tabs o pestañas.
public int getCount() {
return numeroPaginas;
}
}

2.5. Implementación de la clase MainActivity

 Se implementa la parte lógica de la actividad principal, en el archivo MainActivity.java.

package com.example.trabajarcontabs;
//Se importan las clases que contienen algunos métodos a utilizar en la implementación del código.
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
public class MainActivity extends AppCompatActivity {
//Se crean dos atributos uno de tipo TabLayout, llamado tabControlesSeleccion y otro de tipo
//ViewPager llamado paginas; para asociarlos con los controles o vistas del diseño activity_main.xml.
TabLayout tabControlesSeleccion;
ViewPager paginas;
//Se declara el adaptador de nombre adaptadorPaginas, del tipo de la clase AdaptadorPaginas.
AdaptadorPaginas adaptadorPaginas;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//El método findViewById() localiza los controles del fichero activity_main.xml,
//utilizando la clase R; después de identificarlos, los vincula con los atributos que se declararon
//al inicio de la clase.
tabControlesSeleccion = (TabLayout) findViewById(R.id.tabControlesSeleccion);
paginas = (ViewPager) findViewById(R.id.paginas);
//Se crea nuestro adaptador, el cual será un nuevo objeto de la clase AdaptadorPaginas; se pasa
//como parámetros al constructor de la clase, el método getSupportFragmentManager() que permite
//interactuar con los fragmentos asociados a esta actividad. El otro parámetro es el método
//getTabCount() del TabLayout para saber número de pestañas que tiene asociadas.
adaptadorPaginas = new AdaptadorPaginas(getSupportFragmentManager(),
tabControlesSeleccion.getTabCount());
//Se le indica al objeto ViewPager cuál es el adaptador que va a utilizar para mostrar los fragmentos.
paginas.setAdapter(adaptadorPaginas);
//Se implementa el método setOnTabSelectedListener() para para saber cuándo cambia de estado
//una pestaña o TabItem. Dependiendo la pestaña que se seleccione, se mostrará el fragmento
//definido en el adaptador.
tabControlesSeleccion.setOnTabSelectedListener(new
TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
paginas.setCurrentItem(tab.getPosition());
if(tab.getPosition() == 0){
adaptadorPaginas.notifyDataSetChanged();
}
if(tab.getPosition() == 1){
adaptadorPaginas.notifyDataSetChanged();
}
if(tab.getPosition() == 2){
adaptadorPaginas.notifyDataSetChanged();
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {

}
@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
//Se utiliza el método addOnPageChangeListener() y así mantener sincronizado el objeto ViewPager
//con la posición de la pestaña en el TabLayout.
paginas.addOnPageChangeListener(new
TabLayout.TabLayoutOnPageChangeListener(tabControlesSeleccion));
}
}
 EJERCICIOS/ACTIVIDADES

 Después de implementar la aplicación descrita en la guía; deben crear un nuevo

proyecto en Android Studio; y adaptar un diseño con Tabs o Pestañas, al diseño de
su proyecto u otro proyecto libre en el que quieran trabajar para realizar la práctica.

Se recomienda cambiar la apariencia del TabLayout, agregando o modificando las

propiedades de sus atributos, modificando iconos y colores. Igualmente deben
mejorar los diseños de los diferentes fragmentos que se mostraran al usuario cuando
se seleccione una determinada pestaña. Pueden utilizar los diseños de su proyecto
final para mostrarlos en los fragmentos.

BIBLIOGRAFÍA

 DEVELOPERS ANDROID. (2019). TabLayout. Recuperado de:

https://developer.android.com/reference/com/google/android/material/tabs/TabLayout?hl=en