Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Android
Code

Crear Pantallas Onboarding (de Introducción) para Aplicaciones Android

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product image
What You'll Be Creating

Introducción

No se tiene que ser un genio para entender que una aplicación que hace sentir a nuevos usuarios bienvenidos y cómodos probablemente gozará de mucha mas popularidad que una que los deja perdidos y confundidos. Como resultado, muchos desarrolladores éstos días están tratando de asegurar que sus usuarios tengan una agradable experiencia de introducción.

Si estás desarrollando una aplicación inovadora cuya funcionalidad y usos podrían no ser obvios para los nuevos usuarios, deberías considerar agregar algunas pantallas de introducción para tu aplicación. En éste tutorial, te mostraré una simple forma para  rápidamente crear y agregar tales pantallas a tu aplicación Android.

1. Agrega Dependencias al Gradle

Primero, agrega la Librería de Material Design como una dependencia compile al archivo build.gradle del módulo app para que apuedas usar elementos de interfaz de usuario de Android L en versiones anteriores de Android.

Después, agrega una dependencia compile para SmartTabLayout, una librería que ofrece un elemento título personalizado para el componente ViewPager.

También usaremos clases que pertenecen a la Librería Android Support v4. Sin embargo, no tienes que agregarla manualmente, porque Android Studio la agrega por defecto.

2. Define el Maquetado de la Activity Onboarding

La Activity onboarding será responsable de desplegar todas las pantallas onboarding. Por lo tanto, ésta Activity tendrá los siguientes widgets:

  • Una instancia de ViewPager que permite a los usuarios utilizar el gesto de desplazamiento para moverse de una pantalla onboarding a la siguiente.
  • Un ButtonFlat con la etiqueta Skip, que permite a usuarios impacientes omitir el proceso de onboarding.
  • Un ButtonFlat con le etiqueta Next, que lleva al usuario a la próxima pantalla onboarding.
  • Un SmartTabLayout, que sirve como un indicador de página para el componente ViewPager.

Después de poner éstos widgets en un RelativeLayout y colocarlos, el código en el archivo layout XML de la Activity onboarding debería verse así:

Puedes cambiar si quieres el maquetado para que coincida con tus preferencias. Llamaré a éste archivo layout (maquetado) activity_onboarding.xml.

3. Define los Maquetados de las Pantallas Onboarding

Para éste tutorial, crearás tres pantallas onboarding. Para mantener éste tutorial sencillo, las pantallas tendrán solamente dos widgets Textview. En una aplicación real, también deberías mantener las pantallas onboarding tan simples como sea posible para evitar que nuevos usuarios sean abrumados cuando abran tu aplicación por primera vez.

El archivo layout XML de la primera pantalla es nombrado onboarding_screen1.xml y tiene el siguiente contenido:

Usa el mismo XML en los archivos de maquetado de las otras dos pantallas y nómbralos onboarding_screen2.xml y onboarding_screen3.xml. Claro, deberías cambiar la propiedad text de cada widget Textview para que cada pantalla onboarding sea única.

4. Crea un Fragment para cada Pantalla Onboarding

Crea una nueva clase Java y nómbrala OnboardingFragment1.java. Hazla una subclase de Fragment y sobreescribe su método onCreativeView. Luego, llama al método inflate para crear un View usando el maquetado que definimos en onboarding_screen1.xml y regrese el View. Tu clase debería verse así:

El Fragment para tu primera pantalla onboarding ahora está listo. Sigue el mismo proceso para crear otras dos subclases Fragment, OnboardingFragment2.java y OnboardingFragment3.java, que usan los maquetados definidos en onboarding_screen2.xml y onboarding_screen3.xml respectivamente.

5. Crea la Activity Onboarding

Crea una nueva clase Java y nómbrala OnboardingActivity.java. Hazla una subclase de FragmentActivity y sobreescribe su método onCreate.

Posteriormente, declara un ViewPager, un SmartTabLayout, y dos ButtonFlat widgets como variables miembros de la clase.

En el método onCreate, llama a setContentView para mostrar el maquetado definido en activity_onboarding.xml y usa el método findViewById para inicializar las variables miembros.

Ahora tienes que crear un FragmentStatePagerAdapter que el ViewPager puede usar para desplegar las pantallas onboarding. Crea una nueva variable de tipo FragmentStatePagerAdapter y nómbrala adapter. Inicialízalo al pasar el resultado del método getSuppórtFragmentManager a su constructor. Debido a que es una clase abstracta, Android Studio automáticamente generará código para los métodos abstractos como se muestra abajo.

En el método getCount, regresa el número de pantallas onboarding.

Agrega una instrucción switch al método getItem para regresar el correcto Fragment basado en el valor de position.

Aún en el método onCreate, asocia el FragmentStatePagerAdapter con el ViewPager al llamar al método setAdapter.

Ahora que el ViewPager está listo, apunta el SmartTabLayout a él, al llamar al método setViewPager.

Ahora es tiempo de agregar los manejadores de click a los widgets ButtonFlat. Puedes hacerlo usando el método setOnClickListener, pasando una nueva instancia de la clase View.OnClickListener a él.

En el manejador del botón skip, llama a un metodo llamado finishOnboarding. Implementaremos éste método en el próximo paso.

En el manejador del botón next, usamos setCurrentItem junto con getCurrentItem para movernos a la próxima pantalla onboarding. También, si getCurrentItem regresa la última pantalla onboarding, llama a un método llamado finishOnboarding. Implementaremos éste método en un momento.

El código para los manejadores de los botones debería verse así:

Puedes querer hacer algunos cambios en el maquetado de la Activity onboarding, tales como remover el botón skip y cambiar la etiqueta del botón next a Done cuando el usuario llega la última pantalla onboarding. Puedes hacerlo al agregar un SimpleOnPageChangeListener al SmartTabLayout y sobreescribiendo su método onPageSelected.

6. Finalizando la Experiencia Onboarding

Cuando el usuario ha visto todas las pantallas onboarding, o escoge omitirlas, deberías finalizar la experiencia onboarding al llamar al método finishOnboarding (que es el nombre que usamos en el paso previo).

En el método finisOnboarding, obten una referencia al objeto SharedPreferences de la aplicación y establece un boolean para la clave onboarding_complete en true usando el método putBoolean. Usaremos ésta clave en el próximo paso para asegurarno que los usuarios vean las pantallas onboarding solo si no han completado el proceso onboarding.

Después, crea un nuevo Intent y llama al método startActivity para lanzar la principal Activity (la Activity que le corresponde abrir cuando el usuario da click en el ícono de la aplicación).

Finalmente, llama a finish para cerrar OnboardingActivity. Así se debería ver la implementación del método finishOnboarding:

7. Comenzando la Activity Onboarding

La Activity onboarding debería empezar tan pronto como sea posible si un usuario que no ha terminado el proceso de onboarding abre la aplicación. Ésto significa que añadirás el código para detectar nuevos usuarios y lanzar OnboardingActivity en el método onCreate de la Activity principal de tu aplicación.

Al checar si el objeto SharedPreferences tiene una clave llamada onboarding_complete cuyo valor es true, puedes determinar si el usuario ha finalizado el proceso onboarding. Si el valor de la clave es false, cierra la Activity principal inmediatamente y crea un nuevo Intent para lanzar OnboardingActivity. Observa el siguiente bloque de código para entender mejor éste concepto.

8. Actualiza el Manifiesto de la Aplicación

Si no lo has hecho todavía, declara OnboardingActivity en el manifiesto de la aplicación.

9. Compila y Ejecuta

Ahora puedes compilar tu aplicación y ejecutarla en un dispositivo Android. Como ésta será tu primera ejecución, deberías ver las pantallas onboarding en lugar de la Activity principal.

Conclusión

En éste tutorial, aprendiste como crear sencillas pantallas onboarding y agregarlas a tu aplicación Android. Usa éstas pantallas para responder concisamente a preguntas como qué puede hacer tu aplicación y cuándo debería ser utilizada.

Para una óptima experiencia de usuario, el proceso onboarding debería ser tan corto como sea posible y el usuario debería poder omitirlo en cualquier momento.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.