Si deseamos tener en nuestra aplicación un indicador para conocer en que página se encuentra el usuario, viewpagerindicator es una opción a tomar en cuenta, en este blog se desarrollará uno básico para ello trabajaremos con:

IDE: Android Studio (Vista de paquetes: project)

1. Preparativos

1.1. Agregar repositorios para poder descargar la librería a emplear (ViewPagerIndicator)

Para esto tenemos que modificar al archivo build.gradle ubicado en: <Nombre-de-la-aplicacion>/build.gradle, agregamos lo siguiente:

imagen01

1.2. Agregar la librería, ahora modificaremos el archivo buil.gradle que se ubica en: <Nombre-de-la-aplicacion>/app/build.gradle, agregamos lo siguiente:

imagen02

1.3. Sincronizar los archivos del gradle, carga la configuración modificada anteriormente

Pulsamos en el botón: img01

2. A codear

2.1. Definimos la interface principal “activity_main” que contendrá un TitlePageIndicator (id:indicator) y un ViewPager (id:pager).

activity_main.xml

[codeblocks name=’activity_main’]

2.2. Para implementar las pestañas  y contemplar el buen funcionamiento, debemos trabajar con Fragmentos los cuales harán de paneles que irán cambiando según se especifique en el TitlePageIndicator, empecemos por las interfaces de estos:

fragment_uno.xml

[codeblocks name=’fragment_uno’]

Los fragmentos restantes (dos y tres) serán similares.

*Para mostrar el texto de las interfaces es recomendable emplear el archivo strings.xml ubicado en la carpeta app>src>main>res>values, el archivo mencionado se muestra a continuación:

[codeblocks name=’strings’]

*Se definen cadenas clave valor, para poder utilizarlos basta con: @string/<clave-de-la-cadena>

 

2.3. Definir los fragmentos y asociarlos a sus respectivas interfaces:

Fragmento_Uno.class

[codeblocks name=’Uno_Fragment’]

Los fragmentos restantes (dos y tres) serán similares.

2.4. Definir el adaptador para las pestañas

TabAdapter

[codeblocks name=’TabAdapter’]

2.5. Definir el MainActivity

[codeblocks name=’MainActivity’]

3. A rezar

3.1. Ejecutar la aplicación y disfrutar

3.2. Estilos, agregar las siguientes líneas de código para agregarle y/o modificar los colores del TitlePagerIndicator

[codeblocks name=’styles’]

3.2. Colores

[codeblocks name=’colors’]

*Se definen colores clave valor, para poder utilizarlos basta con: @colors/<clave-del-color>

4. Posibles errores

4.1. Error al agregar la librería, problemas con el repositorio.

Error_01

4.2. Se ejecuta, pero no se muestran la interface del fragmento y/o no cambia el fragmento.

Revisa el contenedor principal del activity_main.xml, no debe ser RelativeLayout, cambiarla a LinerLayout

 

https://github.com/DoappsTeam/ViewpagerIndicator