Image not shown in ViewPager2 (when Fragment reopened)

Question

I have implemented a ViewPager2 in a Fragment on my Android app, which displays images loaded with an Uri into an ImageView (slide show gallery). All works fine, however, when I close and reopen the Fragment, the image does not get loaded. Only when I start swiping the ViewPager2, the image gets loaded into the ViewPager2 again. Strangely, this error occurs on older Android versions only (have tested it on Android 6) but not on newer ones (Android 10). I assume it might have something to do with the Fragment (cache or something), because if I implement the same code in an Activity, close and reopen it again, the error does not occur.

Any idea how to resolve this issue, so that the image gets always loaded into the ViewPager2 in a Fragment?

Code which implements the ViewPager2 in the Fragment:

val media= utilities.getMedia(this)
val mediaList = media.toMutableList()
       
val adapter = ViewPagerAdapter(mediaList)
photo_view_pager.adapter = adapter       

ViewPagerAdapter:

class ViewPagerAdapter (
    private val images: List<Media>
        ) : RecyclerView.Adapter<ViewPagerAdapter.ViewPagerViewHolder>() {
    inner class ViewPagerViewHolder(itemView: View): RecyclerView.ViewHolder(itemView)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewPagerViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_picture, parent, false)
        return ViewPagerViewHolder(view)
    }

    override fun getItemCount(): Int {
        return images.size
    }

    override fun onBindViewHolder(holder: ViewPagerViewHolder, position: Int) {
        val curImageUri = images[position].uri
        val thumbnail = holder.itemView.image_preview
        thumbnail.post {
            Glide.with(thumbnail)
                .load(curImageUri)
                .into(thumbnail)
        }
    }
}

Thanks in advance for your help!

Answer 1

Please try the below way of viewpager with image

 <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


class MyFragment : Fragment{

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return super.onCreateView(inflater, container, savedInstanceState)
        initPager()
    } 

    var pagerAdapter: PagerAdapter? = null
    fun initPager() {
        pagerAdapter = PagerAdapter(activity,mlist)

        viewPager.adapter = pagerAdapter
        viewPager.offscreenPageLimit = mlist.size

        viewPager.addOnPageChangeListener(object :
            ViewPager.OnPageChangeListener {
            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {
            }

            override fun onPageSelected(position: Int) {
               
            }

            override fun onPageScrollStateChanged(state: Int) {}
        })
    }
}




class PagerAdapter(manager: FragmentManager) : PagerAdapter(manager) {

    private val mlist: ArrayList<Int>? = null
    private val inflater: LayoutInflater? = null
    private val context: Context? = null
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }

    override fun getCount(): Int {
        return mlist.size()
    }

    override fun restoreState(state: Parcelable?, loader: ClassLoader?) {}
    override fun saveState(): Parcelable? {
        return null
    }

    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view.equals(`object`)
    }

    override fun getPageTitle(position: Int): CharSequence? {
        return mFragmentTitleList[position]
    }

    override fun instantiateItem(view: ViewGroup, position: Int): Any {
        val imageLayout: View = inflater.inflate(R.layout.layout_image, view, false)!!
        thumbnail.post {
            Glide.with(imageLayout.context)
                    .load(mlist.get(position).imageurl)
                    .into(imageView)
        }
        view.addView(imageLayout, 0)
        return imageLayout
    }
}