Android >> Crear un splash screen en Android usando Fragments

En este artículo vimos como añadir un splash screen, en esta ocasión vamos a ver como añadir uno usando Fragments. La clase Fragment fue introducida en la versión Android 3.0 (API level 11), para que la clase Fragment fuera compatible con las versiones anteriores de Android, se lanzó el Support Library (Librería de soporte). La Librería de soporte de Android es un archivo JAR que permite utilizar algunas funciones de las versiones más recientes de Android en tu aplicación aunque se ejecute en versiones antiguas.

splash-screen-example-2

Te recomiendo que leas antes la entrada sobre la creación de un splash screen sin el uso de fragments para comprender mejor esta guía.

En este tutorial vamos a diferenciar dos versiones, una para la versión Android 3.0 o superior y otra para versiones anteriores a la 3.0. Esta división la vamos a realizar para ver de una manera más clara y sencilla las diferencias entre el uso de las funciones por defecto y de las que proporciona la Libreria de soporte para trabajar con fragments. Vamos a usar también las Property Animations y las View Animations, las property animations fueron introducidas en la versión Android 3.0 al igual que la clase Fragment, pero al contrario de ésta, dichas animaciones no son compatibles con versiones anteriores, por lo que usaremos las view animations en versiones anteriores a la 3.0. Comenzemos.

Vamos a empezar definiendo los layouts de nuestros fragments y también el de la actividad principal. Dichos layouts serán los mismos independientemente de la versión de Android que usemos:

res / layout / fragment_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>

res / layout / fragment_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>

res / layout / activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

</FrameLayout>

La imagen que hemos usado en el layout fragment_splash_screen.xml ha sido editada con la utilidad Draw 9-patch y puedes descargarla a continuación:

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 definido los layouts vamos a definir las clases para nuestros fragments. Si estás usando una versión anterior a las 3.0 asegúrate de que tienes instalada la Librería de soporte. Para saber como instalar la Librería de soporte puedes visitar esta página:

MainFragment.java

package com.amatellanes.android;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_main, container, false);
	}

}

SplashScreenFragment.java

package com.amatellanes.android;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SplashScreenFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_splash_screen, container,
				false);
	}

}

Si hacemos uso de una versión anterior a la 3.0 deberemos de sustituir la importación de la clase Fragment por esta otra que proporciona la Librería de soporte:

import android.support.v4.app.Fragment;

A continuación definimos nuestra actividad principal que también variará dependiendo de la versión de Android que utilicemos. Si estamos usando la versión 3.0 o posterior usaremos la siguiente implementación.

MainActivity.java

package com.amatellanes.android;

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

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {

	private static final long SPLASH_SCREEN_DELAY = 3000;

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

		// Hide action bar whereas the splash screen is visible
		getActionBar().hide();

		if (savedInstanceState == null) {
			// Show the splash screen at the beginning
			getFragmentManager().beginTransaction()
					.add(R.id.container, new SplashScreenFragment()).commit();
		}

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

				// Replace the splash screen fragment to main fragment and
				// specific animation resources to run for the fragments that
				// are entering and exiting in this transaction.
				getFragmentManager()
						.beginTransaction()
						.setCustomAnimations(R.animator.flip_left_in,
								R.animator.flip_left_out)
						.replace(R.id.container, new MainFragment()).commit();

				// Show action bar when the main fragment is visible
				runOnUiThread(new Runnable() {
					public void run() {
						getActionBar().show();
					}
				});

			}

		};

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

Lo primero que hacemos es ocultar la action bar con el método hide() para que el splash screen se muestre a pantalla completa. Cargamos en primer lugar el fragment que mostrará el splash screen, para ello invocaremos al FragmentManager con el método getFragmentManager(), comenzaremos una transición con el método beginTransaction() y añadiremos el fragment con el método add(int, android.app.Fragment), indicando el id del contenedor que hemos definido en el layout activity_main.xml. A continuación lanzaremos un Timer de una duración determinada y cuando se detenga se cargará el fragment principal, para ello invocaremos nuevamente al FragmentManager, pero esta vez definiremos una animación que se ejecutará en el cambio de un fragment a otro con el método setCustomAnimations(int, int), en este método usaremos las property animations ya que estamos trabajando con Android 3.0 o superior. La definición de las dos animaciones que usamos las puedes decargar a continuación: flip_left_in.xml y flip_left_out.xml. A continuación invocamos al método replace(int, android.app.Fragment), ya que hay cargado un fragment en el contenedor. Una vez cargado el fragment principal volvemos a mostrar la action bar, para ello deberemos de usar el método show() dentro del método runOnUiThread(java.lang.Runnable), ya que nos encontramos en un hilo diferente al que controla el interfaz gráfico, si no usas este método se lanzará la siguiente excepción:

CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.

Ya tendremos lista nuestro splash screen:

splash-screen-v11

Si estamos usando una versión anterior a la 3.0 usaremos la siguiente implementación, que será prácticamente igual pero usando los métodos y clases que proporciona la Libreria de soporte y sustituyendo el uso de las property animations por las view animations:

MainActivity.java

package com.amatellanes.android;

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

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {

	private static final long SPLASH_SCREEN_DELAY = 3000;

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

		if (savedInstanceState == null) {
			// Show the splash screen at the beginning
			getSupportFragmentManager().beginTransaction()
					.add(R.id.container, new SplashScreenFragment()).commit();
		}

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

				// Replace the splash screen fragment to main fragment and
				// specific animation resources to run for the fragments that
				// are entering and exiting in this transaction.
				getSupportFragmentManager()
						.beginTransaction()
						.setCustomAnimations(R.anim.fragment_slide_left_enter,
								R.anim.fragment_slide_left_exit)
						.replace(R.id.container, new MainFragment()).commit();

			}
		};

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

}

Como vemos esta implementación es muy parecida a la anterior, únicamente cambian los nombres de algunas funciones y las importaciones de algunas clases, además en esta implementación se usan las view animations ya que estamos usando una versión inferior a la 3.0. Los ficheros donde se definen las animaciones los puedes descargar a continuación: fragment_slide_left_enter.xml y fragment_slide_left_exit.xml ,

Ya tendremos lista nuestro splash screen:

splash-screen

Más información | Crear un splash screen en Android, Android Developers | Fragments y Android Developers | Adding Animations

Descargar código | GitHub (Android < 3.0) y GitHub (Android => 3.0)

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: