Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

Crear un fondo de pantalla en vivo en Android usando un GIF animado

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

¿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:

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.

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:

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.

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:

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í:

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:

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.

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

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.


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.