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>

you can show your layout file also – Inducesmile Mar 04 '16 at 02:08 — Inducesmile, Mar 04 '16 at 02:08
Ok, just updated the OP. Hopefully that helps – Nick Mowen Mar 04 '16 at 02:15 — Nick Mowen, Mar 04 '16 at 02:15

score 4 · Accepted Answer · answered Mar 05 '16 at 03:03

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>

score 1 · Answer 2 · edited May 23 '17 at 12:00

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.

Wow! I firstly want to say thanks for working on this! Hopefully we can get it figured out, so there is some spacing there, but unfortunately the items are still left justified (albeit with left margin) but it still doesn't work like your screenshot. — Nick Mowen, Mar 04 '16 at 04:12

RecyclerView with GridLayoutManager left justifies views

2 Answers2