Fresco

title: Fresco Examples tags: - ImageLoader chapter: Fresco post_status: publish date: 2022-10-11 summary: Fresco is an Android library for managing images and the memory they use. Learn about it via several simple examples in this tutorial. custom_field: chapter: Fresco Tutorial chapter_description: Fresco is an Android library for managing images and the memory they use. Learn how to install it and use it via examples.

Step by step Fresco examples.

Fresco is an Android library for managing images and the memory they use. Learn about it via several simple examples in this tutorial.

What is Fesco?

It is an Android library for managing images and the memory they use.

Fresco is a powerful system for displaying images in Android applications.

Fresco takes care of image loading and display, so you don't have to. It will load images from the network, local storage, or local resources, and display a placeholder until the image has arrived. It has two levels of cache; one in memory and another in internal storage.

In Android 4.x and lower, Fresco puts images in a special region of Android memory. This lets your application run faster - and suffer the dreaded OutOfMemoryError much less often.

Fresco also supports:

streaming of progressive JPEGs
display of animated GIFs and WebPs
extensive customization of image loading and display
and much more!

How to Install Fresco

Declare it in your app/build.gradle file as an implementation statement:

implementation 'com.facebook.fresco:fresco:2.6.0'

Here are Fresco examples:

1. How to load an image with Fresco

Let us look at a full Fresco Example below.

Step 1. Dependencies

We need to add some dependencies in our app/build.gradle file as shown below:

(a). build.gradle.kts

plugins {
    id("com.android.application")
    kotlin("android")
}

android {
    compileSdk = 31
    defaultConfig {
        applicationId = "demos.${rootProject.name.replace('-', '_')}"
        minSdk = 15
        targetSdk = 28
        versionCode = 1
        versionName = "1.0"
    }
}

dependencies {
    implementation(fileTree(mapOf("dir" to "libs", "include" to listOf("*.jar"))))
    implementation("org.jetbrains.kotlin:kotlin-stdlib:1.6.10")
    implementation("androidx.appcompat:appcompat:1.4.0")
    implementation("androidx.constraintlayout:constraintlayout:2.1.2")
    implementation("com.facebook.fresco:fresco:2.6.0")
    implementation("com.facebook.fresco:animated-webp:0.12.0")
    implementation("com.facebook.fresco:webpsupport:0.12.0")
}

Step 2. Our Android Manifest

We will need to look at our AndroidManifest.xml.

(a). AndroidManifest.xml

Our AndroidManifest file.

Here we will add the following permission:

Our INTERNET permission.

Here is the full Android Manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="demos">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="android-demo"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.DarkActionBar">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 3. Design Layouts

In Android we design our UI interfaces using XML. So let's create the following layouts:

(a). activity_main.xml

Our activity_main layout.

Inside your /res/layout/ directory create an xml layout file named activity_main.xml.

Design your XML layout using the following 3 UI widgets and ViewGroups:

LinearLayout
Button
com.facebook.drawee.view.SimpleDraweeView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Load Image" />

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/my_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        fresco:placeholderImage="@drawable/image_placeholder"
        />

</LinearLayout>

Step 4. Write Code

Finally we need to write our code as follows:

(a). MyApplication.kt

Our MyApplication class.

Create a Kotlin file named MyApplication.kt.

We will then add imports from android SDK and other packages. Here are some of the imports we will use in this class:

Application from the android.app package.

Next create a class that derives from Application and add its contents as follows:

We will be overriding the following functions:

onCreate().

Here is the full code:

package replace_with_your_package_name

import android.app.Application
import com.facebook.drawee.backends.pipeline.Fresco

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        Fresco.initialize(this)
    }

}

(b). MainActivity.kt

Our MainActivity class.

Create a Kotlin file named MainActivity.kt.

Next create a class that derives from AppCompatActivity and add its contents as follows:

We will be overriding the following functions:

onCreate(savedInstanceState: Bundle?).

Here is the full code:

package replace_with_your_package_name

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.facebook.drawee.view.SimpleDraweeView


class MainActivity : AppCompatActivity() {

    private val imageUri = "https://images.pexels.com/photos/5716513/pexels-photo-5716513.jpeg"

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

        val button = findViewById<Button>(R.id.button)
        button.setOnClickListener {
            val imageView = findViewById<SimpleDraweeView>(R.id.my_image_view)
            imageView.setImageURI(imageUri)
        }
    }

}

Reference

Download the code below:

No.	Link
1.	Download Full Code
2.	Read more here.
3.	Follow code author here.

2. Fresco Animate GIF

A small example of the Fresco library in use with Kotlin to show an image and animate an animated gif..

A small example of the Fresco library in use with Kotlin to show an image and animate an animated gif.

Step 1. Dependencies

We need to add some dependencies in our app/build.gradle file as shown below:

(a). build.gradle

Our app-level build.gradle.

We Prepare our dependencies as shown below. You may use later versions.

At the top of our app/build.gradle we will apply the following 3 plugins:

Our com.android.application plugin.
Our kotlin-android plugin.
Our kotlin-android-extensions plugin.

We then declare our app dependencies under the dependencies closure. We will need the following 8 dependencies:

Our Kotlin-stdlib-jdk7 library.
Our Appcompat-v7 library.
Our Constraint-layout library.
Our Fresco library.
Our Animated-gif library.
Our Animated-webp library.
Our Webpsupport support library.
Our Support-core-utils support library. Feel free to use newer AndroidX versions.

Here is our full app/build.gradle:

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.frescokotlinexample"
        minSdkVersion 14
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

    implementation 'com.facebook.fresco:fresco:1.13.0'

    implementation 'com.facebook.fresco:animated-gif:1.13.0'

    implementation 'com.facebook.fresco:animated-webp:1.13.0'
    implementation 'com.facebook.fresco:webpsupport:1.13.0'

    implementation 'com.android.support:support-core-utils:28'

    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Step 2. Our Android Manifest

We will need to look at our AndroidManifest.xml.

(a). AndroidManifest.xml

Our AndroidManifest file.

Here we will add the following permission:

Our INTERNET permission.

Here is the full Android Manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          package="com.example.frescokotlinexample"
          tools:ignore="GoogleAppIndexingWarning">

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

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme" android:fullBackupContent="@xml/backup_descriptor">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 3. Design Layouts

In Android we design our UI interfaces using XML. So let's create the following layouts:

(a). activity_main.xml

Our activity_main layout.

Inside your /res/layout/ directory create an xml layout file named activity_main.xml with the following widgets:

ConstraintLayout
com.facebook.drawee.view.SimpleDraweeView

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


    <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/my_image_viewTop"
            android:layout_width="330dp"
            android:layout_height="300dp"
            fresco:placeholderImage="@drawable/placeholderimage"
            android:layout_marginTop="8dp"
            fresco:layout_constraintTop_toTopOf="parent" android:layout_marginBottom="8dp"
            fresco:layout_constraintBottom_toTopOf="@+id/my_image_viewBottom"
            fresco:layout_constraintStart_toStartOf="parent" android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp" fresco:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp" fresco:layout_constraintHorizontal_bias="0.43"
            fresco:layout_constraintVertical_bias="0.455"/>


    <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/my_image_viewBottom"
            android:layout_width="330dp"
            android:layout_height="300dp"
            fresco:placeholderImage="@drawable/placeholderimage"

            fresco:layout_constraintEnd_toEndOf="@+id/my_image_viewTop"
            android:layout_marginEnd="8dp" android:layout_marginRight="8dp"
            fresco:layout_constraintStart_toStartOf="@+id/my_image_viewTop"
            android:layout_marginBottom="40dp"
            fresco:layout_constraintBottom_toBottomOf="parent" fresco:layout_constraintHorizontal_bias="0.0"/>

</android.support.constraint.ConstraintLayout>

Step 4. Write Code

Finally we need to write our code as follows:

(a). MainActivity.kt

Our MainActivity class.

Create a Kotlin file named MainActivity.kt.

We will be overriding the following functions:

onCreate(savedInstanceState: Bundle?).

Here is the full code:

package replace_with_your_package_name

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

import com.facebook.drawee.backends.pipeline.Fresco
import com.facebook.drawee.view.SimpleDraweeView


class MainActivity : AppCompatActivity() {

    private val imageUrl = "https://raw.githubusercontent.com/facebook/fresco/master/docs/static/logo.png"
    private val imageUrlAnim = "https://media.giphy.com/media/YWf50NNii3r4k/giphy.gif"


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

        // Set up Fresco ready for use
        Fresco.initialize(this)

        setContentView(R.layout.activity_main)

        // Show image from a URL
//
//        findViewById<SimpleDraweeView>(R.id.my_image_viewTop)
//            .setImageURI( imageUrl )


        // Load and animate an animated gif

        findViewById<SimpleDraweeView>(R.id.my_image_viewBottom).controller =
            Fresco.newDraweeControllerBuilder()
                .setUri(imageUrlAnim)
                .setAutoPlayAnimations(true)
                .build();

        // Show image resource Drawable

        findViewById<SimpleDraweeView>(R.id.my_image_viewTop)
            .setActualImageResource( R.drawable.kotlinmeme )

    }

}

Reference

Download the code below:

No.	Link
1.	Download Full Code
2.	Read more here.
3.	Follow code author here.