Mostrar GIF animados

Los GIFs animados mejoran la comunicación y la autoexpresión, ya que agregan un elemento dinámico y atractivo a las conversaciones que permite a los usuarios transmitir emociones, reacciones y humor de manera más eficaz que las imágenes estáticas o el texto por sí solos. La popularidad de los GIF en la cultura en línea hace que su integración sea esencial para mantenerse relevante y atractivo para los usuarios que esperan funciones modernas y una experiencia multimedia enriquecida.

Cómo mostrar un GIF animado con una biblioteca de carga de imágenes

Las bibliotecas de carga de imágenes hacen gran parte del trabajo pesado por ti, a menudo compatibilidad con versiones anteriores para funciones como GIF animados. En el siguiente código, se muestra cómo implementar la reproducción de GIF animados con la biblioteca de carga de imágenes de Coil:

Agrega la dependencia de Coil para GIF:

implementation("io.coil-kt:coil-gif:2.6.0")

Crear el cargador habilitado para GIF con la plataforma ImageDecoder, agregada en Android 9 (nivel de API 28), así como GifDecoder de Coil para brindar retrocompatibilidad:

val gifEnabledLoader = ImageLoader.Builder(this)
    .components {
        if ( SDK_INT >= 28 ) {
            add(ImageDecoderDecoder.Factory())
        } else {
            add(GifDecoder.Factory())
        }
    }.build()

Usa el gifEnabledLoader en el elemento Coil AsyncImage componible:

AsyncImage(
    imageLoader = gifEnabledLoader,
    ...
)

Muestra un GIF animado compatible con la plataforma de Android

AsyncImage(
     model = request,
     imageLoader = videoEnabledLoader,
     contentDescription = null
 )

Android 9 y versiones posteriores (nivel de API 28) tienen compatibilidad integrada con archivos GIF animados. Con un un poco de ayuda de una biblioteca de acompañamiento, Jetpack Compose puede reproducir estas animaciones con solo unas pocas líneas de código.

Agrega la dependencia de la biblioteca de Accompanist para admitir pintores de elementos de diseño:

implementation("com.google.accompanist:accompanist-drawablepainter:0.35.0-alpha")

Crear un método que cargue el GIF animado en un AnimationdImageDrawable con ImageDecoder:

private fun createAnimatedImageDrawableFromImageDecoder(context: Context, uri: Uri): AnimatedImageDrawable {
    val source = ImageDecoder.createSource(context.contentResolver, uri)
    val drawable = ImageDecoder.decodeDrawable(source)
    return drawable as AnimatedImageDrawable
}

Usa rememberDrawablePainter con el AnimatedImageDrawable:

Image(
    painter = rememberDrawablePainter(
        drawable = createAnimatedImageDrawableFromImageDecoder(applicationContext, mediaUri)),
     contentDescription = "animated gif"
)

Admite archivos GIF de teclados de imagen y otro contenido enriquecido

Los archivos GIF animados son funciones populares en muchos teclados de Android, por ejemplo, Gboard de Google La forma recomendada actual para admitir cualquier tipo de calcomanía o animación, ya sea que provenga del método de entrada o de otra app, es usar un OnReceiveContentListener.

Consulta Recibe contenido enriquecido para obtener más información sobre cómo implementar la asistencia para recibir animaciones GIF y otros tipos de rich media en tu app.