Cargar un gif animado con Glide

¿Cómo cargar un gif animado en una aplicación Android?

Video Leer un Gif Animado en Android

Para cargar un gif animado en una app Android debemos seguir varios pasos pero empecemos integrando la librería Glide y usaremos el widget ImageView

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

Para descargar el recurso de forma gratuita { crea una cuenta } gratis .

Descarga código fuente

ENTRAR PARA DESCARGAR 3

Redactado por: , Leido 664 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021