Our app is an image-heavy, fashion-centered app. Its Home screen contains an Instagram-like feed, which loads URL of images from the server and loads it using Glide.
Since we're using RecyclerView, the item is redrawn every time it leaves the screen. Problem is, this causes jank/lag every time user scrolls down (or up) and the RecyclerView needs to redraw the image (and then call adjustViewBounds) to make the image's width "fill" the screen width while keeping the ratio.
ImageView's XML code.
<ImageView
android:id="@+id/homeFeed_IV_lookImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:imageUrl="@{homeFeedItemViewModel.lookImage}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="@drawable/static_image_1" />
Binding adapter.
@BindingAdapter("imageUrl")
fun setImageUrl(imageView: ImageView, url: String?) {
if (!url.isNullOrEmpty()) {
imageView.displayImage(url)
}
}
Extension function.
fun ImageView.displayImage(url: String = "") {
Glide.with(context)
.load(url)
.apply(RequestOptions().placeholder(R.color.imagePlaceholder)
.diskCacheStrategy(DiskCacheStrategy.ALL))
.into(this)
}
This "lag/jank" gives unpleasant experience. Is there any way we can make the image redraw in the RecyclerView smoother?
