I am using viewpager2 inside a recyclerview but the images are not outputting. Why?

Question

No matter what I do the pictures are not showing up.

Even if I set the items to match parent, I still have the same problem, I've been dealing with it since the morning, if I find it, I will relax very well :D

This is my adapter for viewpager 2 :

    class ViewPagerAdapter ( private val context : Context , private val album_id : Int , private val photo_list : ArrayList<Photos> ) : RecyclerView.Adapter<ViewPagerAdapter.PagerHolder>()  {
    
        inner class PagerHolder (view : View ) : RecyclerView.ViewHolder ( view ) {
    
            var image_view : ImageView
    
            init {
    
                image_view = view.findViewById ( R.id.pager_imageview )
            }
        }
    
        override fun onCreateViewHolder(parent : ViewGroup, viewType : Int) : PagerHolder {
    
            val v = LayoutInflater.from ( parent.context ).inflate ( R.layout.viewpager_item , parent , false )
    
            return PagerHolder ( v )
        }
    
        override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
    
            val list = photo_list.filter { it.albumId == album_id }
    
            for ( i in list [ position ].url ) {
    
                    Glide.with ( context ).load ( i.toString() ).diskCacheStrategy ( DiskCacheStrategy.ALL ).into ( holder.image_view )
            }
        }
    
        override fun getItemCount ( ) : Int {
    
            return photo_list.size
        }
    }

This is my xml code for my viewpager items :

    <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="20dp">
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <ImageView
                android:id="@+id/pager_imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
    
    </androidx.cardview.widget.CardView>

This is my recyclerview defined codes:

class AlbumRecyclerAdapter (  private val context : Context , private val album_list : ArrayList<Albums> , private val photo_list : ArrayList<Photos> ) : RecyclerView.Adapter<AlbumRecyclerAdapter.Adapterholder>() {

    inner class Adapterholder(view : View) : RecyclerView.ViewHolder(view) {

        var album_title : TextView

        var view_pager2 : ViewPager2

        init {

            album_title = view.findViewById(R.id.album_title)

            view_pager2 = view.findViewById ( R.id.view_pager2 )
        }
    }

    override fun onCreateViewHolder(parent : ViewGroup, viewType : Int) : Adapterholder {

        val v = LayoutInflater.from ( parent.context ).inflate ( R.layout.album_recycler_list , parent , false )

        return Adapterholder(v)
    }

    override fun onBindViewHolder ( holder : AlbumRecyclerAdapter.Adapterholder , position : Int) {

        val pager_adapter = ViewPagerAdapter ( context , album_list [ position ].id ,  photo_list )

        holder.view_pager2.orientation = ViewPager2.ORIENTATION_HORIZONTAL
        holder.view_pager2.adapter = pager_adapter
        holder.view_pager2.clipToPadding = false
        holder.view_pager2.clipChildren = false
        holder.view_pager2.offscreenPageLimit = 3
        holder.view_pager2.getChildAt ( 0 ).overScrollMode = RecyclerView.OVER_SCROLL_NEVER

        holder.album_title.text = album_list [ position ].title
    }

    override fun getItemCount ( ) : Int {

        return album_list.size
    }
}

Finally , this is my xml code for the recyclerview :

<androidx.cardview.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:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_marginTop ="10dp"
    android:layout_marginLeft ="5dp"
    android:layout_marginRight="5dp"
    app:cardCornerRadius="20dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginStart="8dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="80dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/album_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="Album Title"
            app:autoSizeTextType="uniform"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view_pager2" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

Answer 1

I'm Java Developer so I cannot code with Kotlin but I'll show you how to show images on ViewPager.

First, remove for ( i in list [ position ].url ) from onBindViewHolder. And load direct from photo_list.get(position).getImage as below

override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
    
            val list = photo_list.filter { it.albumId == album_id }
    
                    Glide.with ( context ).load ( photo_list.get(position).getImage // your imageModel ).diskCacheStrategy ( DiskCacheStrategy.ALL ).into ( holder.image_view )
        }

Make sure to change JAVA to Kotlin in my code. If you any problem is causing, Let me know

Answer 2

Instead of passing the whole photo_list and then filtering it in ViewPager, pass only the filtered list to it. Because in getItemCount you are returning the size of the whole photo_list but in onBindViewHolder you're accessing the filtered list, this could lead to crashes as filtered list would be smaller than the original one.

In AlbumRecyclerAdapter's onBindViewHolder pass the filtered list to ViewPager adapter.

val pager_adapter = ViewPagerAdapter ( 
    context , 
    album_list [ position ].id ,  
    ArrayList(photo_list.filter { it.albumId == album_list[position].id }
)

In ViewPagerAdapter's onBindViewHolder(), why are you iterating over a url and I assume your url is a String and when you iterate over it, it loops through all the individual characters of the string, that is why you are not seeing any image in the first place.

override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
    val photo = photo_list[position]
    
    Glide.with ( context )
        .load ( photo.url )
        .diskCacheStrategy ( DiskCacheStrategy.ALL )
        .into ( holder.image_view )
}