Inicio » Blog » Android

27 diciembre, 2021

Cargar un gif animado con Glide

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

¿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 4794 veces

Descarga el código fuente Android

Recurso descargado 13 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Android Básico App Restaurante Android Básico App Restaurante

Curso Android Básico para desarrollar una app para un restaurante.

Descarga del código fuente

USD 10.00

Android PHP MySql App Restaurant Android PHP MySql App Restaurant

Curso Android, PHP y MySql App Restaurant con Pedidos Delivery

Descarga del código fuente

USD 12.00

App Minimarket con Scanner QR App Minimarket con Scanner QR

Curso App Minimarket con Lector QR en Android, Flutter y Laravel

Descarga del código fuente

USD 200.00

Aprende más sobre Android

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023