Load Image From a Remote URL with Kotlin and Glide

In this Kotlin programming tutorial I am going to share with you how to load image from a remote URL in Kotlin using Glide.

Glide is probably the easiest and the most efficient way to load image to an ImageView.  You can use Glide to load a local image and well as an image hosted on a remote server.

Here are some benefits of using glide:

  • It does automatic caching,
  • It optimizes image size,
  • Ever got memory overload when loading an image and then your app crashes? If you use Glide you will never get this kind of problem.

In this example we will load image from a remote URL to an ImageView using Glide.

First we will need to add these dependencies to our project in the app level build.gradle file

compile 'com.github.bumptech.glide:glide:4.2.0'
kapt 'com.github.bumptech.glide:compiler:4.2.0'

XML Layout File

Below is my XML layout file which contains a Linear Layout to which I am going to add an ImageView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/linearLayout"
   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="com.appsdeveloperblog.kotlinexample4.LoadGifFromURLUsingGlide"
   android:orientation="vertical">

</LinearLayout>

Load Image with Glide Example in Kotlin

The below Kotlin code example shows how to create an ImageView and then use Glide to load an image from a remote URL.

package com.appsdeveloperblog.kotlinexample4

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.LinearLayout
import com.bumptech.glide.Glide

class LoadImageFromURLUsingGlide : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_load_image_from_urlusing_glide)
        val linearLayout = findViewById<LinearLayout>(R.id.linearLayout)
        val imageView = ImageView(this)
        Glide.with(this).load("https://s3.amazonaws.com/appsdeveloperblog/Micky.jpg").into(imageView)
        linearLayout.addView(imageView)
    }
}

Load GIF from a Remote URL with Glide

Now, if we want to load a Gif file from a remote URL, the code example will be slightly different. Notice the use of .asGif()

package com.appsdeveloperblog.kotlinexample4

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.LinearLayout
import com.bumptech.glide.Glide

class LoadGifFromURLUsingGlide : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_load_gif_from_urlusing_glide)
        val linearLayout = findViewById<LinearLayout>(R.id.linearLayout)
        val imageView = ImageView(this)
        linearLayout.addView(imageView)
        Glide.with(this)
                .asGif()
                .load("https://s3.amazonaws.com/appsdeveloperblog/micky.gif")
                .into(imageView)

    }
}

If you run this code example, you should get the following view on your mobile device:

Load Image with Kotlin and Glide
Load Image with Kotlin and Glide

I hope that this Kotlin programming tutorial was helpful for you. Checkout my other Kotlin code examples in the Android->Kotlin category.

Also, if you would like to learn more about Kotlin and how to build mobile apps for Android platform with Kotlin check our the list of books and video courses below.

Happy learning! 🙂

Building Mobile Apps for Android with Kotlin – Books

Building Mobile Apps with Kotlin – Video Courses


Leave a Reply

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