Fresco Android Tutorial

In this tutorial you will learn how to use fresco android image library.

Fresco is an image library created by Facebook developers that can be used to display image from internet or local storage. Many popular android apps like facebook, twitter, wikipedia, 9gag, etc uses this library. If you want to create an app that loads lot of image from internet then this library is the best choice. It is great alternative of other android image libraries Picasso and Glide.

It manages memory so efficiently that app works faster and causes less crashes. Using this you can display jpg, png, gif and WebPs. Below I have shown usage of this library using one simple example.

Fresco Android Tutorial

Create an android studio project with package name com.frescoandroid.

Add following dependency in app level build.gradle file under dependencies section then sync the project.

compile 'com.facebook.fresco:fresco:1.5.0'

Note: If you want to display gif or WebPs then you need to include some more dependencies. To learn about them visit this link.

Create java class with name MyApplication that extend Application class. Before using Fresco in our project we have to initialize it, this class is used for initialization purpose. In this way we have to initialize it once and then we can use the library throughout the project.

MyApplication.java

package com.frescoandroid;

import android.app.Application;

import com.facebook.drawee.backends.pipeline.Fresco;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

Put this class entry in AndroidManifest.xml file. For that add android:name=”.MyApplication” attribute inside <application> tag.

As I will load image from internet so add internet access permission in AndroidManifest.xml.

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

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.frescoandroid.MainActivity">\

    <com.facebook.drawee.view.SimpleDraweeView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:id="@+id/image"
        fresco:placeholderImage="@drawable/loading"
        />

</RelativeLayout>

For displaying the image we use <com.facebook.drawee.view.SimpleDraweeView> element in layout file. Also mention custom namespace in top level element by adding xmlns:fresco=”http://schemas.android.com/apk/res-auto” attribute.

Here I have also used placeholder image, that will be displayed until image is downloaded from internet. Make sure to place a placeholder image in drawable folder.

MainActivity.java

package com.frescoandroid;

import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.facebook.drawee.view.SimpleDraweeView;

public class MainActivity extends AppCompatActivity {
    SimpleDraweeView image;
    String url ="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png";

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

        image = (SimpleDraweeView)findViewById(R.id.image);

        //loading image from url
        Uri uri = Uri.parse(url);
        image.setImageURI(uri);
    }
}

To show the image you just have to set the image in SimpleDraweeView ui element using setImageURI() method. Rest of the code is self explanatory. Finally save and run the project.

Screenshot

To learn more functionalities of fresco library visit its official website http://frescolib.org/.

Comment below if you have doubts related to above fresco android tutorial.