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)
Show GIFS animations Images (kotlin and java)

Today we will try to display GIF animations. And we will do this thanks to the 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.

How to integration Glide Libary

  1. In Android studio, create a new project by going to  File-> New-> New Project                                       
  2. In  Application name  put “GlideExample” and  Company domain “com.coding180.glideexamplegif”
  3. In your build.gradle file copy the following code and synchronize
    compile ' com.github.bumptech.glide: glide: 3.6.0 '
  4. Add INTERNET  permission to your AndroidManifest.xml  file
</pre>
<pre><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="//schemas.android.com/apk/res/android"
    package="com.androidpourtous.glideexamplegif" >
 
    <uses-permission android:name="android.permission.INTERNET"/>
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest></pre>
<pre>

Show GIFS animations Images (kotlin and java)

5. Create an activity_main.xml file in  layouts  and copy the following code

<RelativeLayout
   xmlns:android="//schemas.android.com/apk/res/android"    
 xmlns:tools="//schemas.android.com/tools" 
android:layout_width="match_parent"     
android:layout_height="match_parent"  
tools:context=".MainActivity">

    <ImageView
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/imageView3" />

    <LinearLayout
        android:layout_below="@id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:weightSum="2"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/imageView1" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/imageView2" />

    </LinearLayout>

</RelativeLayout>

6. Create a MainActivity  class (Java)

Show GIFS animations Images (kotlin and java)

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, image2, image3;

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

        image1 = (ImageView) findViewById(R.id.imageView1);
        image2 = (ImageView) findViewById(R.id.imageView2);
        image3 = (ImageView) findViewById(R.id.imageView3);

        Glide.with(this).load("//media.giphy.com/media/UtiwNokthANEY/giphy.gif").into(image1);
        Glide.with(this).load("//media0.giphy.com/media/fLL4hTppVlf0Y/giphy.gif").into(image2);
        Glide.with(this).load("//media.giphy.com/media/2aOQ9yk8oQYKc/giphy.gif").into(image3);
    }

}

6b. Or Create a MainActivity  class (Kotlin)

Show GIFS animations Images (kotlin and java)

package com.coding180.glidegifimage

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

import com.bumptech.glide.Glide

class MainActivity : ActionBarActivity() {

    private var image1: ImageView? = null
    private var image2: ImageView? = null
    private var image3: ImageView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        image1 = findViewById(R.id.imageView1) as ImageView
        image2 = findViewById(R.id.imageView2) as ImageView
        image3 = findViewById(R.id.imageView3) as ImageView

        Glide.with(this).load("//media.giphy.com/media/UtiwNokthANEY/giphy.gif").into(image1!!)
        Glide.with(this).load("//media0.giphy.com/media/fLL4hTppVlf0Y/giphy.gif").into(image2!!)
        Glide.with(this).load("//media.giphy.com/media/2aOQ9yk8oQYKc/giphy.gif").into(image3!!)
    }

}

Show GIFS animations Images (kotlin and java)

Download source code below.

Click here to Download source code

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

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

Let us improve this post!

Leave a Reply

Your email address will not be published. Required fields are marked *