How to Implement Fresco Image Loading Library in Android with Kotlin?

Fresco is an image loading library that is widely used to load the images within the android applications with the help of image URLs. This library can be used to load the images with the image URL. Along with that, we can add a placeholder image for our image view so that when the image is loading from the URL we can display a placeholder image. We can also display an error image if the URL which we are using to load the image is broken. In this article, we will be building a simple application in which we will be loading an image from an image URL using the Fresco library. 

Note: If you want to implement Calendar View in Android applications using Java. Check out the following article: Fresco Image Loading Library in Android with Java

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add dependency of Fresco Image library in build.gradle file

Navigate to Gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section. 

implementation 'com.facebook.fresco:fresco:2.3.0'

Now sync your project to install the dependency.

Step 3: Adding internet permissions in AndroidManifest.xml

Navigate to app > manifest > AndroidManifest.xml and add internet permissions to it in the manifest tag. 

XML

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

Step 4: 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. Comments are added inside the code to understand the code in more detail.

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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- Textview to display the heading of the app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="20dp"
        android:gravity="center"
        android:padding="5dp"
        android:text="Fresco Image Loading Library"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />

    <!--on below line we are creating a simple
        drawee view for our image view to display-->
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/idIVImage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:layout_margin="10dp" />

</RelativeLayout>

Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.net.Uri
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.facebook.drawee.backends.pipeline.Fresco
import com.facebook.drawee.view.SimpleDraweeView

class MainActivity : AppCompatActivity() {

    // on below line we are creating a string
    // variable for our url of the image.
    var url: String =
        "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // on below line we are initializing our fresco library.
        Fresco.initialize(this)
        setContentView(R.layout.activity_main)

        // on below line we are parsing
        // the url from the string url.
        val imageUri: Uri =
            Uri.parse(url)

        // on below line we are initializing our drawee view with its id.
        val draweeView = findViewById(R.id.idIVImage) as SimpleDraweeView

        // on below line we are setting image
        // uri for our drawee view to load image.
        draweeView.setImageURI(imageUri)

    }
}

Now run your project to see the output of it. 

Output: