RecyclerView with GridLayoutManager left justifies views

Question

I am trying to add a RecyclerView with GridLayoutManagerto my app. Everything works as expected, only problem is it seems the columns are left justified instead of center justified. Any ideas? Thanks in advance!

Here is an image showing how it looks:

Here is the single item layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="?android:selectableItemBackgroundBorderless"
    android:clickable="true"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iconSpot"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/ic_launcher"
        tools:ignore="MissingPrefix" />

    <TextView
        android:id="@+id/textLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Dummy Text"
        android:textSize="16sp" />

</LinearLayout>

And here is the full activity layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/totalScreen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignTop="@+id/fab"
    android:layout_gravity="bottom|center"
    android:gravity="bottom|center_vertical">

    <TextView
        android:id="@+id/sheetTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#424242"
        android:padding="12dp"
        android:text="Dummy Title"
        android:textSize="18sp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignTop="@+id/sheetTitle"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="-28dp"
        android:visibility="gone"
        app:fabSize="normal" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/gridScreen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/sheetTitle"
        android:background="#424242"
        android:gravity="bottom|center"
        android:layout_gravity = "center"
        android:orientation="vertical"
        android:paddingBottom="24dp" />

</RelativeLayout>

Answer 1

Ok! I figured it out, it ended up being the fact that I needed to make the item layout width set as match_parent instead of wrap_content. So that makes it look like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_margin="10dp"
    android:background="?android:selectableItemBackgroundBorderless"
    android:clickable="true"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iconSpot"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/ic_launcher"
        tools:ignore="MissingPrefix" />

    <TextView
        android:id="@+id/textLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Dummy Text"
        android:textSize="16sp" />

</LinearLayout>

Answer 2

It is hard to fix with just the layout file since the item layout needs to be inflated and attached to the main layout in order to see the result.

So I decided to recreate it. I made modification to your layout file.

item layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/colorPrimary"
android:layout_margin="2dp"
android:clickable="true"
android:orientation="vertical">

<ImageView
    android:id="@+id/iconSpot"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_gravity="center_horizontal"
    android:src="@android:drawable/ic_delete"
    tools:ignore="MissingPrefix" />

<TextView
    android:id="@+id/textLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="Dummy Text"
    android:textSize="16sp" />

</LinearLayout>

Main activity layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/totalScreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignTop="@+id/fab"
android:layout_gravity="bottom|center"
android:gravity="bottom|center_vertical">

<TextView
    android:id="@+id/sheetTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#424242"
    android:padding="12dp"
    android:text="Dummy Title"
    android:textSize="18sp" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/gridScreen"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/sheetTitle"
    android:background="#424242"
    android:gravity="bottom|center"
    android:layout_gravity = "center"
    android:clipToPadding="false"
    android:orientation="vertical"
    android:paddingBottom="24dp" />

</RelativeLayout>

Main Activity class. This class (GridSpacingItemDecoration) used for item margin is copied from here

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private GridLayoutManager layout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    layout = new GridLayoutManager(MainActivity.this, 2);

    RecyclerView rView = (RecyclerView)findViewById(R.id.gridScreen);
    rView.setHasFixedSize(true);
    rView.setLayoutManager(layout);

    int spanCount = 2;
    int spacing = 50;
    boolean includeEdge = true;
    rView.addItemDecoration(new GridSpacingItemDecoration(spanCount, spacing, includeEdge));

    RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(MainActivity.this, getAllItemList());
    rView.setAdapter(rcAdapter);
}

private List<ItemObject> getAllItemList(){

    List<ItemObject> allItems = new ArrayList<ItemObject>();
    allItems.add(new ItemObject(android.R.drawable.ic_delete, "United"));
    allItems.add(new ItemObject(android.R.drawable.ic_delete, "United"));
    allItems.add(new ItemObject(android.R.drawable.ic_delete, "United"));
    allItems.add(new ItemObject(android.R.drawable.ic_delete, "United"));
    allItems.add(new ItemObject(android.R.drawable.ic_delete, "United"));
    allItems.add(new ItemObject(android.R.drawable.ic_delete, "United"));
    return allItems;
}

}

RecycleView Adapter Class

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> {

private List<ItemObject> itemList;
private Context context;

public RecyclerViewAdapter(Context context, List<ItemObject> itemList) {
    this.itemList = itemList;
    this.context = context;
}

@Override
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {

    View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.list, null);
    RecyclerViewHolders rcv = new RecyclerViewHolders(layoutView);
    return rcv;
}

@Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {
    holder.displayedImage.setImageResource(itemList.get(position).getImage());
    holder.textTitle.setText(itemList.get(position).getTitle());

}

@Override
public int getItemCount() {
    return this.itemList.size();
}
}

ViewHolder class

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;


public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{

public ImageView displayedImage;
public TextView textTitle;

public RecyclerViewHolders(View itemView) {
    super(itemView);
    itemView.setOnClickListener(this);
    displayedImage = (ImageView)itemView.findViewById(R.id.iconSpot);
    textTitle = (TextView)itemView.findViewById(R.id.textLabel);
}

@Override
public void onClick(View view) {

}

}

ObjectEntity class

public class ItemObject {

private int image;
private String title;

public ItemObject(int image, String title) {
    this.image = image;
    this.title = title;
}

public int getImage() {
    return image;
}

public void setImage(int image) {
    this.image = image;
}

public String getTitle() {
    return title;
}

public void setTitle(String title) {
    this.title = title;
}
}

The Result is below. Try and see if it works for you.