The question is published on by Tutorial Guruji team.
Hi I have a RecyclerView which I use to display images in two columns. ArrayList of movies holds 60 String of URL’s for images.So the images are loaded fine into the ImageViews. When I scroll down everything works fine and smooth, then I reach bottom and scroll up, for a while it scrolls ok, but then it scrolls to the very top and I actually see all the photos between trying to load. I looked for this issue, but haven’t found a cause of this scrolling issue. But if I have just 20 items in the list everything works great
Here’s the Adapter’s code:
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {
private ArrayList<Movie> movies;
private Context context;
private int newWidth;
private int newHeight;
public CustomAdapter(ArrayList<Movie> movies, Context context) {
this.movies = movies;
this.context = context;
int screenWidth = context.getResources().getDisplayMetrics().widthPixels;
int orientation = context.getResources().getConfiguration().orientation;
newWidth = screenWidth / (orientation == Configuration.ORIENTATION_LANDSCAPE ? 3 : 2);
newHeight = (int) (((double) newWidth / 185) * 278);
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_movie, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Picasso.with(context)
.load(movies.get(position).url)
.resize(newWidth, newHeight)
.into(holder.imageView);
}
@Override
public int getItemCount() {
return movies.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
final ImageView imageView;
public ViewHolder(View itemView) {
super(itemView);
imageView = (ImageView) itemView.findViewById(R.id.pic);
}
}
}
Thank you
Answer
I’ve found the solution.The problem was that my ImageView didn’t have a fixed size, it got it when picture is being downloaded, that’s why when I scrolled to top – there happened to be all of the previous ImageViews in one screen with 0 height and without picture, but when the picture is being dowloaded the ImageView size extended and looks like the RecyclerView scrolls to the first of the visible ImageView.
So I added this code to my CustomAdapter
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_movie, parent, false);
ImageView viewById = (ImageView) view.findViewById(R.id.poster);
viewById.setMinimumWidth(newWidth);
viewById.setMinimumHeight(newHeight);
return new ViewHolder(view);
}
this is how I change my ImageView size to the one I want before the picture actually being downloaded.
Also added a ProgressBar to look better.
@Override
public void onBindViewHolder(final ViewHolder holder, int position) {
holder.progressBar.setVisibility(View.VISIBLE);
Picasso.with(context)
.load(movies.get(position).postersUrl)
.resize(0, newHeight)
.noFade()
.into(holder.imageView, new Callback() {
@Override
public void onSuccess() {
holder.progressBar.setVisibility(View.INVISIBLE);
}
@Override
public void onError() {
}
});