Android RecyclerView with GridView GridLayoutManager example tutorial

How to create RecyclerView layout with CardView and TextView inside each gridview item one by one Material Design look.

GridView is one of the most popular and older view available in android to show text, images and also other views into Grid format. With the combination of RecyclerView, CardView and GridView, android developers can make even more simple and beautiful applications with Material design looks in Pre lollipop and post lollipop devices. So in this tutorial we are going to create a simple android application with the use of RecyclerView, CardView and GridView using RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> . So here is the complete step by step tutorial for Android RecyclerView with GridView GridLayoutManager example tutorial.

android-project-download-code-button

Note: Read below steps very carefully to add CardView library inside your current project.

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:cardview-v7:23.0.+'
compile 'com.android.support:recyclerview-v7:23.0.+'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

Add Import CardView RecyclerView support library in Android Studio

Here your go friends, Now start coding .

Android RecyclerView with GridView GridLayoutManager example tutorial.

Code for MainActivity.java file.

package com.android_examples.recyclerviewgridview_android_examplescom;
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

    Context context;

    RecyclerView.Adapter recyclerView_Adapter;

    RecyclerView.LayoutManager recyclerViewLayoutManager;

    String[] numbers = {
            "one",
            "two",
            "three",
            "four",
            "five",
            "six",
            "seven",
            "eight",
            "nine",
            "ten",
            "eleven",

    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        context = getApplicationContext();

        recyclerView = (RecyclerView) findViewById(R.id.recycler_view1);

        //Change 2 to your choice because here 2 is the number of Grid layout Columns in each row.
        recyclerViewLayoutManager = new GridLayoutManager(context, 2);

        recyclerView.setLayoutManager(recyclerViewLayoutManager);

        recyclerView_Adapter = new RecyclerViewAdapter(context,numbers);

        recyclerView.setAdapter(recyclerView_Adapter);

    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.android_examples.recyclerviewgridview_android_examplescom.MainActivity"
    android:id="@+id/relativelayout">

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

</RelativeLayout>

Code for RecyclerViewAdapter.java file.

package com.android_examples.recyclerviewgridview_android_examplescom;
import android.content.Context;
import android.graphics.Color;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by JUNED on 6/16/2016.
 */
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>{

    String[] values;
    Context context1;

    public RecyclerViewAdapter(Context context2,String[] values2){

        values = values2;

        context1 = context2;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder{

        public TextView textView;

        public ViewHolder(View v){

            super(v);

            textView = (TextView) v.findViewById(R.id.textview1);

        }
    }

    @Override
    public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){

        View view1 = LayoutInflater.from(context1).inflate(R.layout.recycler_view_items,parent,false);

        ViewHolder viewHolder1 = new ViewHolder(view1);

        return viewHolder1;
    }

    @Override
    public void onBindViewHolder(ViewHolder Vholder, int position){

        Vholder.textView.setText(values[position]);

        Vholder.textView.setBackgroundColor(Color.CYAN);

        Vholder.textView.setTextColor(Color.BLUE);

    }

    @Override
    public int getItemCount(){

        return values.length;
    }
}

Code for recycler_view_items.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="7dp"
    card_view:contentPadding="7dp"
    card_view:cardCornerRadius="7dp"
    card_view:cardMaxElevation="7dp"
    >

        <TextView
            android:id="@+id/textview1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="20dp"
            android:textStyle="bold"
            android:padding="10dp"
            android:layout_gravity="center"
            android:gravity="center"
            />
</android.support.v7.widget.CardView>

Screenshot:

Android RecyclerView with GridView GridLayoutManager example tutorial

GridView-RecyclerView-2

Click here to download Android RecyclerView with GridView GridLayoutManager example tutorial project with source code.

7 Comments

  1. Hi, I want to Autofit Feature in This example , how it will possible plase help me

  2. how to call the another activity from here that position one and two

  3. hello can i fix one image view with rowSpan =2 and colSpan =2 and the layout is fixed not scrolled like flipcart deals of the day item

    • Rahul please explain your question more briefly 🙂 .

      • sir i want to make a layout which contain 2*2 matrix of image I am using a recycler view and grid layout manager and in layout i am using single image view

        that single image view should be reflect in 2*2 matrix in the activity and the recycler view should not be scrolled

        One more question can i stop scrolling of recycler view

Leave a Reply

Your email address will not be published. Required fields are marked *