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
ViewPagerque permite a los usuarios utilizar el gesto de desplazamiento para moverse de una pantalla onboarding a la siguiente. - Un
ButtonFlatcon la etiqueta Skip, que permite a usuarios impacientes omitir el proceso de onboarding. - Un
ButtonFlatcon 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!
