using LinearLayoutManager, GridLayoutManager and StaggeredGridLayoutManager with RecyclerView

In the Previous Post, We have created a Recycler View with list of items like listview,

Now we will see how simple to make a gridLayout and |StaggerdGrid with Recycler View by simply modifying the code in the method  to show the items in different ways in the UI .

 mRecyclerView.setLayoutManager(glm);




LinearLayoutManager
=================

mRecyclerView = (AutofitRecyclerView) findViewById(R.id.my_recycler_view);

// use this setting to improve performance if you know that changes
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);

LinearLayoutManager llm = new LinearLayoutManager(this);

// use a linear layout manager to show items like listview
mRecyclerView.setLayoutManager(llm);

// create an Object for Adapter
mAdapter = new CardViewDataAdapter(myDataset);

// set the adapter object to the Recyclerview
mRecyclerView.setAdapter(mAdapter);

ScreenShot:

GridLayoutManager 
================

mRecyclerView = (AutofitRecyclerView) findViewById(R.id.my_recycler_view);

// use this setting to improve performance if you know that changes
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);

// first param is context and second param is spanCount ie.,
GridLayoutManager glm=new GridLayoutManager(this,2);

// use a grid layout manager to show items like gridview
mRecyclerView.setLayoutManager(glm);

// create an Object for Adapter
mAdapter = new CardViewDataAdapter(myDataset);

// set the adapter object to the Recyclerview
mRecyclerView.setAdapter(mAdapter);

Sreenshot:

StaggeredGridLayoutManager 
========================

mRecyclerView = (AutofitRecyclerView) findViewById(R.id.my_recycler_view);

  
// use this setting to improve performance if you know that changes 
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);

  
// use a staggerd grid layout manager to show items based on the content width and height.

// first param is spanCount and second param is orientation ie., Vertical or Horizontal
StaggeredGridLayoutManager sglm=new StaggeredGridLayoutManager(2,1);

// use a linear layout manager
mRecyclerView.setLayoutManager(sglm);

// create an Object for Adapter
mAdapter = new CardViewDataAdapter(myDataset);

// set the adapter object to the Recyclerview
mRecyclerView.setAdapter(mAdapter);

Sreenshot:

RecyclerView with onClick and onLongClick implemtation in android example

In the Previous Post, We have create list of items with RecyclerView using appcompat v7.

Now, we have implemented onclick event functionality in the previous post for each list item using stackoverflow link.

Now, I have update the code to latest Android Api RecyclerView default way of implementing
onClick and onLongClick on the each item.


Step 1: Create an Activity with recyclerview

CardViewActivity.java
package com.pratap.cardviews1;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

public class CardViewActivity extends AppCompatActivity {

 private Toolbar toolbar;

 private RecyclerView mRecyclerView;
 private RecyclerView.Adapter mAdapter;
 private RecyclerView.LayoutManager mLayoutManager;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  toolbar = (Toolbar) findViewById(R.id.toolbar);

  if (toolbar != null) {
   setSupportActionBar(toolbar);
   getSupportActionBar().setTitle("Android Versions");

  }

  final String[] myDataset = { "Alpha", "Beta", "CupCake", "Donut",
    "Eclair", "Froyo", "Gingerbread", "Honeycomb",
    "Ice Cream Sandwitch", "JellyBean", "KitKat", "LollyPop" };

  mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

  // use this setting to improve performance if you know that changes
  // in content do not change the layout size of the RecyclerView
  mRecyclerView.setHasFixedSize(true);

  // use a linear layout manager
  mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

   
  // create an Object for Adapter 
  mAdapter = new CardViewDataAdapter(myDataset);
  
  // set the adapter object to the Recyclerview 
  mRecyclerView.setAdapter(mAdapter);

 }

}

Step 2:  Create an Adapter for the recycler with the class RecyclerView.Adapter


CardViewDataAdapter.java

package com.pratap.cardviews1;


import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnLongClickListener;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

public class CardViewDataAdapter extends
  RecyclerView.Adapter<CardViewDataAdapter.ViewHolder> {
 private static String[] mDataset;

 

 // Provide a suitable constructor (depends on the kind of dataset)
 public CardViewDataAdapter(String[] myDataset) {
  mDataset = myDataset;
  
 }

 // Create new views (invoked by the layout manager)
 @Override
 public CardViewDataAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
   int viewType) {
  // create a new view
  View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(
    R.layout.cardview_row, null);

  // create ViewHolder

  ViewHolder viewHolder = new ViewHolder(itemLayoutView);
  return viewHolder;
 }

 // Replace the contents of a view (invoked by the layout manager)
 @Override
 public void onBindViewHolder(ViewHolder viewHolder, int position) {

  // - get data from your itemsData at this position
  // - replace the contents of the view with that itemsData

  viewHolder.tvVersionName.setText(mDataset[position].toString());
  
  viewHolder.versionName=mDataset[position];

 }

 // Return the size of your dataset (invoked by the layout manager)
 @Override
 public int getItemCount() {
  return mDataset.length;
 }

 // inner class to hold a reference to each item of RecyclerView
 public static class ViewHolder extends RecyclerView.ViewHolder {

  public TextView tvVersionName;
  
  public String versionName;

  public ViewHolder(View itemLayoutView) {
   super(itemLayoutView);

   tvVersionName = (TextView) itemLayoutView
     .findViewById(R.id.tvVersionName);

   itemLayoutView.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {

     Toast.makeText(v.getContext(), "OnClick Version :" + versionName,
       Toast.LENGTH_SHORT).show();

    }
   });

   itemLayoutView.setOnLongClickListener(new OnLongClickListener() {

    @Override
    public boolean onLongClick(View v) {
     
     Toast.makeText(v.getContext(), "OnLongClick Version :" + versionName,
       Toast.LENGTH_SHORT).show();
     return true;

    }
   });

  }

 }

}

Step 3:

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimaryDark"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

</android.support.v7.widget.Toolbar>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#c9c9c9"
    android:orientation="vertical" >

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

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

</LinearLayout>

Step 4:

cardview_row.xml

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    card_view:cardCornerRadius="5dp"
    card_view:cardUseCompatPadding="true" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" >

        <TextView
            android:id="@+id/tvVersionName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:minHeight="55dp"
            android:textColor="@android:color/black"
            android:textSize="24sp" />
    </RelativeLayout>

</android.support.v7.widget.CardView>

Step 5:

values/themes.xml

<resources>

    <style name="AppTheme" parent="AppTheme.Base" />

    <style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <!--  <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item> -->
        
    </style>

</resources>

Step 6:

values-21/themes.xml

<resources>
<style name="AppTheme" parent="AppTheme.Base">
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>

Step 7:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.pratap.cardviews1"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".CardViewActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 8:

Run the Application:

Download the Source Code

ScreenShots

recyclerview onclick

recyclerview onlongclick