Recycler view Very laggy

Question

I have been using recycler view to display 15 images on my fragment. The images are in the drawable folder. I tried outer views to do this but its much more slower and lags a lot. Hence I used recycler view to solve this issue. The fragment takes about 8seconds just to open and its very laggy. Any way out or alternative? Here's my fragment code:

public class GifFragment extends Fragment {
private View view;
RecyclerView rvMain;

public GifFragment() {
    // Required empty public constructor
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    view=inflater.inflate(R.layout.fragment_gif,container,false);


    rvMain =  view.findViewById(R.id.rvMain);

    int sticker[]={R.drawable.kitty1, R.drawable.kitty2, R.drawable.kitty3, R.drawable.kitty4, R.drawable.kitty5
            , R.drawable.kitty6, R.drawable.kitty7, R.drawable.kitty8, R.drawable.kitty9, R.drawable.kitty10
            , R.drawable.kitty11, R.drawable.kitty12, R.drawable.kitty13, R.drawable.kitty14, R.drawable.kitty15};

    MyAdapter adapter = new MyAdapter(sticker);
    rvMain.setLayoutManager(new GridLayoutManager(getContext(), 3));
    adapter.setHasStableIds(true);
    rvMain.setAdapter(adapter);
    return view;
}

private class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {


    int sticker[];

    public MyAdapter( int sticker[]) {
        this.sticker=sticker;
    }


    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false);
        MyViewHolder viewHolder = new MyViewHolder(v);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        holder.logo.setImageResource(sticker[position]);
        holder.logo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "This is: " , Toast.LENGTH_SHORT).show();
            }
        });

    }

    @Override
    public int getItemCount() {
        return sticker.length;
    }
}
private class MyViewHolder extends RecyclerView.ViewHolder{

    public ImageView logo;
    public TextView name;

    public MyViewHolder(View itemView) {
        super(itemView);
        logo = (ImageView)itemView.findViewById(R.id.ivLogo);

    }
}

}

Answer 1

Use Glide to load images efficiently.

Example In app module gradle add this

repositories {
  mavenCentral()
  google()
}

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.9.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

then usage for glide to load images from drawable

Glide.with(this).load(R.drawable.image_name).into(imageView);

Example

onBindViewHolder do this

Glide.with(this).load(sticker[position]).into(holder.logo);

Answer 2

Consider using an image loader library, ie Glide. This way you can load the images asynchronously.

More information about glide:

https://github.com/bumptech/glide

Answer 3

Use Picasso library to load image or Move the Images to mipmap folder..

Picasso link https://square.github.io/picasso/