0

enter image description here

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" />
Shawn Mike
  • 31
  • 4
  • for test case remove `.clearOnDetach()` and run – IntelliJ Amiya Jun 10 '20 at 08:28
  • still, the result is the same, some of the item is shrinking when scrolling. – Shawn Mike Jun 10 '20 at 08:33
  • `imgMediaOne` section add static height for test case – IntelliJ Amiya Jun 10 '20 at 08:38
  • There is a workaround for this in glide's Github issues. Also overriding your image to a fixed size but your image view is `match_parent` and `wrap_content` and that probably leads to this as I had this issue before. – Arrowsome Jun 10 '20 at 09:14
  • I removed overriding the image fixed size, and used static size on its width and height, I tried width=150dp and height=150dp it worked fine, but the image seems so small to look at, so I tried bigger value, then the issue comes again. – Shawn Mike Jun 10 '20 at 09:46

0 Answers0