I am using Groupie RecyclerView to display some data, and used CardSlider Library with ViewPager2 with Glide to display multiple images. What I've been encountering is that After the images load the first name, the UI works fine displaying the images as is. But when I kept scrolling, some of the images in a particular item/position shrinks. I've been looking and tried some solutions but none of it seems to work.
These are my current code samples:
PostsAdapter
class PostsAdapter(val posts: Posts?) : Item() {
override fun bind(viewHolder: GroupieViewHolder, position: Int) {
posts?.apply {
viewHolder.updateName(profile.fullName)
viewHolder.updateFeedMessage(feed.message)
viewHolder.updateMediaViewPager(posts)
viewHolder.updateReactionCount(feed.reactionCount)
viewHolder.updateReactionIcon(hasReacted)
viewHolder.updateCommentCount(feed.commentCount)
}
}
override fun getLayout(): Int = R.layout.item_post_contents
private fun GroupieViewHolder.updateName(name: String) {
containerView.txtUserName.text = name
}
private fun GroupieViewHolder.updateFeedMessage(message: String?) {
containerView.txtFeedMessage.text = message
}
private fun GroupieViewHolder.updateMediaViewPager(posts: Posts?) {
val images = listOfNotNull(
posts?.mediaOne?.largeUrl,
posts?.mediaTwo?.largeUrl,
posts?.mediaThree?.largeUrl,
posts?.mediaFour?.largeUrl,
posts?.mediaFive?.largeUrl
)
if (images.size <= 1) {
val requestOptions = RequestOptions().diskCacheStrategy(DiskCacheStrategy.RESOURCE)
Glide.with(containerView.imgMediaOne.context)
.load(posts?.mediaOne?.largeUrl).apply(requestOptions)
.dontAnimate()
.override(1000, 800)
.into(containerView.imgMediaOne)
.clearOnDetach()
containerView.mediaViewPager.visibility = View.GONE
containerView.indicator.visibility = View.GONE
} else {
val adapter = MediaViewPagerAdapter(images)
containerView.mediaViewPager.adapter = adapter
containerView.imgMediaOne.visibility = View.GONE
}
}
private fun GroupieViewHolder.updateReactionCount(reactionCount: Int?) {
containerView.txtReactionCount.text =
if (reactionCount == 0) "" else reactionCount.toString()
}
private fun GroupieViewHolder.updateReactionIcon(isReacted: Boolean) {
if (isReacted) {
containerView.imgReaction.setImageResource(R.drawable.ic_heart_clicked)
} else {
containerView.imgReaction.setImageResource(R.drawable.ic_heart_unclicked)
}
}
private fun GroupieViewHolder.updateCommentCount(commentCount: Int?) {
containerView.txtCommentCount.text = if (commentCount == 0) "" else commentCount.toString()
}
}
MediaViewPagerAdapter
class MediaViewPagerAdapter(
private val images: List<String?>
) : CardSliderAdapter<MediaViewPagerAdapter.ViewPagerHolder>() {
inner class ViewPagerHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewPagerHolder {
val view = LayoutInflater
.from(parent.context)
.inflate(R.layout.item_media_content, parent, false)
return ViewPagerHolder(view)
}
override fun getItemCount(): Int = images.size
override fun bindVH(holder: ViewPagerHolder, position: Int) {
val currentImage = images[position]
val requestOptions = RequestOptions().diskCacheStrategy(DiskCacheStrategy.RESOURCE)
Glide
.with(holder.itemView.imgMedia.context)
.load(currentImage).apply(requestOptions)
.dontAnimate()
.override(1500, 1200)
.centerCrop()
.into(holder.itemView.imgMedia)
.clearOnDetach()
}
}
imgMediaOne ImageView
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/imgMediaOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_6"
android:background="@android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toTopOf="@id/postBottomBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/txtFeedMessage" />
imgMedia ImageView
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/imgMedia"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="@android:color/transparent"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />