Crear Pantallas Onboarding (de Introducción) para Aplicaciones Android
Spanish (Español) translation by Javier Salesi (you can also view the original English article)



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.
compile 'com.github.navasmdc:MaterialDesign:1.5@aar'
Después, agrega una dependencia compile
para SmartTabLayout, una librería que ofrece un elemento título personalizado para el componente ViewPager
.
compile 'com.ogaclejapan.smarttablayout:library:1.2.1@aar'
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 componenteViewPager
.
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í:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/pager" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:id="@+id/navigation"> <com.gc.materialdesign.views.ButtonFlat android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.5" android:text="Skip" android:id="@+id/skip" /> <com.gc.materialdesign.views.ButtonFlat android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.5" android:text="Next" android:id="@+id/next" /> </LinearLayout> <com.ogaclejapan.smarttablayout.SmartTabLayout android:id="@+id/indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/navigation" android:layout_marginBottom="20dp" android:layout_centerHorizontal="true" app:stl_dividerThickness="0dp" app:stl_indicatorColor="#1e88e5" /> </RelativeLayout>
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:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:gravity="center_horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Welcome!" android:textSize="48sp" android:layout_marginTop="50dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="24sp" android:layout_marginTop="20dp" android:text="You seem to be a new user."/> </LinearLayout>
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í:
public class OnboardingFragment1 extends Fragment{ @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle s) { return inflater.inflate( R.layout.onboarding_screen1, container, false ); } }
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
.
public class OnboardingActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } }
Posteriormente, declara un ViewPager
, un SmartTabLayout
, y dos ButtonFlat
widgets como variables miembros de la clase.
private ViewPager pager; private SmartTabLayout indicator; private ButtonFlat skip; private ButtonFlat next;
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.
setContentView(R.layout.activity_onboarding); pager = (ViewPager)findViewById(R.id.pager); indicator = (SmartTabLayout)findViewById(R.id.indicator); skip = (ButtonFlat)findViewById(R.id.skip); next = (ButtonFlat)findViewById(R.id.next);
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.
FragmentStatePagerAdapter adapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { } @Override public int getCount() { } };
En el método getCount
, regresa el número de pantallas onboarding.
@Override public int getCount() { return 3; }
Agrega una instrucción switch
al método getItem
para regresar el correcto Fragment
basado en el valor de position
.
@Override public Fragment getItem(int position) { switch (position) { case 0 : return new OnboardingFragment1(); case 1 : return new OnboardingFragment2(); case 2 : return new OnboardingFragment3(); default: return null; } }
Aún en el método onCreate
, asocia el FragmentStatePagerAdapter
con el ViewPager
al llamar al método setAdapter
.
pager.setAdapter(adapter);
Ahora que el ViewPager
está listo, apunta el SmartTabLayout
a él, al llamar al método setViewPager
.
indicator.setViewPager(pager);
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í:
skip.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finishOnboarding(); } }); next.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(pager.getCurrentItem() == 2) { // The last screen finishOnboarding(); } else { pager.setCurrentItem( pager.getCurrentItem() + 1, true ); } } });
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
.
indicator.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { if(position == 2){ skip.setVisibility(View.GONE); next.setText("Done"); } else { skip.setVisibility(View.VISIBLE); next.setText("Next"); } } });
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
:
private void finishOnboarding() { // Get the shared preferences SharedPreferences preferences = getSharedPreferences("my_preferences", MODE_PRIVATE); // Set onboarding_complete to true preferences.edit() .putBoolean("onboarding_complete",true).apply(); // Launch the main Activity, called MainActivity Intent main = new Intent(this, MainActivity.class); startActivity(main); // Close the OnboardingActivity finish(); }
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.
// Get the shared preferences SharedPreferences preferences = getSharedPreferences("my_preferences", MODE_PRIVATE); // Check if onboarding_complete is false if(!preferences.getBoolean("onboarding_complete",false)) { // Start the onboarding Activity Intent onboarding = new Intent(this, OnboardingActivity.class); startActivity(onboarding); // Close the main Activity finish(); return; }
8. Actualiza el Manifiesto de la Aplicación
Si no lo has hecho todavía, declara OnboardingActivity
en el manifiesto de la aplicación.
<activity android:name=".OnboardingActivity" android:screenOrientation="landscape" />
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!