Cargar un gif animado con Glide

¿Cómo cargar un Gif Animado en Android?

Veremos el paso a paso de cómo insertar un gif animado en una app Android de forma sencilla y fácil.

Pues antes de empezar creamos una nueva aplicación vacia el nombre del proyecto no es importante, puesto que es simplemente un ejemplo.

Paso 1 en AndroidManifest.xml

• Basicamente debemos dar permisos de Internet a la aplicación
• Permitir ClearText en  true en la Aplicación
• Permitir export en true en la Actividad principal

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.codea.gifs">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:usesCleartextTraffic="true"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Gifs">
        <activity android:name=".MainActivity" android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Paso 2: Cambios en Gradle

Para incorporar la librería Glide simplemente insertamos dentro de dependencias la siguiente linea 

    implementation 'com.github.bumptech.glide:glide:4.12.0'

hacemos SYNC NOW y debe de quedar asi

plugins {
    id 'com.android.application'
}

android {
    compileSdkVersion 31
    buildToolsVersion "30.0.3"

    defaultConfig {
        applicationId "com.codea.gifs"
        minSdkVersion 23
        targetSdkVersion 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {

    implementation 'androidx.appcompat:appcompat:1.4.0'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
    implementation 'com.github.bumptech.glide:glide:4.12.0'

    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

}

Paso 3 reemplazamos el textview por un ImageView e indicamos el ID en activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imagen"
        android:adjustViewBounds="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4: Integramos el proceso de carga con Glide en MainActivity.java

• Instanciamos el widget ImageView
• Creamos la cadena que contiene la url de la imagen en internet
• Parseamos al url
• Finalmente usamos Glide, llenado los parámetros de contexto, y la url parseada  e indicamo el widget donde se cargará la Imagen Gif Ainmada-

package com.codea.gifs;

import androidx.appcompat.app.AppCompatActivity;

import android.net.Uri;
import android.os.Bundle;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {

    private ImageView imagen;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        imagen = findViewById(R.id.imagen);

        String url= "http://dominio.com/gifs/leandra_24367.gif";

        Uri urlparse = Uri.parse(url);

        Glide.with(getApplicationContext()).load(urlparse).into(imagen);

    }
}

Como han podido notar, este procedimiento es muy sencillo para obtener el objetivo sencillo de cargar un gif animado en una App Android. Espero que se de utilidad, y hasta un próximo tutorial.

Leido 5593 veces | 1 usuarios