Android Kotlin Project to Load Image From URL into ImageView Widget

Welcome folks today in this blog post we will be loading image from url into the imageView widget in kotlin. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new kotlin project and then you will see the below directory structure as shown below

And now we need to include the Internet permission inside the AndroidManifest.xml file as shown below

<uses-permission android:name="android.permission.INTERNET" />

1	<uses-permission android:name="android.permission.INTERNET" />

And now we need to edit the activity_main.xml layout file and copy paste the below code

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- The image will load in this ImageView -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

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_centerInParent="true"/>

</RelativeLayout>

As you can see we have the simple RelativeLayout and inside it we have the imageView widget where we will be loading the image from url.

Now we need to edit the MainActivity.kt file and copy paste the below kotlin code as shown below

MainActivity.kt

package com.example.circularcropimage

import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import java.util.concurrent.Executors

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

        // Declaring and initializing the ImageView
        val imageView = findViewById<ImageView>(R.id.imageView)

        // Declaring executor to parse the URL
        val executor = Executors.newSingleThreadExecutor()

        // Once the executor parses the URL
        // and receives the image, handler will load it
        // in the ImageView
        val handler = Handler(Looper.getMainLooper())

        // Initializing the image
        var image: Bitmap? = null

        // Only for Background process (can take time depending on the Internet speed)
        executor.execute {

            // Image URL
            val imageURL = "https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg"

            // Tries to get the image and post it in the ImageView
            // with the help of Handler
            try {
                val `in` = java.net.URL(imageURL).openStream()
                image = BitmapFactory.decodeStream(`in`)

                // Only for making changes in UI
                handler.post {
                    imageView.setImageBitmap(image)
                }
            }

            // If the URL doesnot point to
            // image or any other kind of failure
            catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }
}

package com.example.circularcropimage

import android.graphics.Bitmap

import android.graphics.BitmapFactory

import android.os.Bundle

import android.os.Handler

import android.os.Looper

import android.widget.ImageView

import androidx.appcompat.app.AppCompatActivity

import java.util.concurrent.Executors

class MainActivity : AppCompatActivity(){

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

// Declaring and initializing the ImageView

val imageView = findViewById<ImageView>(R.id.imageView)

// Declaring executor to parse the URL

val executor = Executors.newSingleThreadExecutor()

// Once the executor parses the URL

// and receives the image, handler will load it

// in the ImageView

val handler = Handler(Looper.getMainLooper())

// Initializing the image

var image: Bitmap? = null

// Only for Background process (can take time depending on the Internet speed)

executor.execute {

// Image URL

val imageURL = "https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg"

// Tries to get the image and post it in the ImageView

// with the help of Handler

try {

val `in` = java.net.URL(imageURL).openStream()

image = BitmapFactory.decodeStream(`in`)

// Only for making changes in UI

handler.post {

imageView.setImageBitmap(image)

}

// If the URL doesnot point to

// image or any other kind of failure

catch (e: Exception) {

e.printStackTrace()

}

As you can see we are providing the external image url that you want to load and display it inside the ImageView widget you need to replace it with your own url and also we are making use of the built in java net package to convert it to Bitmap and load it.