RecyclerView items not showing properly

Question

In my project, I have used RecyclerView which is shown in layout-preview as I expected but the problem is when I run the application in emulator/device the items of RecyclerView not showing as layout-preview shown.

Here is the XML of recyclerview.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".view.LActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/rv_sample" />
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:src="@drawable/ic_add"
        android:id="@+id/fabAdd"
        app:tint="@color/white"
        app:backgroundTint="@color/colorPrimary"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="5dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_height="wrap_content"/>


</androidx.constraintlayout.widget.ConstraintLayout>

XML of recyclerview items.

<com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        app:cardCornerRadius="10dp"
        android:minHeight="60dp"
        app:cardUseCompatPadding="true"
        app:strokeColor="@color/design_default_color_secondary_variant"
        app:strokeWidth="1dp">

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

            <TextView
                android:id="@+id/tvWord"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="10dp"
                android:drawableStart="@drawable/arrow_right"
                android:fontFamily="monospace"
                android:text="@{item.word}"
                android:textSize="18sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tvType"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{item.type}"
                android:layout_marginEnd="10dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="@id/tvWord" />
        </androidx.constraintlayout.widget.ConstraintLayout>


    </com.google.android.material.card.MaterialCardView>

Adapter class

class MyAdapter(private var itemList: List<Item>, private val listener: ItemClickListener) :
    RecyclerView.Adapter<MyAdapter.VHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): VHolder {
        val inflater = LayoutInflater.from(parent.context)
        val binding = RvSampleBinding.inflate(inflater)
        return VHolder(binding)
    }

    override fun getItemCount(): Int = itemList.size

    override fun onBindViewHolder(holder: VHolder, position: Int) = holder.bind(itemList[position])

    inner class VHolder(private val binding: RvSampleBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(item: Item) {
            binding.item = item
            binding.root.setOnClickListener {
                listener.onItemClick(item)
            }
            binding.executePendingBindings()
        }
    }

Screenshot of layout-preview

And Screenshot of actual output.

I have run the application in several emulators and devices but can't figure out where is the problem.

Answer 1

Here I am going to answer my own question. So that this answer will help other users who will face same issue.

Thanks, @MikeM for his helpful comment. All credit goes to him.

Problem: The problem is in my adapter, I was inflating the item-layout without the parent viewgroup passed.

Cause: If you don't pass the parent in your layout-inflater that will inflate your layout with default layout-params and that wrap your content in both directions(width and height), even though you might have match_parent for the layout_width.

in my case, I have tried like this

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): VHolder {
     val inflater = LayoutInflater.from(parent.context)
     val binding = RvSampleBinding.inflate(inflater) // here i didn't pass viewgroup and boolean parameters.
     return VHolder(binding)
}

Solution: My problem is solved by modifying the onCreateViewHolder like the following.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): VHolder {
     val inflater = LayoutInflater.from(parent.context)
     val binding = RvSampleBinding.inflate(inflater,parent,false) //here i have passed viewgroup and boolean parameter and that's solve my problem
     return VHolder(binding)
}

Answer 2

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        tools:context=".RecyclerViewActivity"
        android:id="@+id/recyclerView_ex1">
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:listitem="@layout/recycler_view_item_ex1" />
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            android:src="@drawable/ic_add"
            android:id="@+id/fabAdd"
            app:tint="@color/cardview_light_background"
            app:backgroundTint="@color/colorPrimary"
            android:layout_marginEnd="5dp"
            android:layout_marginBottom="5dp"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_height="wrap_content"/>
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>

itemview

    <?xml version="1.0" encoding="utf-8"?>
    <com.google.android.material.card.MaterialCardView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tool="http://schemas.android.com/tools"
    android:padding="5dp"
    app:cardCornerRadius="10dp"
    android:minHeight="60dp"
    app:cardUseCompatPadding="true"
    app:strokeColor="@color/colorAccent"
    app:strokeWidth="1dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tool:context=".RecyclerViewActivity">
    
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_gravity="center"
        android:layout_height="wrap_content">
    
        <TextView
            android:id="@+id/tvWord"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="10dp"
            android:drawableStart="@drawable/arrow_right"
            android:fontFamily="monospace"
            android:text="word"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
    
        <TextView
            android:id="@+id/tvType"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="type"
            android:layout_marginEnd="10dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@id/tvWord"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
    
    
    </com.google.android.material.card.MaterialCardView>

Please vote if it works.

Happy coding. Thanks

Answer 3

So basically your parent Layout is constraint layout, so you have to add all constraint related to all the views, One suggestion just used another parent layout instead of Constraint layout just for the check/validation purpose.