I have a horizontal recycler(s) inside a vertical recycler. I'm currently implementing a multiple viewholder adapter, but I need a bit clarification if the way I'm doing it is a bad practice.
A picture of what I'm trying to do:
Where should I create the horizontal recycler? In this SO answer:
https://stackoverflow.com/a/44603986/11110509
They create a new HorizontalRecycler in the onBindViewHolder method. I am unsure if this is good or not. What is the best practice to implement multiple horizontal recyclers in this situation?
#Override
public void onBindViewHolder(#NonNull RecyclerView.ViewHolder holder, int position) {
if(holder.getItemViewType() == HORIZONTAL_RECYCLER_ITEM) {
HorizontalFragmentViewHolder recyclerViewHolder = (HorizontalFragmentViewHolder) holder;
//Should I create a new horizontal recycler here everytime? Doesn't seem like a good idea
}else{
SavedPostViewHolder postViewHolder = (SavedPostViewHolder) holder;
}
}
You aren't creating a new recycler view object each time onBindViewHolder is being invoked, that happens very constrained as to how many horizontal recycler-views can be accommodated on the UI. You will, however, have to create an adapter and assign to the recyclerView object in your HorizontalFragmentViewHolder. IMHO, the approach itself is the clean way out.
holder.recyclerView.setAdapter(new HorizontalRecyclerViewAdapter(context,horizontal.list))
holder.recyclerView.setLayoutManager(new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false));
holder.recyclerView.setHasFixedSize(true);
I try to implement a layout that contains a vertical RecyclerView that itself contains multiple horizontal RecyclerViews (imagine a news site, with multiple news sections, where each section contains multiple news stories that can be scrolled horizontally).
The horizontal RecyclerView contains (among other things) an ImageView. I'm looking for the optimal strategy of loading an image from an URL into this ImageView.
Firstly, my code. The Adapter for the outer RecyclerView:
#Override
public ItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.content_preview_list_item, null);
ItemRowHolder mh = new ItemRowHolder(v);
mh.recycler_view_list.setAdapter(new SectionListDataAdapter(mContext, listener, new ArrayList<ContentPreviewButtonItem>()));
mh.recycler_view_list.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
return mh;
}
#Override
public void onBindViewHolder(ItemRowHolder itemRowHolder, int i) {
Log.d("RecyclerViewDataAdapter", "onBindViewHolder");
final String sectionName = dataList.get(i).getTitle();
ArrayList singleSectionItems = dataList.get(i).getItems();
itemRowHolder.itemTitle.setText(sectionName);
((SectionListDataAdapter)itemRowHolder.recycler_view_list.getAdapter()).setItemList(singleSectionItems);
itemRowHolder.recycler_view_list.getAdapter().notifyDataSetChanged();
itemRowHolder.recycler_view_list.setHasFixedSize(true);
}
And for the inner RecyclerView that contains the images:
#Override
public SingleItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
Log.d("SectionListDataAdapter", "onCreateViewHolder");
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.content_preview_item, null);
SingleItemRowHolder mh = new SingleItemRowHolder(v);
return mh;
}
#Override
public void onBindViewHolder(SingleItemRowHolder holder, int i) {
Log.d("SectionListDataAdapter", "onBindViewHolder");
ContentPreviewButtonItem singleItem = itemsList.get(i);
Uri imageUri = Uri.parse(singleItem.getImageUrl());
holder.itemImage.setImageURI(imageUri); //itemImage is a SimpleDraweeView
}
While this code works great on mobile, there's a noticeable lag on tablet when multiple inner RecyclerViews and images are loaded at once. Right now I use Facebook's Fresco library to load the image into a SimpleDraweeView. I also tried Picasso but that yield an OutOfMemoryException when multiple images had to be loaded at once.
I improved the performance by moving the adapter creation of the inner RecyclerViews into the onCreateViewHolder instead of the onBindViewHolder, but the lag is still noticeable.
What's the best strategy or library to load images in this scenario.
Thanks
Glide is a perfect fit for this I believe using which you can resize the image also while the image is loading you can display a thumbnail of the same
I am doing the same in my project and so far the best service I got is from Picasso library. Their resizing capabilities are the best. Might be a little slow on first load but subsequent loading is super fast.
I am trying to use the Glide Image Library to load images in a gridview an using REccycler View. However, I wanted the to have a title TextView beneath each image.
I have set a custom layout for this and tried to load the TextView in the onBindViewHolder. This works but on scrolling, the positions are recycled, and the TextViews Titles are changed, making a mess of it.
#Override
public void onBindViewHolder(MyViewHolder holder, int position) {
Image image = images.get(position);
// // setup Glide request without the into() method
// DrawableRequestBuilder<String> thumbnailRequest = Glide
// .with(mContext)
// .load(image.getMedium());
// pass the request as a a parameter to the thumbnail request
Glide.with(mContext).load(image.getMedium())
.thumbnail(0.3f)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(holder.thumbnail);
titleText.setText(image.getName());
}
How do I fix this dear developers?
I think the problem is that the titleText is not stored in the ViewHolder.
Save it inside your holder object and use:
holder.titleText.setText(image.getName());
This will change the TextView accordingly as the holder changes. Else it will be a mess as the holders are recycled.
something like:
class MyViewHolder extends RecyclerView.ViewHolder{
TextView titleText;
ImageView thumbnail;
.
.
.
#Override
public void onBindViewHolder(MyViewHolder holder, int position) {
Image image = images.get(position);
Glide.with(mContext).load(image.getMedium())
.thumbnail(0.3f)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(holder.thumbnail);
holder.titleText.setText(image.getName());
}
}
I have a RecyclerView adapter that looks like this:
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
private static Context context;
private List<Message> mDataset;
public RecyclerAdapter(Context context, List<Message> myDataset) {
this.context = context;
this.mDataset = myDataset;
}
public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnCreateContextMenuListener, View.OnClickListener {
public TextView title;
public LinearLayout placeholder;
public ViewHolder(View view) {
super(view);
view.setOnCreateContextMenuListener(this);
title = (TextView) view.findViewById(R.id.title);
placeholder = (LinearLayout) view.findViewById(R.id.placeholder);
}
}
#Override
public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.message_layout, parent, false);
ViewHolder vh = new ViewHolder((LinearLayout) view);
return vh;
}
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
Message item = mDataset.get(position);
holder.title.setText(item.getTitle());
int numImages = item.getImages().size();
if (numImages > 0) {
View test = LayoutInflater.from(holder.placeholder.getContext()).inflate(R.layout.images, holder.placeholder, false);
ImageView image = (ImageView) test.findViewById(R.id.image);
Glide.with(context)
.load("http://www.website.com/test.png")
.fitCenter()
.into(image);
holder.placeholder.addView(test);
}
}
#Override
public int getItemCount() {
return mDataset.size();
}
}
However, some of the items in the RecyclerView are showing images when they shouldn't be. How can I stop this from happening?
I do the check if (numImages > 0) { in onBindViewHolder(), but that's still not stopping it from showing images for items that shouldn't have images.
You should set imageView.setImageDrawable (null)
In onBindViewHolder() before setting the image using glide.
Setting image drawable to null fix the issue.
Hope it helps!
The problem is in onBindViewHolder, here:
if (numImages > 0) {
View test = LayoutInflater.from(holder.placeholder.getContext()).inflate(R.layout.images, holder.placeholder, false);
ImageView image = (ImageView) test.findViewById(R.id.image);
Glide.with(context)
.load("http://www.website.com/test.png")
.fitCenter()
.into(image);
holder.placeholder.addView(test);
}
If numImages is equal to 0, you're simply allowing the previously started load into the view you're reusing to continue. When it finishes, it will still load the old image into your view. To prevent this, tell Glide to cancel the previous load by calling clear:
if (numImages > 0) {
View test = LayoutInflater.from(holder.placeholder.getContext()).inflate(R.layout.images, holder.placeholder, false);
ImageView image = (ImageView) test.findViewById(R.id.image);
Glide.with(context)
.load("http://www.website.com/test.png")
.fitCenter()
.into(image);
holder.placeholder.addView(test);
} else {
Glide.clear(image);
}
When you call into(), Glide handles canceling the old load for you. If you're not going to call into(), you must call clear() yourself.
Every call to onBindViewHolder must include either a load() call or a clear() call.
I also had issues with RecyclerView showing wrong images. This happens because RecyclerView is not inflating view for every new list item: instead list items are being recycled.
By recycling views we can ruffly understand cloning views. A cloned view might have an image set from the previous interaction.
This is especially fair if your are using Picasso, Glide, or some other lib for async loading. These libs hold reference to an ImageView, and set an image on that refference when image is loaded.
By the time the image gets loaded, the item view might have gotten cloned, and the image is going to be set to the wrong clone.
To make a long story short, I solved this problem by restricting RecyclerView from cloning my item views:
setIsRecyclable(false)in ViewHolder constructor.
Now RecyclerView is working a bit slower, but at least the images are set right.
Or else cansel loading image in onViewRecycled(ViewHolder holde)
The issue here is that, as you are working with views that are going to be recycled, you'll need to handle all the possible scenarios at the time your binding your view.
For example, if you're adding the ImageView to the LinearLayout on position 0 of the data source, then, if position 4 doesn't met the condition, its view will most likely have the ImageView added when binding position 0.
You can add the content of R.layout.images content inside your
R.layout.message_layout layout's R.id.placeholder and showing/hiding the placeholder depending on the case.
So, your onBindViewHolder method would be something like:
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
Message item = mDataset.get(position);
holder.title.setText(item.getTitle());
int numImages = item.getImages().size();
if (numImages > 0) {
holder.placeholder.setVisivility(View.VISIBLE);
ImageView image = (ImageView)holder.placeholder.findViewById(R.id.image);
Glide.with(context)
.load("http://www.website.com/test.png")
.fitCenter()
.into(image);
}else{
holder.placeholder.setVisibility(View.INVISIBLE);
}
}
Sometimes when using RecyclerView, a View may be re-used and retain the size from a previous position that will be changed for the current position. To handle those cases, you can create a new [ViewTarget and pass in true for waitForLayout]:
#Override
public void onBindViewHolder(VH holder, int position) {
Glide.with(fragment)
.load(urls.get(position))
.into(new DrawableImageViewTarget(holder.imageView,/*waitForLayout=*/ true));
https://bumptech.github.io/glide/doc/targets.html
I also had the same problem and ended with below solution and it working fine for me..
Have your hands on this solution might be work for you too (Put below code in your adapter class)-
If you are using Kotlin -
override fun getItemId(position: Int): Long {
return position.toLong()
}
override fun getItemViewType(position: Int): Int {
return position
}
If you are using JAVA -
#Override
public long getItemId(int position) {
return position;
}
#Override
public int getItemViewType(int position) {
return position;
}
This works for me in onBindViewHolder!
if(!m.getPicture().isEmpty())
{
holder.setIsRecyclable(false);
Picasso.with(holder.profile_pic.getContext()).load(m.getPicture()).placeholder(R.mipmap.ic_launcher_round).into(holder.profile_pic);
Animation fadeOut = new AlphaAnimation(0, 1);
fadeOut.setInterpolator(new AccelerateInterpolator());
fadeOut.setDuration(1000);
holder.profile_pic.startAnimation(fadeOut);
}
else
{
holder.setIsRecyclable(true);
}
I was having same issue I solved by writing holder.setIsRecyclable(false).Worked for me.
#Override
public void onBindViewHolder(#NonNull RecylerViewHolder holder, int position) {
NewsFeed currentFeed = newsFeeds.get(position);
holder.textView.setText(currentFeed.getNewsTitle());
holder.sectionView.setText(currentFeed.getNewsSection());
if(currentFeed.getImageId() == "NOIMG") {
holder.setIsRecyclable(false);
Log.v("ImageLoad","Image not loaded");
} else {
Picasso.get().load(currentFeed.getImageId()).into(holder.imageView);
Log.v("ImageLoad","Image id "+ currentFeed.getImageId());
}
holder.dateView.setText(getModifiedDate(currentFeed.getDate()));
}
override fun getItemId(position: Int): Long {
return position.toLong()
}
override fun getItemViewType(position: Int): Int {
return position
}
This Works for Me
I Had the same issue and i fixed it like this:
GOAL : onViewAttachedToWindow
#Override
public void onViewAttachedToWindow(Holder holder) {
super.onViewAttachedToWindow(holder);
StructAllItems sfi = mArrayList.get(position);
if (!sfi.getPicHayatParking().isEmpty()) {
holder.viewFliperMelk.addSlider(new TextSliderView(mContext.getApplicationContext()).image(T.GET_MELK_IMAGE + '/' + sfi.getPicHayatParking() + ".jpg").setScaleType(BaseSliderView.ScaleType.CenterCrop));
}
if (!sfi.getPicSleepRoom().isEmpty()) {
holder.viewFliperMelk.addSlider(new TextSliderView(mContext.getApplicationContext()).image(T.GET_MELK_IMAGE + '/' + sfi.getPicSleepRoom() + ".jpg").setScaleType(BaseSliderView.ScaleType.CenterCrop));
}
if (!sfi.getPicSalonPazirayi().isEmpty()) {
holder.viewFliperMelk.addSlider(new TextSliderView(mContext.getApplicationContext()).image(T.GET_MELK_IMAGE + '/' + sfi.getPicSalonPazirayi() + ".jpg").setScaleType(BaseSliderView.ScaleType.CenterCrop));
}
if (!sfi.getPicNamayeStruct().isEmpty()) {
holder.viewFliperMelk.addSlider(new TextSliderView(mContext.getApplicationContext()).image(T.GET_MELK_IMAGE + '/' + sfi.getPicNamayeStruct() + ".jpg").setScaleType(BaseSliderView.ScaleType.CenterCrop));
}
}
I had a similar issue when getting pictures from the photo gallery and putting them in a recyclerview with GridLayoutManager(never had the issue with Glide). So in the adapter onBindViewHolder use a HashMap or SparseIntArray to put the current hashcode(this is the common thing that the recycled views have in common) and adapter position inside it. Then call your background task and then once it's done and before you set the image, check to see if the hashcode key - which will always have the current adapter position as the value - still has the same value (adapter position) as when you first called the background task.
(Global variable)
private SparseIntArray hashMap = new SparseIntArray();
onBindViewHolder(ViewHolder holder, int position){
holder.imageView.setImageResource(R.drawable.grey_square);
hashMap.put(holder.hashCode(), position);
yourBackgroundTask(ViewHolder holder, int position);
}
yourBackGroundTask(ViewHolder holder, int holderPosition){
do some stuff in the background.....
*if you want to stop to image from downloading / or in my case
fetching the image from MediaStore then do -
if(hashMap.get(holder.hashCode())!=(holderPos)){
return null;
}
- in the background task, before the call to get the
image
onPostExecute{
if(hashMap.get(holder.hashCode())==(holderPosition)){
holder.imageView.setImageBitmap(result);
}
}
}
So i am just providing an extension to this answer since there is not much space to leave it as comment.
After trying out like mentioned in one of above solutions i found out that, the real issue can still be addressed even if you are using a static resource(is not being downloaded and is available locally)
So basically on onBindViewHolder event i just converted the resource to drawable and added it like below :
imageView.setImageDrawable(ContextCompat.getDrawable(context,R.drawable.album_art_unknown));
this way you wont have an empty space on the view while glide/async downloader is loading the actual image from network.
plus looking at that being reloaded every time i also added below code while calling the recycler adapter class;
recyclerView.setItemViewCacheSize(10);
recyclerView.setDrawingCacheEnabled(true);
so by using above way you wont need to set setIsRecyclable(false) which is degrading if you have larger datasets.
By doing this i you will have a flicker free loading of recyclerview of course except for the initial loads.
I would like to say that if you send the ImageView and any load-async command (for instance loading from S3), the recycler view does get confused.
I did set the bitmap null in the onViewRecycled and tested with attach and detach views etc. the issue never went away.
The issue is that if a holderView gets used for image-1, image-10 and stops at the scroll with image-19, what the user sees is image-1, then image-10 and then image-19.
One method that worked for me is to keep a hash_map that helps know what is the latest image that needs to be displayed on that ImageView.
Remember, the holder is recycled, so the hash for that view is persistent.
1- Create this map for storing what image should be displayed,
public static HashMap<Integer, String> VIEW_SYNCHER = new HashMap<Integer, String>();
2- In your Adapter, onBindViewHolder,
String thumbnailCacheKey = "img-url";
GLOBALS.VIEW_SYNCHER.put(holder.thumbnailImage.hashCode(), thumbnailCacheKey);
3- Then you have some async call to make the network call and load the image in the view right ?
In that code after loading the image from S3, you test to make sure what goes into the View,
// The ImageView in the network data loader, get its hash.
int viewCode = iim.imView[0].hashCode();
if (GLOBALS.VIEW_SYNCHER.containsKey(viewCode))
if (GLOBALS.VIEW_SYNCHER.get(viewCode).equals(bitmapKey))
iim.imView[0].setImageBitmap(GLOBALS.BITMAP_CACHE.get(bitmapKey).bitmapData);
So essentially, you make sure what is the last image key that should go into a view, then when you download the image you check to make sure that's the last image URL that goes in that view.
This solution worked for me.
I was creating an app for loading images from internet in cards. I am using Recyclerview for listing purpose. For downloading images, I have tried Picasso, universal-image-downloader and other custom methods but everywhere I have this problem:
Whenever I scroll down and up the images in imageview are getting reloaded. I have even kept a condition to check if the imageview contains an image but that also doesn't seem to work or my code may be faulty. But I am not able to find a solution to this problem. Below I have attached the 'onBindViewHolder' function of my code which I think is the problematic part. Here images is a string arraylist containing image urls.
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.default_card, parent, false);
ViewHolder viewHolder;
viewHolder = new ViewHolder(view);
return viewHolder;
}
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
String url = images.get(position);
if (holder.imgView.getDrawable() != null) {
//Do Nothing
} else {
ImageLoader.getInstance().displayImage(url, holder.imgView);
}
}
You can use .fit() with Picasso. Hope that solves your problem
Picasso.with(persons.get(i).context)
.load(persons.get(i).photoId)
.placeholder(R.drawable.placeholder)
.fit()
.into(personPhoto);
At first, there is a bug in your code - you have to remove the condition from onBindViewHolder. All ImageView instances has to be updated each time they are about to display.
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
String url = images.get(position);
ImageLoader.getInstance().displayImage(url, holder.imgView);
}
The reloading part:
The problem is, that you are probably not using any cache (in-memory, or disk based). I would not elabarote on this a lot, caching of images in collection views is a really common problem and I'm sure a quick StackOverflow search will give you a lot of results.
Just in particular - Universal image does not have caching enabled by default You can turn it on this way.
DisplayImageOptions options = new DisplayImageOptions.Builder()
...
.cacheInMemory(true)
.cacheOnDisk(true)
...
.build();
ImageLoader.getInstance().displayImage(imageUrl, imageView, options); // Incoming options will be used
Or you can set it globally for your application, just check the docs.
You can use this to solve your issue.
mRecyclerView.getRecycledViewPool().setMaxRecycledViews(0, 0);
If you don't want to use Cache, you can use setItemViewCacheSize(size) and mention the size where you don't want to reload. That's it. Recyclerview version 24.0.0