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);

    }
}

}

Your Recycler View is fine, but problem is with images, not sure about their size. Also you should create array of strings with image's name, not array of images. — Said, Jun 07 '19 at 06:41
Its depends on image resolutions. You should use glide or picasso for image loading. — Piyush, Jun 07 '19 at 06:42
First low your image resolution and second one use pagination for recyclerview. I am sure it will prevent your recyclerview from lagging. — BlackBlind, Jun 07 '19 at 06:46
@Said why to use array of Strings for images that are resources with IDs. That is totally wrong. — Vladyslav Matviienko, Jun 07 '19 at 07:10
You have to profile your app to see why it works slow. So far the code looks fine, probably the problem is with the image size indeed — Vladyslav Matviienko, Jun 07 '19 at 07:10
@VladyslavMatviienko clearly, it does not looks fine, he loads the images on main thread. — barotia, Jun 07 '19 at 13:58
@barotia he does not **down**load them, they are part of the app (resources), they are fine to load on main thread. Only IO operations (network, files) are required to be done on the background thread — Vladyslav Matviienko, Jun 07 '19 at 17:43

Quick learner · Accepted Answer · 2019-06-07T07:22:14.463

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);

score -1 · Answer 2 · answered Jun 07 '19 at 07:49

-1

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

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

answered Jun 07 '19 at 07:49

Navin Kumar

3,393
3
21
46

Glide has some features and optimizations, which Picasso does not have. Why should he use Picasso instead of Glide? – barotia Jun 07 '19 at 13:56
I agree, but for the above requirment picasso is enough. – Navin Kumar Jun 07 '19 at 14:12

score -2 · Answer 3 · answered Jun 07 '19 at 06:53

-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

answered Jun 07 '19 at 06:53

barotia

428
4
12

Recycler view Very laggy

3 Answers3