¿Cómo cargar SVG desde URL en Android ImageView?

Se ve que muchas aplicaciones de Android requieren el uso de imágenes de alta calidad que no se desenfoquen al hacer zoom. Así que tenemos que usar imágenes de alta calidad. Pero si usamos imágenes PNG, se desdibujarán después de hacer zoom porque las imágenes PNG están compuestas de píxeles y reducirán su calidad después de hacer zoom. Por lo tanto, es preferible usar imágenes SVG porque las imágenes SVG están formadas por vectores y no reducen su calidad incluso después de hacer zoom. Ahora veremos cómo podemos cargar SVG desde su URL en nuestra aplicación de Android.

Pasos para cargar una imagen SVG desde una URL

Paso 1: crea un nuevo proyecto de Android Studio

Para crear un nuevo proyecto de Android Studio, simplemente haga clic en Archivo > Nuevo > Nuevo proyecto . Asegúrese de elegir su idioma como JAVA . Puede consultar esta publicación sobre Cómo crear un nuevo proyecto de Android Studio .     

Paso 2: antes de pasar a la parte de codificación, agregue estas dos dependencias en su build.gradle

Vaya a la sección Gradle Scripts > build.gradle (Módulo: aplicación) y agregue las siguientes dependencias y haga clic en » Sincronizar ahora » en la ventana emergente anterior. Agregue estas dos dependencias.

•  implementación ‘com.squareup.okhttp3:okhttp:3.10.0’
•  implementación ‘com.pixplicity.sharp:library:1.1.0’

y agregue el repositorio de Google en el archivo build.gradle del proyecto de la aplicación si no está allí de manera predeterminada

script de compilación {

repositorios {

   Google()

   mavenCentral()

}

Todos los componentes de Jetpack están disponibles en el repositorio de Google Maven, inclúyelos en el archivo build.gradle

todos los proyectos {

repositorios {

   Google()

  mavenCentral()

}

}

 Paso 3: Ahora nos moveremos hacia la parte de diseño.

Vaya a la aplicación > res > diseño > actividad_principal.xml . A continuación se muestra el código para el archivo activity_main.xml .

Nota: Los elementos dibujables se agregan en app > res > carpeta dibujable. 

Ejemplo

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="40dp"
        android:layout_marginRight="10dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/gfgimage" />
 
</RelativeLayout>

Paso 4: ahora cree una nueva clase de Java como Utils

En esta clase JAVA, estamos cargando datos de la URL en forma de flujo de bytes. La biblioteca de Sharp convertirá este flujo de bytes y cargará la imagen SVG en nuestro ImageView de destino . Para crear una nueva clase JAVA, vaya a la aplicación > java > el nombre del paquete de aplicaciones >> Haga clic con el botón derecho en él y luego haga clic en él y haga clic en Nuevo > Clase Java . Dale un nombre a tu clase JAVA. A continuación se muestra el código para el archivo Utils.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

Ejemplo

import android.content.Context;
import android.widget.ImageView;
import com.pixplicity.sharp.Sharp;
import java.io.IOException;
import java.io.InputStream;
import okhttp3.Cache;
import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
 
public class Utils {
 
    private static OkHttpClient httpClient;
 
    // this method is used to fetch svg and load it into
    // target imageview.
    public static void fetchSvg(Context context, String url,
                                final ImageView target)
    {
        if (httpClient == null) {
            httpClient = new OkHttpClient.Builder()
                             .cache(new Cache(
                                 context.getCacheDir(),
                                 5 * 1024 * 1014))
                             .build();
        }
 
        // here we are making HTTP call to fetch data from
        // URL.
        Request request
            = new Request.Builder().url(url).build();
        httpClient.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e)
            {
                // we are adding a default image if we gets
                // any error.
                target.setImageResource(
                    R.drawable.gfgimage);
            }
 
            @Override
            public void onResponse(Call call,
                                   Response response)
                throws IOException
            {
                // sharp is a library which will load stream
                // which we generated from url in our target
                // imageview.
                InputStream stream
                    = response.body().byteStream();
                Sharp.loadInputStream(stream).into(target);
                stream.close();
            }
        });
    }
}

Paso 5: ahora usaremos esta clase Utils en nuestro archivo MainActivity.java para cargar imágenes desde la URL

Vaya a la aplicación > java > el nombre del paquete de su aplicación > archivo MainActivity.java. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
 
    ImageView imageView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // initialize your imageview
        imageView = findViewById(R.id.imageview);
         
        // url for .svg image
        String url = " ";
         
        // this method will load svg
          // image in your imageview
        Utils.fetchSvg(this, url, imageView);
    }
}

Paso 6: agregue permiso de Internet en su archivo AndroidManifest

Vaya a la aplicación > manifiesto y agregue permiso de Internet.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gtappdevelopers.frescoimageloading">
 
    <!--Permission for internet-->
    <uses-permission android:name="android.permission.INTERNET" />
     
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.FrescoImageLoading">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Producción: