How to Load SVG from URL in Android ImageView?
Last Updated :
08 Jun, 2022
It is seen that many Android apps require to use of high-quality images that will not get blur while zooming. So we have to use high-quality images. But if we are using PNG images then they will get blur after zooming because PNG images are made up of pixels and they will reduce their quality after zooming. So SVG images are preferable to use because SVG images are made up of vectors and they don’t reduce their quality even after zooming. Now we will look at How we can load SVG from its URL in our Android App.
Steps for Loading SVG Image from URL
Step 1: Create a new Android Studio Project
For creating a new Android Studio project just click on File > New > New Project. Make sure to choose your language as JAVA. You can refer to this post on How to Create New Android Studio Project.
Step 2: Before moving to the coding part add these two dependencies in your build.gradle
Go to Gradle Scripts > build.gradle (Module: app) section and add the following dependencies and click the “Sync Now” on the above pop-up. Add these two dependencies.
- implementation ‘com.squareup.okhttp3:okhttp:3.10.0’
- implementation ‘com.pixplicity.sharp:library:1.1.0’
and, Add google repository in the build.gradle file of the application project if by default it is not there
buildscript {
repositories {
google()
mavenCentral()
}
All Jetpack components are available in the Google Maven repository, include them in the build.gradle file
allprojects {
repositories {
google()
mavenCentral()
}
}
Step 3: Now we will move toward the design part
Navigate to the app > res > layout > activity_main.xml. Below is the code for the activity_main.xml file.
Note: Drawables are added in app > res > drawable folder.
Example
XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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>
|
Step 4: Now create a new Java class as Utils
In this JAVA class, we are loading data from the URL in the form of the byte stream. The sharp library will convert this byte stream and will load the SVG image in our target ImageView. To create a new JAVA class navigate to the app > java > your apps package name >> Right-click on it and then click on it and click New > Java class. Give a name to your JAVA class. Below is the code for the Utils.java file. Comments are added inside the code to understand the code in more detail.
Example
Java
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;
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();
}
Request request
= new Request.Builder().url(url).build();
httpClient.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e)
{
target.setImageResource(
R.drawable.gfgimage);
}
@Override
public void onResponse(Call call,
Response response)
throws IOException
{
InputStream stream
= response.body().byteStream();
Sharp.loadInputStream(stream).into(target);
stream.close();
}
});
}
}
|
Step 5: Now we will use this Utils class in our MainActivity.java file to load images from the URL
Navigate to the app > java > your apps package name > MainActivity.java file. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
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);
imageView = findViewById(R.id.imageview);
String url = " ";
Utils.fetchSvg(this, url, imageView);
}
}
|
Step 6: Add internet permission in your AndroidManifest file
Navigate to the app > manifest and add internet permission.
XML
<?xml version="1.0" encoding="utf-8"?>
package="com.gtappdevelopers.frescoimageloading">
<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>
|
Output:
Similar Reads
How to Load SVG From URL in Android ImageView with Kotlin?
Many websites use images of different types within their project. They may be SVG, png as well as jpeg image format. It is easy to load png and jpeg images within the android application using Picasso and Glide image loading library. If you want to load an SVG image within your application from the
4 min read
How to Load PDF from URL in Android?
Most of the apps require to include support to display PDF files in their app. So if we have to use multiple PDF files in our app it is practically not possible to add each PDF file inside our app because this approach may lead to an increase in the size of the app and no user would like to download
5 min read
How to Remove an Image from ImageView in Android?
ImageView in Android is a UI element used to display all types of pictures, images, and drawable. So if the width and height of the ImageView are set to wrap content, then the ImageView shall occupy the area on the screen equivalent to the image dimensions. So if we wish to collapse an ImageView as
3 min read
How to Share Image From URL with Intent in Android?
In this article, we will see how can we share images and text with Android Intent. In this activity URL of an image to be shared will be given with extra text and we will open the Dialog where the user chooses using which he wants to share this image as shown on the screen. A sample video is given b
5 min read
How to Load an Image using OpenCV in Android?
OpenCV (Open Source Computer Vision Library) is an open-source computer vision and machine learning software library which is used for image and video processing. In this article, we are going to build an application that shows the demonstration of how we can load images in OpenCV on Android. Mat Cl
4 min read
How to Load Image From URL in Android using Jetpack Compose?
Most of the applications in android use images for displaying some useful information within the applications. Images are considered as easy to convey information to the user. An android application uses more than 100 different types of images. So it is not practically possible to add all the images
4 min read
How to Play Video from URL in Android?
In this article, you will see how to play a video from a URL on Android. For showing the video in our Android application we will use the VideoView widget. The VideoView widget is capable of playing media files, and the formats supported by the VideoView are 3gp and MP4. By using VideoView you can p
3 min read
How to Play Audio from URL in Android?
Many apps require the feature to add the audio feature in their application and there so many audio files that we have to play inside our application. If we will store so many audio files inside our application, then it will increase the size of the app and this may reduce the user base due to the h
4 min read
How to use ImageView as a Button in Android?
ImageView is used when we want to work with images or we want to display them in our application. So, this article will give you a complete idea of using an ImageView as a Button in android studio. So, without wasting further time let's go to the article and read how we can achieve this task. What w
3 min read
How to Use Picasso Image Loader Library in Android?
Picasso is open source and one of the widely used image download libraries in Android. It is created and maintained by Square. It is among the powerful image download and caching library for Android. Picasso simplifies the process of loading images from external URLs and displays them on your applic
7 min read