Crie um Papel de Parede Vivo no Android usando um GIF animado

Portuguese (Português) translation by Maurício Eduardo de Oliveira (you can also view the original English article)

Você já viu um lindo GIF animado que faz um loop perfeito e se perguntou se você poderia usá-lo como papel de parede ao vivo em seu dispositivo Android? Bem, você pode, e neste tutorial vou mostrar como.

Introdução

Criar um papel de parede vivo interessante e bonito do zero usando apenas matemática e código para gerar os gráficos pode ser tedioso e demorado. Também requer muita criatividade. Por outro lado, criar um GIF animado ou encontrar um on-line é muito mais fácil. Neste tutorial, você aprenderá a converter qualquer GIF animado em um papel de parede vivo.

Pré-requisitos

Verifique se você tem a versão mais recente do Android Studio configurada. Você pode obtê-lo no site do desenvolvedor Android.

Mesmo que qualquer GIF animado faça, sugiro que você baixe um bom cinemagraph. Um cinemagraph nada mais é que um GIF animado - geralmente criado a partir de um vídeo - que faz um loop perfeito. Você pode encontrar muitos bons no Flickr.

Para este tutorial, estou usando um cinemagraph criado pelo usuário do Flickr djandyw.com, como está disponível sob uma licença Creative Commons.

1. Crie um Novo Projeto

Inicie o Android Studio, crie um novo projeto e nomeie o projeto GIFWallpaper. Escolha um nome de pacote exclusivo se você pretende publicar este aplicativo no Google Play.

Defina o SDK mínimo para API 8: Android 2.2 (Froyo).

Nosso aplicativo não terá uma Activity, então escolha Add No Activity e clique em Finish.

2. Descreva o Papel de Parede

Um papel de parede vivo precisa de um arquivo que o descreva. Crie um novo arquivo XML chamado res/xml/wallpaper.xml e substitua seu conteúdo pelo seguinte 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>

O label e a thumbnail são particularmente importantes, pois serão usados quando o papel de parede aparecer na lista de papéis de parede disponíveis no seu dispositivo.

3. Editando o Manifest

Para executar como um papel de parede vivo, seu aplicativo precisa apenas de uma permissão, android.permission.BIND WALLPAPER.

Um papel de parede vivo é executado como um Service que pode receber a ação da intent do android.service.wallpaper.WallpaperService. Nomeie o Service GIFWallpaperService e adicione-o ao manifest do projeto, 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>

Em seguida, para garantir que o aplicativo possa ser instalado apenas em dispositivos que podem executar papéis de parede vivo, adicione o seguinte snippet ao manifest:

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

4. Adicionar GIF animado

Copie o GIF animado que você baixou do Flickr para a pasta de assets do projeto. Eu nomeei o GIF girl.gif.

5. Crie um Service

Crie uma nova classe Java e nomeie-a como GIFWallpaperService.java. Esta classe deve estender a classe WallpaperService.

1	public class GIFWallpaperService extends WallpaperService {
2
3	}

Como o WallpaperService é uma classe abstrata, você precisa sobrescrever seu método onCreateEngine e retornar uma instância do seu próprio Engine, que pode renderizar os frames do GIF.

Para usar o GIF animado, você primeiro precisa convertê-lo em um objeto Movie. Você pode usar o método decodeStream da classe Movie para fazer isso. Depois que o objeto Movie for criado, passe-o como um parâmetro para o construtor do Engine personalizado.

É assim que o método onCreateEngine deve ser:

@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. Crie a Engine

Vamos começar a trabalhar na Engine agora. Crie uma classe chamada GIFWallpaperEngine dentro da classe GIFWallpaperService e faça com que ela estenda o WallpaperService.Engine.

Adicione os seguintes campos a esta nova classe:

frameDuration: Este inteiro representa o atraso entre as operações de re-draw. Um valor de 20 fornece 50 quadros por segundo.
visible: Este boolean permite que a engine saiba se o papel de parede vivo está atualmente visível na tela. Isso é importante, porque não devemos desenhar o papel de parede quando ele não estiver visível.
movie: Este é o GIF animado na forma de um objeto Movie.
holder: refere-se ao objeto SurfaceHolder disponível para a engine. Tem que ser inicializado substituindo o método onCreate.
handler: Este é um objeto Handler que será usado para iniciar um Runnable que é responsável por realmente desenhar o papel de parede.

Sua classe deve ter esta aparência:

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

Em seguida, crie um método chamado draw que desenhe o conteúdo do GIF animado. Vamos quebrar este método:

Primeiro, verificamos se a variável visible está definida como true. Nós só continuamos se for.
Use o método lockCanvas do SurfaceHolder para obter um Canvas para desenhar.
Desenhe um quadro do GIF animado no Canvas após dimensioná-lo e posicioná-lo.
Quando todo o desenho estiver pronto, passe o Canvas de volta ao SurfaceHolder.
Atualize o quadro atual do GIF animado usando o método setTime do objeto Movie.
Chame o método novamente usando o handler após aguardar por milissegundos do frameDuration.

O método draw nunca é chamado diretamente. É sempre chamado usando um Handler e um objeto Runnable. Portanto, vamos fazer do objeto Runnable um campo da classe e chamá-lo de drawGIF.

Adicione o seguinte código à 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);
    }
}

O método onVisibilityChanged é chamado automaticamente sempre que a visibilidade do papel de parede é alterada. Precisamos sobrescrevê-lo e, com base no valor do argumento visible, iniciar ou parar o drawGIF. O método removeCallbacks do Handler é usado para interromper as execuções pendentes do drawGIF.

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

Finalmente, sobrescreva o método onDestroy da Engine para parar todas as execuções pendentes do drawGIF se o papel de parede estiver desativado.

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

7. Compilando e Instalando

Seu papel de parede vivo está pronto agora. Compile e instale no seu dispositivo Android. Uma vez instalado, você deve ser capaz de encontrar o papel de parede na lista de papéis de parede disponíveis.

A maioria das launchers oferece uma opção para alterar o papel de parede após um longo gesto de toque. Alternativamente, você pode ir para as configurações de exibição para alterar o papel de parede.

Se o GIF estiver muito pequeno ou não estiver posicionado corretamente, volte ao método draw e ajuste a scale e a position.

Conclusão

Agora você sabe como usar um GIF animado para criar um papel de parede vivo. Sinta-se à vontade para experimentar mais GIFs. Se você pretende publicar seu papel de parede vivo no Google Play, verifique se você tem a permissão do criador para usar o GIF animado comercialmente. Visite o site do desenvolvedor Android para saber mais sobre a classe WallpaperService.