Material3 carousel not Showing

Question

I'm making a library app and I wanted to add a carousel showing the covers of the books, I'm new to kotlin and android development. the problem is that the recyclerview doesn't show the carousel.

MainPageFragment.kt:

package vistas

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.lifecycle.findViewTreeViewModelStoreOwner
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.PagerSnapHelper
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.carousel.CarouselLayoutManager
import com.google.android.material.carousel.CarouselSnapHelper
import java.clases.R
import java.clases.databinding.FragmentMainPageBinding
import android.util.Log


class MainPageFragment : Fragment(R.layout.fragment_main_page) {

    private lateinit var binding: FragmentMainPageBinding   //Para el bottom menu
    private lateinit var carouselRecyclerView: RecyclerView //Para el carousel
    private val images = listOf(R.drawable.cyberpunkedgerunners, R.drawable.onepiececover, R.drawable.scottpilgrimcover, R.drawable.theofficecover)

    override fun onCreate(savedInstanceState: Bundle?) {
        binding = FragmentMainPageBinding.inflate(layoutInflater)
        super.onCreate(savedInstanceState)


    }


    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentMainPageBinding.inflate(inflater, container, false)
        setupCarouselRecyclerview()
        Log.d("Warden", "funciona")
        return binding.root
    }

    private fun setupCarouselRecyclerview() {

        Log.d("Warden", "Se crea el setup de carousel")
        carouselRecyclerView = binding.carouselRecyclerView

        // Configura el adaptador antes de configurar el LayoutManager y SnapHelper
        carouselRecyclerView.adapter = CarouselAdapter(images)

        // Luego, configura el LayoutManager y el SnapHelper
        val layoutManager = LinearLayoutManager(requireContext(), LinearLayoutManager.HORIZONTAL, false)
        carouselRecyclerView.layoutManager = layoutManager
        CarouselSnapHelper().attachToRecyclerView(carouselRecyclerView)
        Log.d("Warden", "fin de setup")
    }

}

fragment_main_page.xml:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="vistas.MainPageFragment">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/carouselRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:orientation="horizontal"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:visibility="visible"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layoutManager="com.google.android.material.carousel.CarouselLayoutManager"/>
</androidx.constraintlayout.widget.ConstraintLayout>

CarouselAdapter.kt:

package vistas

import android.net.Uri
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.widget.AppCompatImageView
import android.util.Log
import androidx.recyclerview.widget.RecyclerView
import coil.load
import coil.transform.RoundedCornersTransformation
import java.clases.R

class CarouselAdapter(private val images: List<Int>):
    RecyclerView.Adapter<CarouselAdapter.CarouselViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CarouselViewHolder {
        Log.d("Warden", "funciona " + images.size)
        return CarouselViewHolder(
            LayoutInflater.from(parent.context).inflate(
                R.layout.image_item, parent, false
            )
        )
    }

    override fun onBindViewHolder(holder: CarouselViewHolder, position: Int) {
        holder.bind(images[position])
    }

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

    inner class CarouselViewHolder(view: View): RecyclerView.ViewHolder(view) {
        private val carouselImageView: AppCompatImageView  =
            view.findViewById(R.id.carouselImageView)

        fun bind(image: Int) {
            carouselImageView.load(image) {
                transformations(RoundedCornersTransformation(8f))
            }
        }
    }
}

imageItem.xml:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.carousel.MaskableFrameLayout
    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:id="@+id/carousel_item_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:shapeAppearance="?attr/shapeAppearanceCornerExtraLarge">

    <ImageView
        android:id="@+id/carouselImageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop" />

</com.google.android.material.carousel.MaskableFrameLayout>

The app compiles and doesn't show any errors while debbuging but when I enter on main page on the app thecarousel wont show:MainPageFragment

Answer 1

Carousel uses its own layout manager. Replace val layoutManager = LinearLayoutManager(requireContext(), LinearLayoutManager.HORIZONTAL, false) with val layoutManager = CarouselLayoutManager()