Gary Johnson Gary Johnson - 4 months ago 22
Android Question

Make RecyclerView items into a grid - Android

What I have

I currently have a

RecyclerView
that loads a bunch of images and the results look like this,

Normal RecyclerView

What I want

However, I want the images to stack in the
RecyclerView
like this,

Grid RecyclerView

Current Code

This is my current
RecyclerView
item layout

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

<ImageView
android:id="@+id/image"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/art"
android:layout_gravity="center"
android:layout_marginTop="16dp"/>
</LinearLayout>


And this is my adpater for the
RecyclerView


public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.MyViewHolder> {

private ArrayList<String> images;
private AdapterCallback mAdapterCallback;

public class MyViewHolder extends RecyclerView.ViewHolder {
public ImageView image;

public MyViewHolder(View view) {
super(view);
image = (ImageView) view.findViewById(R.id.image);
}
}

public ImageAdapter(ArrayList<String> images, Context context) {
this.images = images;
try {
this.mAdapterCallback = ((AdapterCallback) context);
} catch (ClassCastException e) {
throw new ClassCastException("Activity must implement AdapterCallback.");
}
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.image, parent, false);

return new MyViewHolder(itemView);
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
final String imageText = images.get(position);
holder.image.setImageResource(R.drawable.art);
holder.image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
try {
mAdapterCallback.imageSelected(imageText);
} catch (ClassCastException exception) {
}
}
});
}

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

public static interface AdapterCallback {
void imageSelected(String imageText);
}
}


Initializing
RecyclerView


recyclerView = (RecyclerView) imagesDialog.findViewById(R.id.recycler_view);
RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(mLayoutManager);
recyclerView.setItemAnimator(new DefaultItemAnimator());
ImageAdapter mAdapter = new ImageAdapter(images, this);
recyclerView.setAdapter(mAdapter);


How can I achieve the desired effect?

Answer

In this case, on your recyclerView initiation, you should be using GridLayoutManager as the recyclerView's LayoutManager.

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new GridLayoutManager(context, 3));

The '3' in the gridLayoutManager's constructor is the number of items you will have in a row.

Comments