In our previous RecyclerView tutorials we learned about loading image to RecyclerView list. Also normally we used GridView to display data as Grid. Similar to displaying items as a list, displaying items as a Grid is simple using RecyclerView. In this tutorial, we are going to display images and text as Grid using RecyclerView.

Here I have created a Android Studio project with package com.learn2crack.recyclerviewgrid also Activity as MainActivity and layout as activity_main.

You can download the complete project as zip or fork from our Github repository.

The dependencies we require,

compile 'com.android.support:recyclerview-v7:23.2.0'
compile 'com.squareup.picasso:picasso:2.5.2'

The dependencies block in app’s build.gradle will look similar to,

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.2.0'
    compile 'com.android.support:recyclerview-v7:23.2.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
}

We need to add Internet permission in our AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

Our main layout has only one RecyclerView widget in CoordinatorLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true"
    tools:context="com.learn2crack.recyclerviewgrid.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/card_recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>

The next layout is for RecylerView grid item. It has a Textview and ImageView child widgets to display Android version name and Android version image.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/img_android"
        android:adjustViewBounds="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/tv_android"
        android:layout_gravity="center"
        android:textColor="#FFFFFF"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

It is same as our Image loading in RecyclerView tutorial.

package com.learn2crack.recyclerviewgrid;

public class AndroidVersion {

    private String android_version_name;
    private String android_image_url;

    public String getAndroid_version_name() {
        return android_version_name;
    }

    public void setAndroid_version_name(String android_version_name) {
        this.android_version_name = android_version_name;
    }

    public String getAndroid_image_url() {
        return android_image_url;
    }

    public void setAndroid_image_url(String android_image_url) {
        this.android_image_url = android_image_url;
    }
}

It is same as our Image loading in RecyclerView tutorial with a minor modification. The image is re sized to 240 * 120.

Picasso.with(context).load(android.get(i).getAndroid_image_url()).resize(240, 120).into(viewHolder.img_android);

package com.learn2crack.recyclerviewgrid;

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

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> {
    private ArrayList<AndroidVersion> android;
    private Context context;

    public DataAdapter(Context context,ArrayList<AndroidVersion> android) {
        this.android = android;
        this.context = context;
    }

    @Override
    public DataAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.row_layout, viewGroup, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(DataAdapter.ViewHolder viewHolder, int i) {

        viewHolder.tv_android.setText(android.get(i).getAndroid_version_name());
        Picasso.with(context).load(android.get(i).getAndroid_image_url()).resize(240, 120).into(viewHolder.img_android);
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder{
        private TextView tv_android;
        private ImageView img_android;
        public ViewHolder(View view) {
            super(view);

            tv_android = (TextView)view.findViewById(R.id.tv_android);
            img_android = (ImageView) view.findViewById(R.id.img_android);
        }
    }

}

Most of the part remains same. Previously we used LinearLayoutManager to display items in a list. Here we need to use GridLayoutMangaer to display items in Grid. The GridLayoutManager is initialized as,

RecyclerView.LayoutManager layoutManager = new GridLayoutManager(getApplicationContext(),2);

The context and no of items in a row should be passed to the constructor.

package com.learn2crack.recyclerviewgrid;

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

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

        private final String android_version_names[] = {
                "Donut",
                "Eclair",
                "Froyo",
                "Gingerbread",
                "Honeycomb",
                "Ice Cream Sandwich",
                "Jelly Bean",
                "KitKat",
                "Lollipop",
                "Marshmallow"
        };

        private final String android_image_urls[] = {
                "http://api.learn2crack.com/android/images/donut.png",
                "http://api.learn2crack.com/android/images/eclair.png",
                "http://api.learn2crack.com/android/images/froyo.png",
                "http://api.learn2crack.com/android/images/ginger.png",
                "http://api.learn2crack.com/android/images/honey.png",
                "http://api.learn2crack.com/android/images/icecream.png",
                "http://api.learn2crack.com/android/images/jellybean.png",
                "http://api.learn2crack.com/android/images/kitkat.png",
                "http://api.learn2crack.com/android/images/lollipop.png",
                "http://api.learn2crack.com/android/images/marshmallow.png"
        };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }
    private void initViews(){
        RecyclerView recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view);
        recyclerView.setHasFixedSize(true);
        RecyclerView.LayoutManager layoutManager = new GridLayoutManager(getApplicationContext(),2);
        recyclerView.setLayoutManager(layoutManager);

        ArrayList<AndroidVersion> androidVersions = prepareData();
        DataAdapter adapter = new DataAdapter(getApplicationContext(),androidVersions);
        recyclerView.setAdapter(adapter);

    }
    private ArrayList<AndroidVersion> prepareData(){

        ArrayList<AndroidVersion> android_version = new ArrayList<>();
        for(int i=0;i<android_version_names.length;i++){
            AndroidVersion androidVersion = new AndroidVersion();
            androidVersion.setAndroid_version_name(android_version_names[i]);
            androidVersion.setAndroid_image_url(android_image_urls[i]);
            android_version.add(androidVersion);
        }
        return android_version;
    }
}

Image Credits : Google

Enjoy Coding 🙂