arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Crear Splash Screen en android

Marines Méndez

Software Developer

av_timer 2 Min. de lectura

remove_red_eye 34288 visitas

calendar_today 21 Octubre 2019

Splash Screen es la primera pantalla visible para el usuario cuando se inicia la aplicación. La pantalla de bienvenida es una de las pantallas más vitales de la aplicación, ya que es la primera experiencia del usuario con la aplicación. En el pasado se usaba de manera incorrecta el Splash Screen ya que retrasaba intencionalmente al usuario agregando una pantalla de bienvenida que se muestra durante x segundos. Y muchas personas en la actualidad usan esta misma técnica la cual es incorrecto. Después de un tiempo Material Design proporcionó el patrón llamado Launch Screen enseñándonos así a usar el Splash Screen de manera correcta.

Al abrir la aplicación hay un momento de nada ya que la aplicación aún no está en memoria a esto se le llama “cold start”, el administrador de ventanas intenta dibujar una UI de marcador de posición utilizando elementos del tema de la aplicación como windowBackground. Entonces, en lugar de mostrar el valor predeterminado windowBackground (generalmente blanco o negro).

Texto alternativo

Esta puede ser cambiada a un dibujo personalizado que muestre su pantalla de inicio. De esta manera, la pantalla de inicio solo se muestra cuando es necesario y no ralentiza a los usuarios.

Primero vamos a res/drawable clic derecho New seleccionamos Drawable resource file y colocamos el siguiente nombre “splash_background.xml” dentro de este vamos a crear un fondo usando layer-list y item con ambos crearemos capas, en la primera capa vamos a colocar el color del fondo y en la segunda capa una imagen centrada, el código nos quedaría de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="color/colorPrimary" /><!-- color de fondo -->
   <item>
       <bitmap
           android:gravity="center"
           android:src="@drawable/logo_codigofacilito" /> <!-- imagen centrada -->
   </item>
</layer-list>

Si deseamos agregar más elementos usamos item ahora nos vamos a res/values/styles.xml y dentro de este crearemos un estilo y modificaremos windowBackground agregando el fondo que creamos anteriormente

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
   <item name="android:windowBackground">@drawable/splash_background</item>
</style>

Por último vamos a colocar el tema en nuestra actividad que se lanzará al inicio nos vamos a manifest y abrimos el archivo AndroidManifest.xml y agregamos el tema

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.codigofacilito.mg.splashscreen">

   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:supportsRtl="true"
       android:theme="@style/AppTheme">
       <activity android:name=".MainActivity"
           android:theme="@style/SplashTheme"> <!--Aquí llamamos nuestro tema -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>

   </application>

</manifest>

Al cargar la aplicación se mostrará nuestro diseño y ya no la pantalla blanca

Texto alternativo

Nota: Dato muy importante si quieren agregar Splash Screen con animaciones tendrían que hacer esperar al usuario como se hacía antes, esto no es una buena práctica, muchas personas te enseñan a crear Splash Screen de manera incorrecta, sabrás si todo esta bien si al iniciar la aplicación no se muestra la pantalla blanca, pero si se sigue mostrando y después aparece el “Splash Screen” es incorrecto.

Bootcamp Ciencia de Datos

12 semanas de formación intensiva en los conocimientos, fundamentos, y herramientas que necesitas para ser científico de datos

Más información