Working with Fresco library for Android

Posted By : Bhriguraj Salponia | 01-Jul-2016

Fresco Library Android

Fresco is an amazing and powerful library for displaying images, webPs & animated GIFs in Android. Fresco supports Android 2.3(Gingerbread) and later versions.

For Images Fresco can load it from network, local storage or local resources. To save data and CPU, it has three levels of cache; one in internal storage and two in memory.

Animated GIFs and webPs can be challenging for apps where each frame is a large bitmap, and each animation is a series of frames. Fresco takes care of loading and disposing of frames and managing thier memory.

Trying to simultaneously load multiple GIFs using Fresco in the single window might cause performance issue.

Below is the Demo android app making use of Fresco library to load animated GIFs and static image from the internet.

FrescoDemoApp

Instruction and code for the FrecoDemoApp:

Step 1: Create a new Android project

Step 2: Adding depencencies in the build.gradle file

dependencies {
  // your app's other dependencies
  compile 'com.facebook.fresco:fresco:0.11.0'

// If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:0.11.0'

  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:0.11.0'
}

Step 3: Adding permission in AndroidManifest.xml

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

Step 4: Freso Initialization

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

Below is the App Code:

Layout- activity_main.xml:

<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recyclerView">

</android.support.v7.widget.RecyclerView>
</LinearLayout>

Layout- custom_view.xml:

</LinearLayout>
</LinearLayout>

MainActivity.java:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import com.facebook.drawee.backends.pipeline.Fresco;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //fresco initialization
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);

        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
        recyclerView.setLayoutManager(layoutManager);

        myArrayList();

    }
    public void myArrayList() {

        List mArrayListOne = new ArrayList<>();
        ListmArrayListTwo = new ArrayList<>();


        String uriStringOne = "http://25.media.tumblr.com/tumblr_mdaws9x5671r3tn9do1_500.gif";
        String uriStringTwo = "http://www.dvdtalk.com/reviews/images/reviews/196/full/1435728071_1.jpg";

        for (int i = 0; i < 13; i++) {

            mArrayListOne.add(i, uriStringOne);
            mArrayListTwo.add(i, uriStringTwo);

            RecyclerViewAdapter recyclerViewAdapter = new RecyclerViewAdapter(mArrayListOne, mArrayListTwo);

            recyclerView.setAdapter(recyclerViewAdapter);

        }
    }
}

RecyclerViewAdapter.java:

public class RecyclerViewAdapter extends RecyclerView.Adapter {


    ListmArrayListOne;
    List mArrayListTwo;

    public RecyclerViewAdapter(List mArrayListOne, ListmArrayListTwo) {

        this.mArrayListOne= mArrayListOne;
        this.mArrayListTwo= mArrayListTwo;

    }

    public static class MyViewHolder extends RecyclerView.ViewHolder{

        public SimpleDraweeView simpleDraweeViewOne, simpleDraweeViewTwo;

        public MyViewHolder(View itemView) {
            super(itemView);

            simpleDraweeViewOne= (SimpleDraweeView) itemView.findViewById(R.id.draweeViewOne);
            simpleDraweeViewTwo= (SimpleDraweeView) itemView.findViewById(R.id.draweeViewTwo);

        }
    }
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_view, parent, false);


        MyViewHolder myViewHolder= new MyViewHolder(view);

        return myViewHolder;

    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {

        Uri uriOne= Uri.parse(mArrayListOne.get(position));
        Uri uriTwo= Uri.parse(mArrayListTwo.get(position));

        DraweeController controllerOne = Fresco.newDraweeControllerBuilder()
                .setUri(uriOne)
                .setAutoPlayAnimations(true)
        .build();

        holder.simpleDraweeViewOne.setController(controllerOne);
        holder.simpleDraweeViewTwo.setImageURI(uriTwo);

    }
    @Override
    public int getItemCount() {
        return mArrayListOne.size();
    }
}

Thanks