How to center horizontally items in recyclerview that uses gridlayoutmanager

Question

I'm preparing a little game in my app and would like to create a recylerview based on gridlayoutmanager and my problem is that I can't center horizontally all elements inside this view.

I have already tried to fix it by some changes in layout file but it didn't help.

Adapter :

    class AdapterCheckYrslf(private val word: String) : 
    RecyclerView.Adapter<AdapterCheckYrslf.CardViewHolder>() {

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

    override fun getItemCount(): Int {
        return word.length
    }

    override fun onBindViewHolder(holder: CardViewHolder, position: Int) {
        holder.currentLetter.text = word[position].toUpperCase().toString()
    }

    class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val currentLetter = itemView.findViewById<TextView>(R.id.item_checkyrslf_letter)

    }
}

GridSpacingItemDecoration, it makes a space beetwen every item :

class GridSpacingItemDecoration(private val space: Int) : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(outRect: Rect, view: View,
                                parent: RecyclerView, state: RecyclerView.State) {
        outRect.left = space
        outRect.right = space
        outRect.bottom = space
        outRect.top = space
    }
}

ColumnQty :

class ColumnQty(context: Context, viewId: Int) {
    private val width: Int
    private val height: Int
    private var remaining: Int = 0
    private val displayMetrics: DisplayMetrics

    init {
        val view = View.inflate(context, viewId, null)
        view.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED)
        width = view.measuredWidth
        height = view.measuredHeight
        displayMetrics = context.resources.displayMetrics
    }

    fun calculateNoOfColumns(): Int {

        var numberOfColumns = displayMetrics.widthPixels / width
        remaining = displayMetrics.widthPixels - numberOfColumns * width
        if (remaining / (2 * numberOfColumns) < 15) {
            numberOfColumns--
            remaining = displayMetrics.widthPixels - numberOfColumns * width
        }
        return numberOfColumns
    }

    fun calculateSpacing(): Int {
        val numberOfColumns = calculateNoOfColumns()
        return remaining / (2 * numberOfColumns)
    }

}

Activity :

val gridManagerFix = ColumnQty(this, R.layout.item_checkrslf_letter)
check_yrslf_word.layoutManager = GridLayoutManager(this, gridManagerFix.calculateNoOfColumns())
check_yrslf_word.addItemDecoration(GridSpacingItemDecoration(gridManagerFix.calculateSpacing()))
check_yrslf_word.setHasFixedSize(true)

Fragment of layout :

<LinearLayout
    android:id="@+id/helper_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center_vertical"
    android:orientation="vertical"
    app:layout_constraintBottom_toTopOf="@+id/check_yrslf_end"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/check_yrslf_hand">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/check_yrslf_word"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:clipChildren="true"
        android:clipToPadding="true"
        android:numColumns="auto_fit"
        android:overScrollMode="never"
        android:scrollbars="none"
        android:scrollingCache="true"
        android:stretchMode="columnWidth"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>

Item layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/item_checkyrslf_cardLetter"
        style="@style/Widget.MaterialComponents.CardView"
        android:layout_width="27dp"
        android:layout_height="27dp"
        android:layout_marginBottom="5dp"
        android:checkable="false"
        app:cardBackgroundColor="@color/grey_3"
        app:cardElevation="0dp"
        app:checkedIconTint="@color/white"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="1dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/item_checkyrslf_letter"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fontFamily="@font/poppins_medium"
                android:gravity="center"
                android:includeFontPadding="false"
                android:text="A"
                android:textAppearance="@style/TextAppearance.MaterialComponents.Headline1"
                android:textColor="@color/textColor"
                android:textSize="16sp" />

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

Pictures :

How does this layout look in Preview

That's what I have

I would like to have

Answer 1

I have solved it by changing GridLayoutManager to LinearLayoutManager.

Answer 2

Try making the RecyclerView android:layout_width="match_parent" and android:gravity="center"

Edit 1:

Try removing all those added params to your RecyclerView: (Something like this)

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/check_yrslf_word"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_gravity="center_horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Now try it, just for debugging purposes.