Recyclerview not scrolling smoothly before scrolling finish

Question

i am having problem with scrolling i mean the scrool fast but it's look like lagging before scrolling finish here i define RecyclerView :

RecyclerView recyclerView=fragment.getRecyclerView();
        LinearLayoutManager layoutManager = new LinearLayoutManager(fragment.getActivity(), LinearLayoutManager.VERTICAL, false);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.addItemDecoration(new DividerItemDecoration(fragment.getActivity(), LinearLayoutManager.VERTICAL));
 ArrayList<InstaPostModel> rowListItems=getInstaPostListSample();
        InstaPostAdapter rcAdapter = new InstaPostAdapter(rowListItems);
        recyclerView.setAdapter(rcAdapter);

and here onBindViewHolder

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    final InstaPostModel p = items.get(position);
    context = holder.itemView.getContext();
    Glide.with(context).load(R.mipmap.mee_small).into(holder.userPhoto);
    Glide.with(context).load(R.drawable.post_image).into(holder.photo_content);
    Glide.with(context).load(R.mipmap.love_gray_icon).into(holder.bt_like);
    Glide.with(context).load(R.mipmap.comment_icon).into(holder.bt_comment);
    Glide.with(context).load(R.mipmap.share_icon).into(holder.bt_share);

    holder.userNameTextView.setText(p.getPosterUserName());
    holder.postContent.setText(p.getText());
    holder.post_date.setReferenceTime(p.getDate().getTime());
}

and here RecyclerView.xml

<?xml version="1.0" encoding="utf-8"?>

    <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/qatar_now_posts_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        tools:context=".uis.fragments.home.QatarNowFragment"
        />

Edit also i have bottom navigation bar in same fragment and it show when scrolling

Edit 2 here is video link showing the lag
i tried all the solution but no one help me. i have added all my code please any help?

what is parent layout of fragment? if it is scrollbar then refer this: https://stackoverflow.com/questions/32525314/scroll-behavior-in-nested-recyclerview-with-horizontal-scroll — Jaydeep Devda, Jul 07 '18 at 13:37
@MohammadSommakia Are the images so much big in terms of size? — Avijit Karmakar, Jul 07 '18 at 14:51
In every item of your recyclerview, you are loading those same images. Then why you are not setting those images in the layout file? — Avijit Karmakar, Jul 07 '18 at 15:55
I'd try the following. (a) Remove those lines that are loading the drawables through Glide, instead of that add the drawables directly as `src` in your ImageViews (b) Remove the `DividerItemDecoration` line from the Adapter intialization. See if that works and maybe you can spot the problem. — 4gus71n, Jul 07 '18 at 16:38
Okay, that's weird, the code looks pretty straight forward. Try to set the visibility of the ImageViews to gone, to check if the problem is coming that way. The adapter initialization is being made in the onCreateView or onViewCreated hook methods from the fragment? Can you add a video of the lagging that you're talking about? Did you try to deploy the App in another emulator/device? — 4gus71n, Jul 08 '18 at 15:21
thanks for helping @4gus71n i have edited the question with link to show the lag in the video — Mohammad Sommakia, Jul 08 '18 at 18:04
i tried it in samsung A5 and Huawei and another phone but same result — Mohammad Sommakia, Jul 10 '18 at 07:30
@MohammadSommakia I'm scrapping the bottom of the barrel here. The only thing that I can think that could be messing with the Recycler is (a) Show us how are you loading the data, are you sending some sort of http request? In which thread is that request running? (b) Try to get rid of the images, download some really small image from google and try with that, if performance improves then there's the issue (c) Did you override any other type of hook method in the adapter implementation? (d) Can you post the InstaPostModel class? — 4gus71n, Jul 10 '18 at 19:36
no i am testing the app by hard code only if it worked then i will implement real data with real request. ok i will show you all the code in the adapter — Mohammad Sommakia, Jul 10 '18 at 20:28
Why you need to load resources using glide when there is `src` tag in `xml`? — Khemraj Sharma, Jul 16 '18 at 10:59
in android profiler i have about 25 mb graphics and about 40 mb java — Mohammad Sommakia, Jul 16 '18 at 11:01
sorry i mean i put the resources in xml not in glide but no changes — Mohammad Sommakia, Jul 16 '18 at 11:04
The chances are you had wrap-content ImageViews. You need to set fixed dimensions or at least one of them. — NDQuattro, Feb 03 '20 at 12:13

Khemraj Sharma · Accepted Answer · 2018-07-16T12:10:40.340

I did not see any problem with your code. Still below points need to be considered.

(1) What could happen that size of image you are getting from API is too large. Check size of API and make it reduce by 200 kb max. (100-150 kb will be enough too).

(2) You should not disable cache as it will improve user experience by storing image in cache and load next time by cache not by URL.

(3) You don't need to use material-ripple library for a simple ripple effect available in Android now. Add this attribute to your ImageView

 android:background="?attr/selectableItemBackground"

(4) Check how many items you are loading at once. You should not load many items at once. See Architecture component paging library

(5) Also check size of your resources like love_gray_icon. I think it should be max 70*70. If you have larger than that, you should resize it. Resize multiple images at once. Also compress images before use, that will decrease image size up-to 80%. After resize, compress images.

(6) Glide is an well maintained library so onViewRecycled is redundant.

Finally bit amendment in your code.

  private void loadImage(ImageView iv, String url) {
        Glide.with(iv.getContext()).load(url).thumbnail(0.5f).into(iv);
    }

    private void loadImage(ImageView iv, int resId) {
        Glide.with(iv.getContext()).load(resId).thumbnail(0.5f).into(iv);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        final InstaPostModel p = items.get(position);

        loadImage(holder.userPhoto, Urls.BASE_URI + p.getUserPhotoUrl());
        loadImage(holder.photo_content, Urls.BASE_URI + p.getPostPhotoUrl());
        loadImage(holder.bt_like, R.mipmap.love_gray_icon);
        loadImage(holder.bt_comment, R.mipmap.comment_icon);
        loadImage(holder.bt_share, R.mipmap.share_icon);

        holder.userNameTextView.setText(p.getPosterUserName());
        holder.postContent.setText(p.getText());
        holder.post_date.setReferenceTime(p.getDate().getTime());
    }

score 4 · Answer 2 · edited Jul 16 '18 at 15:49

4

It might be because of the images are too big

You can resize it using glide like

Glide.with(context)
    .load(imgUrl)
    .diskCacheStrategy(DiskCacheStrategy.ALL)
    .error(placeholder)
    .placeholder(placeholder)
    .dontTransform()
    .override(200,200)
    .into(imageView);

edited Jul 16 '18 at 15:49

Reaz Murshed

23,691
13
78
98

answered Jul 16 '18 at 11:53

Riddhi Shankar

125
5

score 2 · Answer 3 · answered Jul 16 '18 at 11:41

I have several improvement suggestions for you.

You are loading too many images in a list item. Reduce the image loading as much as possible. For example, you might consider setting the default images for the like and share button which are not usually changing in your application. Set them as android:src in the list item layout.
Check if the Instagram images are too big in size. You might get an API to load an average sized image.
Use a selector instead of creating a nested view to have a ripple effect on clicking on your like or share button in the list item. Try to keep the list item layout as simple as possible and try to avoid nested view hierarchy as much as possible.
Remove the onViewRecycled function from your adapter which I found unnecessary.
Initialize the adapter with the Context passed to it in the constructor. You do not have to get it every time inside your onBindViewHodler.
You do not have to initialize the RequestOption each time in your onBindViewHolder function. Just initialize once and use it in each Glide image loader.
Remove the button, comment and share image loaders and supply the images there as the source from the layout as stated before.
Use DiskCacheStrategy.ALL to cache your images so that it does not load each time you open the application or load the RecyclerView.

Hence, the final adapter should look like this.

public class InstaPostAdapter
        extends RecyclerView.Adapter<InstaPostAdapter.ViewHolder> {

    private List<InstaPostModel> items = new ArrayList<>();
    Context context;

    // Initialize the context once, use it everywhere
    public InstaPostAdapter(List<InstaPostModel> items, Context context) {
        this.items = items;
        this.context = context;
    }

    @Override
    public InstaPostAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.insta_post_list_item, parent, false);
        // set the view's size, margins, paddings and layout parameters
        return new ViewHolder(v);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        final InstaPostModel p = items.get(position);
        RequestOptions requestOptions = new RequestOptions()
                .diskCacheStrategy(DiskCacheStrategy.ALL);

        Glide.with(context)
                .load(Urls.BASE_URI + items.get(position).getUserPhotoUrl()).thumbnail(0.5f)
                .apply(requestOptions)
                .into(holder.userPhoto);
        Glide.with(context)
                .load(Urls.BASE_URI + items.get(position).getPostPhotoUrl()).thumbnail(0.5f)
                .apply(requestOptions)
                .into(holder.photo_content);

        // Removed the like, comment, share images which should be set from layout.

        holder.userNameTextView.setText(p.getPosterUserName());
        holder.postContent.setText(p.getText());
        holder.post_date.setReferenceTime(p.getDate().getTime());
    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return items.size();
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    public void add(InstaPostModel post, int i) {
        items.add(post);
        notifyItemInserted(i);
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        // each data item is just a string in this case
        public ImageView userPhoto;
        public TextView userNameTextView;
        public ImageView bt_more;
        public ImageView photo_content;
        public ImageView bt_like;
        public ImageView bt_comment;
        public ImageView bt_share;
        public TextView postContent;
        public RelativeTimeTextView post_date;

        public ViewHolder(View v) {
            super(v);
            userPhoto = v.findViewById(R.id.insta_user_photo);
            userNameTextView = v.findViewById(R.id.insta_user_name);
            bt_more = v.findViewById(R.id.insta_bt_more);
            photo_content = v.findViewById(R.id.insta_photo_content);
            bt_like = v.findViewById(R.id.insta_bt_like);
            bt_comment = v.findViewById(R.id.insta_bt_comment);
            bt_share = v.findViewById(R.id.insta_bt_share);
            postContent = v.findViewById(R.id.insta_post_content);
            post_date = v.findViewById(R.id.insta_post_date);
            setClickListener();
        }

        private void setClickListener() {
            bt_more.setOnClickListener(view -> {
                PopupMenu popupMenu = new PopupMenu(context, view);
                popupMenu.setOnMenuItemClickListener(item -> {
                    Snackbar.make(view, item.getTitle() + " Clicked", Snackbar.LENGTH_SHORT).show();
                    return true;
                });
                popupMenu.inflate(R.menu.menu_feed_popup);
                popupMenu.show();
            });
            bt_like.setOnClickListener(view -> Snackbar.make(view, "Like Clicked", Snackbar.LENGTH_SHORT).show());
            bt_comment.setOnClickListener(view -> Snackbar.make(view, "Comment Clicked", Snackbar.LENGTH_SHORT).show());
            bt_share.setOnClickListener(view -> Snackbar.make(view, "Share Clicked", Snackbar.LENGTH_SHORT).show());
        }
    }
}

I think I have a similar project done for Flickr image search. You might find the project here in Github.

Hope that helps!

i think the problem not from image i think it's memory leak from java and graphics in android profillers it's 25 for java and 25 mb for graphics — Mohammad Sommakia, Jul 16 '18 at 12:14

score 1 · Answer 4 · answered Jul 10 '18 at 08:33

1

I think scrolling issue might be because you are reloading images while binding. You can use cache while loading photos and of course, Pagination.

answered Jul 10 '18 at 08:33

Anu Bhalla

422
4
11

If you are having number of images that you need to load.You can load like 10 at a time, when end of list hits, then load next chunk of images. – Anu Bhalla Jul 10 '18 at 09:07
in my example there is about 5 post just and i saw the memory about 100 mb i don't know how to reduce it – Mohammad Sommakia Jul 10 '18 at 09:21
Try caching once. Check memory in profiler, if problem still persists. – Anu Bhalla Jul 10 '18 at 09:26

score 1 · Answer 5 · answered Jul 16 '18 at 09:53

You can optimize your code as,

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    final InstaPostModel p = items.get(position);
    context = holder.itemView.getContext();
   setImage(holder.userPhoto, p.getUserPhotoUrl());
   setImage(holder.photo_content, p.getPostPhotoUrl());
   setImage(holder.bt_like, R.mipmap.love_gray_icon);

        holder.userNameTextView.setText(p.getPosterUserName());
        holder.postContent.setText(p.getText());
        holder.post_date.setReferenceTime(p.getDate().getTime());

}

private void setImage(ImageView iv, String url)
{
          Glide.with(context)
            .load(Urls.BASE_URI +url).thumbnail(0.5f)
            .apply(new RequestOptions()
                    .diskCacheStrategy(DiskCacheStrategy.NONE)
                    .skipMemoryCache(true).dontAnimate()
            )
            .into(iv);
}
private void setImage(ImageView iv, int resource)
{
          Glide.with(context)
            .load(resource).thumbnail(0.5f)
            .apply(new RequestOptions()
                    .diskCacheStrategy(DiskCacheStrategy.NONE)
                    .skipMemoryCache(true).dontAnimate()
            )
            .into(iv);
}

It will surely decrease load while rendering.Make sure you use variable only when traversing in adapter because list.get(position) calls everytime is costlier for memory.

You have just made method in his code, this will not improve performance, because it is same as his code. It will make difference if you initialize Glide once in Constructor. — Khemraj Sharma, Jul 16 '18 at 10:13
Your code will not reuse Glide instance, it will initialize again & again because you have put that in method. — Khemraj Sharma, Jul 16 '18 at 10:18
so how to initialize glide once in constructure then use it @Khemraj ? — Mohammad Sommakia, Jul 16 '18 at 10:29
@MohammadSommakia This will not make measurable difference. Glide is an well maintained library. But you still have many things to consider, see my answer. — Khemraj Sharma, Jul 16 '18 at 10:58

score 1 · Answer 6 · answered Apr 11 '22 at 09:30

Somebody mentioned that you should use pagingadapter. I was using it but the scroll is not smooth. In my case I have placed the recyclerview inside a scrollable view. That was loading the whole rv despite using the pagingadapter. To make it simple: don't put rv in a scrollable view. If you need some header place it inside the rv with different item types.

score 0 · Answer 7 · answered Jul 07 '18 at 14:28

0

if items in recyclerview is same size ,you can try : recyclerview.setHasFixedSize(true);

answered Jul 07 '18 at 14:28

TieuNhi

29
4

try : set image frome drawable don't need glide. – TieuNhi Jul 07 '18 at 14:37
setHasFixedSize is about the RecyclerView, not the items it contains. If your RecyclerView is going to stay the same height, you should set it to true. – Magnetic Llama Aug 07 '19 at 22:32

Recyclerview not scrolling smoothly before scrolling finish

7 Answers7