RecyclerView item dynamic Height micro stutter - performance

Question

I use an EndlessAdapter with a RecyclerView to fetch and load few hundred items from server.
Glide takes care to load the images for each row.
If user scrolls slowly, everything works fine, but when he flings, there are some micro stuttering in scrolling.
I think that this happens due to different image height for each row, but I don't know how to eliminate it.
My adapter code:
public final class ImagesAdapter extends EndlessAdapter<Image, ImagesAdapter.imageHolder> {
#NonNull
private static Fragment mFragment;
private OnItemClickListener onItemClickListener;
private static int mScreenWidth;
private int layoutStyle;
public ImagesAdapter(#NonNull Fragment fragment, List<Image> images, int layoutStyle) {
super(fragment.getActivity(), images == null ? new ArrayList<Image>() : images);
mFragment = fragment;
setHasStableIds(true);
mScreenWidth = fragment.getResources().getDisplayMetrics().widthPixels;
this.layoutStyle = layoutStyle;
}
public void changeLayout(int layoutStyle){
this.layoutStyle = layoutStyle;
}
public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
this.onItemClickListener = onItemClickListener;
}
#Override
public long getItemId(int position) {
return (!isLoadMore(position)) ? mItems.get(position).getId() : -1;
}
#Override
protected imageHolder onCreateItemHolder(ViewGroup parent, int viewType) {
final imageHolder holder;
switch (layoutStyle) {
case 0:
default:
holder = new imageHolder(mInflater.inflate(R.layout.item_image_enhanced_optim, parent, false));
break;
case 1:
holder = new imageHolder(mInflater.inflate(R.layout.item_image, parent, false));
break;
}
return holder;
}
#Override
protected ProgressViewHolder onCreateItemProgressBarHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);
return new ProgressViewHolder(v);
}
#Override
public void onViewRecycled(RecyclerView.ViewHolder holder) {
super.onViewRecycled(holder);
if (holder instanceof ProgressViewHolder) {
((ProgressViewHolder) holder).progressBar.stop();
Timber.d("Stopped progressbar");
}
}
#Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (holder.getItemViewType() == VIEW_TYPE_ITEM) {
((imageHolder) holder).bind(mItems.get(position));
} else {
((ProgressViewHolder) holder).start();
}
}
public void shuffle(List<Image> images) {
mItems.clear();
this.mItems.addAll(images);
notifyDataSetChanged();
}
final class imageHolder extends RecyclerView.ViewHolder {
#Bind(R.id.item_image_content)
FrameLayout container;
#Bind(R.id.item_image_img)
ImageView mImageView;
#Bind(R.id.item_image_name)
TextView imageName;
#Bind(R.id.item_author_name)
TextView imageAuthorName;
#Bind(R.id.item_author_image)
CircleImageView userImage;
#Bind(R.id.item_image_date)
TextView imageDate;
#Bind(R.id.item_image_comments)
TextView comments;
#Bind(R.id.item_view_on_map)
LinearLayout viewOnMap;
#Bind(R.id.item_view_share)
LinearLayout share;
#Bind(R.id.moreView)
LinearLayout moreView;
#Bind(R.id.progress_image)
LoadingView loadingView;
public imageHolder(View view) {
super(view);
ButterKnife.bind(this, view);
}
public void bind(#NonNull final Image image) {
container.setOnClickListener(new onImageClickListener(getAdapterPosition()));
userImage.setOnClickListener(new onAuthorClickListener(userImage, getAdapterPosition()));
viewOnMap.setOnClickListener(new onViewOnMapClickListener(getAdapterPosition()));
share.setOnClickListener(new onShareClickListener(getAdapterPosition()));
moreView.setOnClickListener(new onMoreClickListener(getAdapterPosition()));
loadingView.setVisibility(View.VISIBLE);
imageName.setText(image.getCombinedTitle());
imageAuthorName.setText(image.getAuthor());
imageDate.setText(image.getReadableDate());
comments.setText(image.getComments());
if(!loadingView.isCircling())
loadingView.start();
Glide.with(mFragment)
.load(image.getImageSrc(mScreenWidth))
.crossFade()
.override(mScreenWidth, (int) ((float) mScreenWidth / image.getRatio()))
.listener(new RequestListener<String, GlideDrawable>() {
#Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
return false;
}
#Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
loadingView.stop();
loadingView.setVisibility(View.GONE);
return false;
}
})
.into(mImageView);
}
}
and the row item
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_container"
android:layout_marginBottom="5dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/white">
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_gray"
android:orientation="vertical">
<ImageView
android:id="#+id/item_image_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
tools:src="#drawable/header"
android:contentDescription="#string/img_content"
android:scaleType="fitXY" />
<FrameLayout
android:id="#+id/item_image_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:foreground="?selectableItemBackgroundBorderless"
android:orientation="vertical" />
</FrameLayout>
<include layout="#layout/item_image_header"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_marginLeft="47dp"
android:visibility="visible"
android:paddingRight="10dp"
android:layout_marginBottom="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:gravity="center_vertical">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="3dp"
android:contentDescription="#string/descr" />
<TextView
android:id="#+id/item_image_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/colorPrimary"
android:textSize="15.0sp"
android:layout_gravity="center_vertical" />
</LinearLayout>
<TextView
android:id="#+id/item_image_comments"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="end"
android:maxLines="4"
tools:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textColor="#android:color/primary_text_light_nodisable"
android:textSize="13.0sp"
android:layout_marginBottom="10dp" />
</LinearLayout>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:background="#drawable/divider_shape"
android:layout_height="0.5dp" />
<include layout="#layout/item_image_bottom_buttons"/>
</LinearLayout>

Answer 1

Glide stop loading Images When you scroll list very fast it is done to improve the speed of Scrolling and avoiding any jitter
If you want to show images to your user I suggest you to use Picasso.
https://github.com/square/picasso
However Picasso is not good in caching the Images or has a limited Caching
or Either way u use placeHolder to represent the Image.
Edit
Heads up u can do it easily with Glide
Glide.with(getActivity())
.load("http://www.mediafile.com/12364f")
.placeholder(R.drawable.circle_placeholder_drawable)//this will show this image till your image is not fully loaded
.error(R.drawable.error_drawable)// if there is a problem in loading image an error image would be loaded instead
.into(holder.mFileTransferCircleImageView);