Creare un Live Wallpaper su Android Usando una Gif Animata

Italian (Italiano) translation by Stefano Pastore (you can also view the original English article)

Hai mai visto una bella gif animata che viene riprodotta senza intoppi e ti sei chiesto se puoi utilizzarla come sfondo per il tuo dispositivo Android? Ebbene, puoi, in questo tutorial ti mostrerò come fare.

Introduzione

Creare uno sfondo animato bello ed interessante a partire da zero, utilizzando solamente matematica e codice per generare la grafica, può essere tedioso e richiedere molto tempo. Necessita anche di molta creatività. D'altra parte, creare una gif animata o trovarne una online è molto più facile. In questo tutorial, imparerai come convertire una gif animata in uno sfondo animato.

Prerequisiti

Assicurati di avere installata l'ultima versione di Android Studio. La puoi ottenere dal sito per gli sviluppatori di Android.

Anche se una qualsiasi gif animata andrà bene per il nostro scopo, ti consiglio di scaricare una buona cinemagraph. Una cinemagraph non è nulla se non una gif animata — generalmente ottenuta a partire da un video — che viene riprodotta all'infinito. Ne puoi trovare di ottime su Flickr.

Per questo tutorial, userò una cinemagraph creata dall'utente Flickr djandyw.com poiché è disponibile sotto licenza Creative Commons.

1. Creare un Nuovo Progetto

Apri Android Studio, crea un nuovo progetto e chiamalo GIFWallpaper. Scegli un nome di pacchetto unico se hai intenzione di pubblicare l'app su Google Play.

Imposta il valore minimo della SKD ad API 8: Android 2.2 (Froyo).

La nostra app non avrà un'Activity, per cui scegli Add No Activity e clicca su Finish.

2. Descrivi lo Sfondo

Uno sfondo animato necessita di un file che lo descriva. Crea un nuovo file XML chiamato res/xml/wallpaper.xml e rimpiazza il suo contenuto con il codice XML che segue:

<?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>

I valori label e thumbnail sono particolarmente importanti perché saranno utilizzati quando lo sfondo apparirà nella lista di quelli disponibili sul tuo dispositivo.

3. Modifica il file Manifest

Per funzionare come sfondo animato, la nostra app ha bisogno solo di un permesso android.permission.BIND_WALLPAPER.

Uno sfondo animato funziona come Service che può ricevere l'azione android.service.wallpaper.WallpaperService. Nomina il Service GIFWallpaperService ed aggiungilo ad file manifest del progetto, 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>

Poi, per assicurarsi che l'app possa essere installata solo su dispositivi che supportano sfondi animati, aggiungi il seguente blocco di codice al file Manifest:

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

4. Aggiungere la Gif Animata

Copia la gif animata che hai scaricato da Flickr nella cartella assets del progetto. Io ho chiamato la gif girl.gif.

5. Creare il Service

Crea una nuova classe Java e chiamala GIFWallpaperService.java. La classe dovrebbe estendere la classe WallpaperService.

public class GIFWallpaperService extends WallpaperService {
    
}

Poiché WallpaperService è una classe astratta, devi fare l'override del suo metodo onCreateEngine e restituire un'instanza del tuo Engine, che farà il render dei frame della gif.

Per usare la gif animata, devi prima convertira in un oggetto Movie. Per far ciò, puoi usare il metodo decodeStream della classe Movie. Una volta che l'oggetto Movie è stato creato, passalo come parametro al costruttore dell'Engine creato.

Così è come il metodo onCreateEngine dovrebbe essere fatto:

@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. Creare Engine

Cominciamo adesso a lavorare su Engine. Crea una classe che si chiama GIFWallpaperEngine all'interno della classe GIFWallpaperService e fa' che estenda WallpaperService.Engine.

Aggiungi i seguenti campi a questa nuova classe:

frameDuration: questo intero rappresenta il ritardo tra le operazioni di ridisegno. Un valore di 20 ti dà 50 frame al secondo.
visible: questo booleano fa sapere ad engine se lo sfondo animato è correntemente visibile sullo schermo. Questo è impostante perché non dovremmo disegnare lo sfondo se esso non è visibile.
movie: questa è la gif animata sotto forma di oggetto Movie.
holder: si riferisce all'oggetto SurfaceHolder disponibile all'engine. Deve essere inizializzato facendo l'override del metodo onCreate.
handler: questo è un oggetto Handler che sarà utilizzato per far partire un Runnable, responsabile del disegno dello sfondo.

La tua classe dovrebbe adesso essere simile a questa:

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;
    }
}

Poi, crea un metodo chiamato draw che disegni i contenuti della gif animata. Scomponiamo questo metodo:

Prima verifichiamo che la variabile visibile abbia valore true. Continuiamo solo se lo è.
Usa il metodo lockCanvas di SurfaceHolder per ottenere un Canvas su cui disegnare.
Disegna un frame della gif animata sul Canvas dopo averlo ridimensionato e posizionato.
Una volta che i disegni sono finiti, ripassa Canvas a SurfaceHolder.
Aggiorna il frame corrente della gif animata utilizzando il detodo setTime dell'oggetto Movie.
Chiama il metodo ancora una volta utilizzando l'handler dopo aver aspettato per frameDuration millisecondi.

Il metodo draw non è mai chiamato in maniera diretta. Viene sempre chiamato utilizzando un oggetto Handler e un Runnable. Quindi rendiamo l'oggetto Runnable un campo della classe e chiamiamo drawGIF.

Aggiungi il seguente codice alla classe 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);
    }
}

Il metodo onVisibilityChanged viene automaticamente invocato non appena la visibilità dello sfondo cambia. Abbiamo bisogno di farne l'override e, basandosi sul valore dell'argomento visible, far iniziare o fermare drawGIF. Il metodo removeCallbacks di Handler è utilizzato per fermare qualsiasi esecuzione di drawGIF in attesa.

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

Infine, fai l'override del metodo onDestroy di Engine per fermare qualsiasi esecuzione di drawGIF in sospeso se lo sfondo è disattivato.

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

7. Compila ed Installa

Il tuo sfondo animato è adesso pronto. Compila ed installalo sul tuo dispositivo Android. Una volta installato, dovresti poter trovare lo sfondo nella lista degli sfondi disponibili.

La maggior parte dei launcher dà un'opzione per cambiare lo sfondo dopo che si è fatto a lungo il tap. In alternativa puoi andare nelle impostazioni di visualizazione per cambiare lo sfondo.

Se la gif risulta troppo piccola o non posizionata correttamente, torna indietro al metodo draw e modifica i valori di ridimensionamento e posizione.

Conclusione

Adesso sai come utilizzare una gif animata per creare uno sfondo animato. Sentiti libero di sperimentare con altre gif. Se hai intenzione di pubblicare il tuo sfondo su Google Play, assicurati di avere il permesso del creatore dell'immagine per utilizzare la gif a fini commerciali. Visita il sito degli sviluppatori di Android per saperne di più sulla classe WallpaperService.