Press enter to see results or esc to cancel.

How to Show GIF animations Images in Android: kotlin and java

Share this
()
Show GIFS animations Images (kotlin and java) - Show GIFS animations Images (kotlin and java) - Show GIFS animations Images (kotlin and java) - Show GIFS animations Images (kotlin and java)
Show GIFS animations Images (kotlin and java)

Today, I will teach you how to display GIF animations in Android App using kotlin and Java Language. And we will do this using Glide library

What is Glide?

To make it short, Glide is a library that allows you to display images like Picasso. But I would say that one of its strengths is that you can display gif, unlike Picasso.

Let’s create a new Android Studio project to illustrate the use of Glide to properly display gif Amination on your Android app.

I’m going to divide this tutorial into two phases, first, we gonna load the gif image from the drawable folder of our App, and secondly, we gonna connect our App to the internet and fetch gif image from an online server. We gonna use Giphy, This website has a lot of cool gif images to download for free.

Giphy

  1. In Android Studio, create a new project by going to File-> New-> New Project
  2. In Application name, I used “Android Gif Example” and Company domain “com.coding180.glideexamplegif”. You can use any name.
  3. In your build.gradle (module: App) file, copy the following code and pase it under Dependencies then synchronize your project
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

glide dependency library

How to display gif image from drawable folder

In order to load and display gif image with animation, replace your MainActivity.tk source code with the one below.

package com.robort.androidgifexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import com.bumptech.glide.Glide

private var image1: ImageView? = null
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        image1 = findViewById(R.id.imageView1) as ImageView
        // Use glide library to load and displaY GIf image from drawable folder
        Glide
            .with(this)
            .load(R.drawable.dog) // load file from drawable
            .into(image1!!) // .. into image view xml file
      }
}
android gif animation kotlin
android gif animation kotlin

In summary, the changes I made to this Activity are,

  1. Import the needed classes for our project.
  2. I declared and initialized. an imageView object.
  3. I Used findViewById() method to locate the imageView from the layout resource file (activity_main.xml).
  4. Lastly, I used glide to load and bind the gif image into our imageView.

For java users, Create a MainActivity.java and use the following code.

package com.coding180.glidegifimage;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

public class MainActivity extends ActionBarActivity {

    private ImageView image1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        image1 = (ImageView) findViewById(R.id.imageView1);

        Glide.with(this).load(R.drawable.dog).into(image1);
    }

}

Goto Giphy, download any gif image and upload it to the drawable folder of your project, name it dog.gif.

Next step is to open activity_main.xml file and add an imageView with the id “imageView1”. This is where we will display our gif image. replace it with the code below:

<?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/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

Now, to be sure that everything works as expected, connect your Android emulator or device to test your just created App. You will see the final result below.

How to Display gif Animation image from an online server.

Now, to fetch the gif image from an online server and display it on our app, we need to do two things;

  1. We need to enable our app to connect to the internet.
  2. Alter the code inside MainActivity and activity_main Activity.
  3. Provide the image URL in our Activity file.

To enable our App to connect to the internet, we simply add the following line of code to our manifest file, just above the application tag. The code will add internet permission to our App.

<uses-permission android:name=“android.permission.INTERNET”/>
internet permision - fetch gif online
internet permision – fetch gif online

Furthermore, Altar the code inside activity_main.xml, and add another imageView with id “imageView2”. This will help us preview our gif image that we are going to fetch online. The final XML code will look like this

<?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/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/dog" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="395dp"
        android:layout_height="257dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:srcCompat="@drawable/giphy" />
</androidx.constraintlayout.widget.ConstraintLayout>

6. In MainActivity.tk, I added a new imageview to handle the gif image from an online repository (Giphy). I also added new Glide statements to handle the process of fetching the image data from Giphy.com, I simply replace the load() method parameter with the image URL (http://media.giphy.com/media/2aOQ9yk8oQYKc/giphy.gif) I want to use on my App. The new code looks like this;

package com.robort.androidgifexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import com.bumptech.glide.Glide

private var image1: ImageView? = null
private var image2: ImageView? = null
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // load image from drawable
        image1 = findViewById(R.id.imageView) as ImageView
        // Use glide library to load and display GIf image from drawable folder
        Glide
            .with(this)
            .load(R.drawable.dog) // load file from drawable
            .into(image1!!) // .. into image view xml file

        // load image online
        image2 = findViewById(R.id.imageView2) as ImageView
        // Use glide library to load and displaY GIf image from internet
        Glide
            .with(this)
            .load("http://media.giphy.com/media/2aOQ9yk8oQYKc/giphy.gif"
            ).into(image2!!)
      }


}

For Java users, use the following code for your MainActivity.java. It still follows the same principle as the one in kotlin (MainActivity.tk.)

package com.coding180.glidegifimage;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

public class MainActivity extends ActionBarActivity {

    private ImageView image1;
private ImageView image2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        image1 = (ImageView) findViewById(R.id.imageView);

        image2 = (ImageView) findViewById(R.id.imageView2);

        
// load image from drawable
Glide.with(this).load(R.drawable.dog).into(image1);
// load image online
Glide
.with(this)
.load("http://media.giphy.com/media/2aOQ9yk8oQYKc/giphy.gif")
.into(image2);

    }

}

Now run the app on your Android device and see the final output. Download the source code below. it contains the java and kotlin source code.

Have you tried the above steps, use the comment box below to respond.

Click here to download Android Studio source code.

This article was last updated on: 27/01/2020

How useful was this Lesson?

Click on a star to rate it!

Average rating / 5. Vote count:

Be the first to rate this post.!

As you found this post useful...

Follow us on social media!

We are sorry that this lesson was not useful for you!

Let us improve this lesson!

Tell us how we can improve this lesson?

Share this