Android >> Crear un splash screen en Android

Muchas de las aplicaciones que usamos a diario en nuestros dispositivos muestran una pantalla de presentación al inicio durante unos pocos segundos. Este tipo de pantallas se les denomina splash screen y con ello conseguimos mejorar la inmersión del usuario en nuestra aplicación.

splash-screen-example

En este tutorial vamos a ver como añadir un splash screen a nuestra aplicación. Lo primero que debemos hacer es preparar la imagen que vamos a usar. Como siempre que trabajamos con imágenes en Android, deberemos proporcionar diferentes resoluciones para los diferentes tamaños de pantallas disponibles en los dispositivos Android.

La imagen que vamos a utilizar en este tutorial la hemos editado con la herramienta draw9patch disponible en el SDK de Android. Dicha herramienta es un editor WYSIWYG que nos permite generar archivos 9-patch a partir de imágenes PNG. Un archivo 9-patch es básicamente una imagen de mapa de bits extensible, es decir, una imagen que se redimensionará al tamaño de la vista a la que se le ha asignado la imagen como background o source. Puedes encontrar más información aquí y aquí sobre la herramienta draw9patch. En la imagen que vamos a usar, hemos marcado con la herramienta draw9patch las esquinas como los únicos puntos por los que la imagen será estirada para adaptarse al tamaño de la vista, manteniendo el logotipo con su apariencia original:

splash_screen.9
Si descargas la imagen debes cambiar el nombre de la imagen a splash_screen.9.png para que funcione correctamente

Una vez tenemos lista la imagen que vamos a mostrar, lo primero que vamos a hacer es definir el layout splash_screen.xml donde colocaremos la imagen en una vista ImageView que ocupará todo el layout especificando en el atributo android:scaleType el valor fitXY:

splash_screen.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SplashScreenActivity" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY"
        android:src="@drawable/splash_screen" />

</RelativeLayout>

A continuación pasamos a definir la actividad SplashScreenActivity.java que se ocupara de la gestión del splash screen. En primer lugar configuramos la pantalla en vertical y a pantalla completa (ocultando la barra de título o la action bar dependiendo de la versión de Android que estemos usando) utilizando los métodos setRequestedOrientation(int) y requestWindowFeature(int). A continuación definimos una cuenta atrás usando las clases Timer y TimerTask, mientras se está ejecutando esta cuenta atrás se mostrará el splash screen, una vez se haya cumplido la cuenta atrás se lanzará la actividad principal y el splash screen dejará de ser visible:

SplashScreenActivity.java

package com.amatellanes.android;

import java.util.Timer;
import java.util.TimerTask;

import android.app.Activity;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.view.Window;

public class SplashScreenActivity extends Activity {

    // Set the duration of the splash screen
    private static final long SPLASH_SCREEN_DELAY = 3000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set portrait orientation
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        // Hide title bar
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.splash_screen);

        TimerTask task = new TimerTask() {
            @Override
            public void run() {

                // Start the next activity
                Intent mainIntent = new Intent().setClass(
                        SplashScreenActivity.this, MainActivity.class);
                startActivity(mainIntent);

                // Close the activity so the user won't able to go back this
                // activity pressing Back button
                finish();
            }
        };

        // Simulate a long loading process on application startup.
        Timer timer = new Timer();
        timer.schedule(task, SPLASH_SCREEN_DELAY);
    }

}

A continuación definimos el layout y la actividad correspondientes a la actividad principal. En esta ocasión vamos a definir una actividad y layout simples, deberás de sustituirlos por los de tu aplicación:

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

MainActivity.java

package com.amatellanes.android;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

Por último deberemos de especificar en el fichero AndroidManifest.xml que la primera actividad a ejecutar cuando arranque la aplicación sea la actividad SplashScreenActivity.java, ya que gestiona el splash screen, es decir:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.amatellanes.android"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.amatellanes.android.SplashScreenActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.amatellanes.android.MainActivity"
            android:label="@string/app_name" />
    </application>

</manifest>

Con este último paso ya tendremos listo nuestro splash screen en nuestra aplicación.

splash-screen-v11

Más información | Crear un splash screen en Android usando Fragments

Descargar código | GitHub

Etiquetado , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: