Tabs dinámicas en Android – ViewPager y TabLayout

Las pestañas o tabs en Android permiten mostrar el contenido en pestañas, a las cuales se puede navegar haciendo click en el título de la pestaña o arrastrando hacia la izquierda o la derecha.

Hoy veremos cómo tener pestañas dinámicas en Android, es decir, poder agregar Tabs infinitas a una lista conforme el usuario las requiera.

Tabs dinámicas con Android y Java

En la parte inferior existen pestañas o tabs dinámicas que se agregan cuando el usuario hace click en la última pestaña

Lo que vamos a usar será un adaptador personalizado, un TabLayout y un ViewPager.

Nota: asumo que ya sabes un poco sobre Tabs estáticas y esas cosas, pues aquí no daré un repaso sobre eso.

Primero: el layout principal

Diseño del contenedor de pestañas o Tabs en Android

Tenemos dos elementos: el ViewPager para mostrar el contenido de la Tab y el TabLayout, para las pestañas dinámicas en Android

Este layout puede ser un fragmento o una actividad, y cuenta con dos vistas:

  • La vista en donde se muestra el contenido de la pestaña
  • La vista en donde se muestran las pestañas

En mi caso lo puse en un ConstraintLayout que se ve así:

El ViewPager tiene el id viewPagerAvios y el TabLayout el id tabLayoutAvios, por diseño, el TabLayout debería ir arriba del ViewPager pero los requerimientos de la app fueron así.

El fragmento que se muestra dentro del ViewPager

Antes de que veamos cómo agregar una Tab a un TabLayout de manera dinámica debemos saber que cada Tab se relaciona con un fragmento.

Contenido del fragmento mostrado en cada Tab de Android

Este fragmento puede ser distinto para cada Tab, o puede ser el mismo. Yo he usado el mismo, que es un formulario cuyo diseño es así:

En su código Java todavía no tengo nada pero se ve así:

Dentro de este código se debe manejar la interacción con el contenido del mismo, es decir, este código no sabe nada sobre las tabs, está aislado y solo se encarga de inflar el contenido del fragmento.

Agregar pestañas o tabs iniciales

Al inicio debemos tener dos tabs: una que tiene el número 1, y la otra, que muestra el icono para agregar una tab.

Nota: yo uso un fragmento, no una actividad, la diferencia se nota por ejemplo en view.findViewById.

En la parte superior definimos nuestros elementos:

El adaptador es un adaptador personalizado:

Extiende de FragmentPagerAdapter, simplemente sobrescribimos unos métodos. Internamente tenemos dos listas: una lista de los fragmentos y otra de los títulos.

Dentro del método getPageTitle devolvemos null si es la última pestaña, esto es para forzar que se muestre el icono.

Ahora obtenemos una referencia a los mismos y ponemos un listener al TabLayout:

En la línea 3, 4 y 5 obtenemos una referencia a nuestros elementos XML. En la línea 6 configuramos el ViewPager del TabLayout, simplemente indicando la variable.

En la línea 7 y 8 tenemos dos métodos interesantes que nos ayudarán. Vamos a verlos:

El método agregar tabs iniciales

Simplemente agrega dos pestañas al ViewPager, fíjate en la línea 4 pues ahí se crea un nuevo Fragmento del formulario, cuyo título será el número de pestaña.

Recuerda que el código de FragmentFormularioDeAvio ya lo vimos arriba, es el que se muestra dentro de cada pestaña.

El método para poner el icono a la última Tab

Ahora veamos el otro método que se encarga de establecer el icono de la última pestaña. Queda así:

Obtenemos la última Tab invocando a getTabAt y pasándole el número de tabs que ya tenemos menos 1.

Si no es null (no queremos NullPointerException) entonces le ponemos un icono. Si en tu caso no existe, es porque no tienes un icono así, simplemente coloca uno que sí hayas agregado.

Agregar pestaña si se toca la última

Recuerda que tenemos el siguiente código:

En la línea 12, si se toca la última pestaña se agrega un Tab. El código de esa función es el siguiente:

Simplemente invocamos al método agregarFragmento que ya vimos antes en el ciclo for.

Es importante invocar al método notifyDataSetChanged para que el ViewPager sepa que cambiaron los datos; si no hacemos esto, se generará una excepción.

Después volvemos a colocar el icono del último tab y finalmente esperamos 100 milisegundos para enfocar la pestaña que va antes de la penúltima, esto de la espera es porque cuando se agrega una pestaña se selecciona por defecto la primera, así que debemos esperar un poco a que se termine y luego seleccionar la nuestra.

Poniendo todo junto

Tabs dinámicas con Android y Java

Ahora que ya he explicado el código, veámoslo como uno solo:

El código se explica por sí mismo (o eso espero) y los comentarios ayudan un poco.

Así es como se consigue tener Tabs dinámicas en Android, ya dentro del fragmento podemos hacer cualquier cosa.

También recuerda que le puedes poner iconos a todas las pestañas, en este caso lo hice así para que se vea más dinámico. De igual forma, no es obligatorio que el título sea el número de pestaña.

Tabs dinámicas en Android – ViewPager y TabLayout

Por parzibyte Tiempo de lectura: 4 min
0