In this article, we are going to show an animated gif in our project using a library. There are many methods to show a gif. We can also show a gif using WebView. Here we are going to use this library to show the gif. So here we are going to learn how to implement that feature. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Method 1
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Insert the following dependency to build.gradle file of your project
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
implementation ‘pl.droidsonroids.gif:android-gif-drawable:1.2.22’
Note that Maven central repository should be defined eg. in top-level build.gradle like this:
buildscript {
repositories {
mavenCentral()
}
}
allprojects {
repositories {
mavenCentral()
}
}
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <pl.droidsonroids.gif.GifImageView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:src="@drawable/android" /></LinearLayout> |
Step 4: Working with the MainActivity.java file
There is nothing to do with the MainActivity.java file.
Method 2
Here we are loading the gif using ImageView and Glide Library. Insert the following dependency to build.gradle file of your project.
implementation ‘com.github.bumptech.glide:glide:4.9.0’
Step 1: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout 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="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout> |
Step 2: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. 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;import com.bumptech.glide.Glide;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); // Adding the gif here using glide library Glide.with(this).load(R.drawable.android).into(imageView); }} |
Method 3
Here we are loading the gif using WebView.
before starting declare a permission inside your AndroidManifest.xml
inside manifest and outside application
XML
<uses-permission android:name="android.permission.INTERNET"/> |
Step 1: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. We will create a simple WebView in this file.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <WebView android:id="@+id/webvidew" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout> |
Step 2: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. 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.webkit.WebView;import android.webkit.WebViewClient;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity { WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initialise the layout webView = findViewById(R.id.webvidew); // enable the javascript to load the url webView.getSettings().setJavaScriptEnabled(true); webView.setWebViewClient(new WebViewClient()); // add the url of gif webView.loadUrl("//Add the link of gif here"); }} |
Output:
