Creando Splash Screens con Xamarin Forms

Las pantallas de Inicio, o Splash Screens, son básicamente pantallas de introducción a la aplicación. Son el primer contacto entre el usuario y la aplicación, y es por ello, que es sumamente importante especificar buenas pantallas de inicio que den confianza al Usuario.

En esta entrada, detallaremos la forma en la cual podemos agregar Splash Screens a nuestras aplicaciones basadas en Xamarin Forms.

¡Adquiere el Máster en Xamarin Forms!

Antes de iniciar, te invito a visitar la página de la Membresía de mi academia, donde podrás encontrar:

– Cursos y talleres de Xamarin
– Cursos y talleres en C#
– Cursos y talleres de Blazor
– Cursos y talleres de ASP.NET
– Cursos y talleres en muchas otras tecnologías

¡Todo al precio más bajo posible por tiempo limitado!

¡Mira el Máster en Xamarin Forms!

Integrando un Splash Screen en el proyecto de Android con Xamarin Forms

Iniciemos con la plataforma de Android. Una aplicación de Android, toma cierto tiempo en ser desplegada, particularmente si es la primera vez que es lanzada. Podemos aprovechar ese tiempo, para llevar a cabo algún tipo de carga al inicio de la app, o bien, para mostrar algún tipo de publicidad asociada a nuestra marca.

Los pasos para integrar un Splash Screen con Android son:

• Crear un recurso tipo drawable para el Splash Screen
• Definir un nuevo tema que desplegará el recurso drawable, del paso anterior
• Agregar una nueva Actividad a la aplicación, que utilizará el tema definido en el paso anterior

Vamos a ello.

Creando el recurso drawable para el Splash Screen

En primer lugar, debemos definir un recurso tipo drawable xml, el cual definirá la apariencia de nuestro splash screen. En este caso, vamos a indicar, que deseamos un elemento que representará el color de fondo, y un segundo elemento, que será una imagen tipo bitmap centrada. En nuestro ejemplo, crearemos un archivo llamado splash_screen.xml, dentro de la carpeta drawable de Android, y tendrá el siguiente contenido.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap android:src="@drawable/logo_dev"
            android:tileMode="disabled"
            android:gravity="center"/>
  </item>
</layer-list> 

Analicemos las partes más importantes del código anterior. Primero, estamos indicando que el color de fondo que tendrá nuestro Splash Screen, está definido por un recurso llamado splash_background. Debemos definir este color, por lo tanto, vamos a abrir el archivo colors.xml:

Y dentro, definamos el color llamado, “splash_background”:

<resources>
    <color name="launcher_background">#FFFFFF</color>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="splash_background">#FFFFFF</color>
</resources> 

Genial, regresemos al archivo splash_screen.xml, y podemos apreciar una línea, donde asignamos el atributo src al elemento bitmap, con la cadena “@drawable/logo_dev”. Este recurso, es una imagen, que debemos colocar en la carpeta drawable.

Creando el Theme del Splash Screen

Toca el turno, de crear el Theme que utilizaremos para el Splash Screen. En el caso de un proyecto Xamarin Forms, ya se crea lo que es un archivo llamado styles.xml, que se encuentra en la carpeta values, del proyecto Xamarin.Android.

Dentro de este archivo, ya tendremos varias etiquetas establecidas. Antes del cierre de la etiqueta general “resources”, vamos a crear un nuevo tag style, de la siguiente forma.

<resources>
  ...
  <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowActionBar">true</item>
  </style>
</resources> 

Con lo anterior, lo que estamos logrando, es crear un nuevo tema para la actividad que crearemos posteriormente. El tema se llama “SplashTheme”, y en él especificamos que deseamos un fondo, asignando el drawable creado anteriormente, y de igual forma, eliminamos la barra del título de la ventana, entre otras cosas.

Creando una Splash Activity

Ya tenemos armado el Theme y el drawable, falta desplegar el Splash Screen. Esto lo lograremos, al crear una nueva Activity, la cual será la primera en ser lanzada (antes de MainActivity), y que tendrá características especiales , como la eliminación de la misma del historial de navegación, la asignación del tema creado y la especificación de la actividad como actividad inicial.

    [Activity(Label = "SplashActivity", Theme = "@style/SplashTheme", MainLauncher = true, NoHistory = true, ConfigurationChanges = ConfigChanges.ScreenSize)]
    public class SplashActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
            // Create your application here
        }
    } 

De igual forma, gracias a que asignamos el atributo ConfigurationChanges, nuestro SplashScreen se ajustará, de acuerdo a la rotación del dispositivo.

Como puedes observar, es una Actividad muy simple, y lo que hace, es iniciar la actividad principal (MainActivity), inmediatamente.

Con estos cambios, nuestro Splash Screen se verá de la siguiente forma.

Video sobre la creación de un Splash Screen en Android con Xamarin Forms

Integrando un Splash Screen en el proyecto iOS con Xamarin Forms

¡Próximamente!

Integrando un Splash Screen en el proyecto UWP con Xamarin Forms

¡Próximamente!