¿Alguna vez has visto un hermoso GIF animado que se reproduce sin problemas y te has preguntado si podrías usarlo como fondo de pantalla en vivo en tu dispositivo Android? Bueno, puedes, y en este tutorial te voy a mostrar cómo.

Introducción

La creación de un fondo de pantalla en vivo interesante y hermoso desde cero utilizando solo código matemático para generar los gráficos puede ser tedioso y lento. También requiere mucha creatividad. Por otro lado, crear un GIF animado o encontrar uno en línea es mucho más fácil. En este tutorial, aprenderá cómo convertir cualquier GIF animado en un fondo de pantalla en vivo.

Prerrequisitos

Asegúrate de que tienes configurada la última versión de Android Studio. Puedes obtenerlo desde el sitio web de Android Developer.

Aunque cualquier GIF animado funcionará, le sugiero que descargue un buen cinemagraph. Un cinemagraph no es más que un GIF animado, generalmente creado a partir de un video, que se reproduce sin interrupciones. Puedes encontrar muchos buenos en Flickr.

Para este tutorial, estoy usando un cinemagraph creado por el usuario djandyw.com de Flickr, ya que está disponible bajo una licencia de Creative Commons.

1. Crear un nuevo proyecto

Inicie Android Studio, cree un nuevo proyecto y nombre el proyecto GIFWallpaper. Elija un nombre de paquete único si planea publicar esta aplicación en Google Play.

Establezca el SDK mínimo en API 8: Android 2.2 (Froyo).

Nuestra aplicación no va a tener Activity, así que elija Add No Activity y haga clic en Finalizar.

2. Describe el fondo de pantalla

Un fondo de pantalla en vivo necesita un archivo que lo describa. Cree un nuevo archivo XML llamado res/xml/wallpaper.xml y reemplace su contenido con el siguiente XML:

<?xml version="1.0" encoding="UTF-8"?>
<wallpaper 
  xmlns:android="http://schemas.android.com/apk/res/android"
    android:label="GIF Wallpaper"
    android:thumbnail="@drawable/ic_launcher">
</wallpaper>

La etiqueta y la miniatura son particularmente importantes ya que se utilizarán cuando el fondo de pantalla aparezca en la lista de fondos de pantalla disponibles en su dispositivo.

3. Edita el Manifiesto

Para ejecutarse como un fondo de pantalla en vivo, nuestra aplicación solo necesita un permiso, android.permission.BIND_WALLPAPER.

Un fondo de pantalla en vivo se ejecuta como un Service que puede recibir la acción de intento de android.service.wallpaper.WallpaperService. Nombre el Service GIFWallpaperService y agréguelo al manifiesto del proyecto, AndroidManifest.xml.

<service
    android:name=".GIFWallpaperService"
    android:enabled="true"
    android:label="GIF Wallpaper"
    android:permission="android.permission.BIND_WALLPAPER" >
    <intent-filter>
        <action android:name="android.service.wallpaper.WallpaperService"/>
    </intent-filter>
    <meta-data
        android:name="android.service.wallpaper"
        android:resource="@xml/wallpaper" >
    </meta-data>
</service>

A continuación, para asegurarse de que la aplicación se pueda instalar solo en dispositivos que pueden ejecutar fondos de pantalla en vivo, agregue el siguiente fragmento de código al manifiesto:

<uses-feature
    android:name="android.software.live_wallpaper"
    android:required="true" >
</uses-feature>

4. Añadir GIF animado

Copie el GIF animado que descargó de Flickr a la carpeta assets del proyecto. He llamado el gif girl.gif.

5. Crea el servicio

Cree una nueva clase de Java y llámela GIFWallpaperService.java. Esta clase debe extender la clase WallpaperService.

public class GIFWallpaperService extends WallpaperService {
    
}

Debido a que WallpaperService es una clase abstracta, debe anular su método onCreateEngine y devolver una instancia de su propio Engine, que puede representar los marcos del GIF.

Para usar el GIF animado, primero debe convertirlo en un objeto Movie. Puedes usar el método decodeStream de la clase Movie para hacerlo. Una vez que se haya creado el objeto Movie, páselo como parámetro al constructor del Engine personalizado.

Así es como debería verse el método onCreateEngine:

@Override
public WallpaperService.Engine onCreateEngine() {
    try {
  	Movie movie = Movie.decodeStream(
                getResources().getAssets().open("girl.gif"));

		return new GIFWallpaperEngine(movie);
	}catch(IOException e){
		Log.d("GIF", "Could not load asset");
		return null;
	}
}

6. Crea el motor

Vamos a empezar a trabajar en Engine ahora. Cree una clase llamada GIFWallpaperEngine dentro de la clase GIFWallpaperService y haga que extienda WallpaperService.Engine.

Agregue los siguientes campos a esta nueva clase:

• frameDuration: este entero representa el retraso entre las operaciones de re-dibujo.  Un valor de 20 le da 50 cuadros por segundo.
• visible: este booleano permite que el motor sepa si el fondo de pantalla en vivo está actualmente visible en la pantalla. Esto es importante, porque no deberíamos estar dibujando el fondo de pantalla cuando no está visible.
• movie: Este es el GIF animado en forma de un objeto Movie.
• holder: Esto se refiere al objeto SurfaceHolder disponible para el motor. Debe inicializarse anulando el método onCreate.    
• handler: este es un objeto Handler que se utilizará para iniciar un Runnable que es responsable de dibujar el fondo de pantalla.

Tu clase ahora debería verse así:

private class GIFWallpaperEngine extends WallpaperService.Engine {
    private final int frameDuration = 20;

    private SurfaceHolder holder;
    private Movie movie;
    private boolean visible;
    private Handler handler;

    public GIFWallpaperEngine(Movie movie) {
        this.movie = movie;
        handler = new Handler();
    }

    @Override
    public void onCreate(SurfaceHolder surfaceHolder) {
        super.onCreate(surfaceHolder);
        this.holder = surfaceHolder;
    }
}

A continuación, cree un método llamado draw que dibuje los contenidos del GIF animado. Vamos a romper este método:

• Primero verificamos si la variable visible está configurada como true. Solo continuamos si asi es.
• Utilice el método lockCanvas de SurfaceHolder para obtener Canvas para dibujar.
• Dibuje un cuadro del GIF animado en Canvas después de escalarlo y colocarlo.
• Una vez que haya terminado todo el dibujo, vuelva a colocar Canvas en SurfaceHolder.
• Actualice el cuadro actual del GIF animado usando el método setTime del objeto Movie.
• Vuelva a llamar al método utilizando handler después de esperar milisegundos de FrameDuration.
  

El método draw nunca se llama directamente. Siempre se llama utilizando Handler y un objeto Runnable. Por lo tanto, hagamos del objeto Runnable un campo de la clase y llamémoslo drawGIF.

Agregue el siguiente código a la clase GIFWallpaperService:

private Runnable drawGIF = new Runnable() {
    public void run() {
        draw();
    }
};

private void draw() {
    if (visible) {
        Canvas canvas = holder.lockCanvas();
        canvas.save();
            // Adjust size and position so that
            // the image looks good on your screen
            canvas.scale(3f, 3f);
            movie.draw(canvas, -100, 0);
        canvas.restore();
        holder.unlockCanvasAndPost(canvas);
        movie.setTime((int) (System.currentTimeMillis() % movie.duration()));

        handler.removeCallbacks(drawGIF);
        handler.postDelayed(drawGIF, frameDuration);
    }
}

El método onVisibilityChanged se llama automáticamente cada vez que cambia la visibilidad del fondo de pantalla. Debemos anularlo y, en función del valor del argumento visible, iniciar o detener drawGIF. El método removeCallbacks del Handler se usa para detener cualquier ejecución de drawGIF pendiente.

@Override
public void onVisibilityChanged(boolean visible) {
    this.visible = visible;
    if (visible) {
        handler.post(drawGIF);
    } else {
        handler.removeCallbacks(drawGIF);
    }
}

Finalmente, anule el método onDestroy del Engine para detener cualquier ejecución pendiente de drawGIF si el fondo de pantalla está desactivado.

@Override
public void onDestroy() {
    super.onDestroy();
    handler.removeCallbacks(drawGIF);
}

7. Compilar e instalar

Tu fondo de pantalla en vivo ya está listo. Compílelo e instálelo en su dispositivo Android. Una vez instalado, debería poder encontrar el fondo de pantalla en la lista de fondos de pantalla disponibles.

La mayoría de los lanzadores te dan la opción de cambiar el fondo de pantalla después de un largo toque. Alternativamente, puede ir a la configuración de pantalla para cambiar el fondo de pantalla.

Si el GIF parece demasiado pequeño o no está colocado correctamente, entonces vuelva al método draw y ajuste la escala y la posición.

Conclusión

Ahora sabes cómo usar un GIF animado para crear un fondo de pantalla en vivo. Siéntete libre de experimentar con más GIFs. Si planeas publicar tu fondo de pantalla en vivo en Google Play, asegúrate de tener el permiso del creador para usar el GIF animado comercialmente. Visite el sitio web de Android Developer para obtener más información sobre la clase WallpaperService.