Using CardView and RecyclerView in Android

In this example , we will be developing a Recycler View app.Recycler View is used to display long lists. It is different than other adapters because it reuses Views that were created earlier. This increases app efficiency as a few views are able to display the entire list to the user and reduces system overhead to generate views for all the list items in the list. We will also use a CardView which comes from Material Design of Android. A CardView gives the list item a distinctive look and enhances the overall appearance of the app.

Steps to develop this can be summarized below -

• Make a new project with Empty Activity.
• Name the Launcher Activity as LauncherActivity.class
• Add RecyclerView and CardView Dependencies in gradle - App module
• Create a Button in Launcher Activity that launches the CardViewActivity.class containing recyclerview list
• Create a model class known as DataObject - its objects will be displayed on the list.
• Prepare a layout for RecyclerView byusing RecyclerView Widget.
• Inside the CardViewActivity.class create references for RecyclerView,LayoutManager(Inner Class) and DataObject.
• Define RecylerView object and set an object of RecyclerView.Adapter as an adapter on RecyclerView object using setAdapter()
• Call methods addItem() and deleteItem() on RecyclerViewAdapter object
• Inside onResume method - call OnItemClick() method to detect clicks on Cards.
• You will also have to prepare a method - getDataSet() to get objects of model class.
• Prepare another class named as RecyclerViewActivity which extends RecyclerView.Adapter
• Prepare a layout card_view to display items inside the CardView
• RecyclerViewActivity class is responsible for calling all the relevant methods while RecyclerView is being used.

Used Concepts & Used Version:

• compileSdkVersion 25
• buildToolsVersion "25.0.0"
• 'com.android.support:cardview-v7:22.0.0'
• 'com.android.support:recyclerview-v7:22.0.0'
• 'com.android.support:design:23.0.1'

Now, let us begin the development...

1.LauncherActivity.class (Launcher Activity)

This Activity has only one button which when clicked will take the user to CardViewActivity.class

package com.sisoft.cardview; import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; public class LauncherActivity extends AppCompatActivity { /*launcher activity*/ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); Button b1 = (Button)findViewById(R.id.b123); b1.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v){ Intent i1 = new Intent(getApplicationContext(),CardViewActivity.class); startActivity(i1); } }); } }

2. Layout for LauncherActivity.class

<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="com.sisoft.cardview.LauncherActivity"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="cards" android:text="cards" android:id="@+id/b123"/> </RelativeLayout>

3.CardViewActivity.class

package com.sisoft.cardview; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.util.Log; import android.view.View; import android.widget.Toast; import java.util.ArrayList; public class CardViewActivity extends AppCompatActivity { private RecyclerView mRecyclerView; //View Group class private RecyclerView.Adapter<RecyclerViewActivity.DataObjectHolder> mAdapter;//provide a // binding from an app-specific data set // to views that are displayed within a RecyclerView. private RecyclerView.LayoutManager mLayoutManager;//responsible for measuring and positioning item views within a // RecyclerView as well as determining the policy for when // to recycle item views that are no longer visible to the user. private static String LOG_TAG = "CardViewActivity"; int index; DataObject obj;//reference of a class which provides the data @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_card_view); mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view); //making an object mRecyclerView.setHasFixedSize(true); //changes in adapter content cannot change the size of the RecyclerView itself mLayoutManager = new LinearLayoutManager(this);//wiring the LinearLayout mRecyclerView.setLayoutManager(mLayoutManager); //providing a layout to recycler view mAdapter = new RecyclerViewActivity(getDataSet());//preparing data to show in recycer view mRecyclerView.setAdapter(mAdapter);//setting the adapter // Code to Add an item with default animation ((RecyclerViewActivity) mAdapter).addItem(obj, index);//calling additem from adapter class // Code to remove an item with default animation ((RecyclerViewActivity) mAdapter).deleteItem(index); } @Override protected void onResume() { super.onResume(); ((RecyclerViewActivity) mAdapter).setOnItemClickListener(new RecyclerViewActivity .MyClickListener() { @Override public void onItemClick(int position, View v) { Toast.makeText(CardViewActivity.this,"clicked"+ position,Toast.LENGTH_SHORT).show(); //change1- the views are reused thats why background color is repeated.. v.setBackgroundColor(R.color.cardview_dark_background); Log.i(LOG_TAG, " Clicked on Item " + position); } }); } private ArrayList<DataObject> getDataSet() { ArrayList<DataObject> results = new ArrayList<>(); for (int index = 0; index < 20; index++) { DataObject obj = new DataObject("Some Primary Text " + index, "Secondary " + index); results.add(index, obj); } return results; } } </h2>

activity_card_view.xml

<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" tools:context=".CardViewActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical"/> </RelativeLayout>

RecyclerViewActivity.class

package com.sisoft.cardview; import android.support.v7.widget.RecyclerView; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.ArrayList; public class RecyclerViewActivity extends RecyclerView.Adapter<RecyclerViewActivity.DataObjectHolder> { private static final String TAG = "RecyclerViewActivity"; private static String LOG_TAG = "MyRecyclerViewAdapter"; private ArrayList<DataObject> mDataset; private static MyClickListener myClickListener; public static class DataObjectHolder extends RecyclerView.ViewHolder implements View .OnClickListener { TextView label; TextView dateTime; public DataObjectHolder(View itemView) { super(itemView); label = (TextView) itemView.findViewById(R.id.textView); dateTime = (TextView) itemView.findViewById(R.id.textView2); Log.i(LOG_TAG, "Adding Listener"); itemView.setOnClickListener(this); } @Override public void onClick(View v) { myClickListener.onItemClick(getAdapterPosition(), v); } } public void setOnItemClickListener(MyClickListener myClickListener) { this.myClickListener = myClickListener; } public RecyclerViewActivity() { } public RecyclerViewActivity(ArrayList<DataObject> myDataset) { mDataset = myDataset; }//this receives the data and provides it to the adapter @Override public DataObjectHolder onCreateViewHolder(ViewGroup parent, int viewType) { /* Called when RecyclerView needs a new RecyclerView.ViewHolder of the given type to represent an item. */ Log.d(TAG, "onCreateViewHolder:"); View view = LayoutInflater.from(parent.getContext()).inflate (R.layout.card_view, parent, false); DataObjectHolder dataObjectHolder = new DataObjectHolder(view); return dataObjectHolder; } @Override public void onBindViewHolder(DataObjectHolder holder, int position) { /* Called by RecyclerView to display the data at the specified position. This method should update the contents of the itemView to reflect the item at the given position. */ holder.label.setText(mDataset.get(position).getmText1()); holder.dateTime.setText(mDataset.get(position).getmText2()); Log.d(TAG, "onBindViewHolder: "); } public void addItem(DataObject dataObj, int index) { mDataset.add(index, dataObj); //notifyItemInserted(index); /* Notify any registered observers that the item reflected at position has been newly inserted. */ } public void deleteItem(int index) { mDataset.remove(index); // notifyItemRemoved(index); /* Notify any registered observers that the item reflected at position has been removed. */ } @Override public int getItemCount() { return mDataset.size(); } public interface MyClickListener { public void onItemClick(int position, View v); } }

card_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_gravity="center" android:layout_width="fill_parent" android:layout_height="100dp" android:layout_margin="5dp" card_view:cardCornerRadius="2dp" card_view:contentPadding="10dp"> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="bold" android:layout_alignParentTop="true"/> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_below="@+id/textView"/> </RelativeLayout> </android.support.v7.widget.CardView> </LinearLayout>

DataObejct.class

package com.sisoft.cardview; public class DataObject { private String mText1; private String mText2; DataObject (String text1, String text2){ mText1 = text1; mText2 = text2; } public String getmText1() { return mText1; } public void setmText1(String mText1) { this.mText1 = mText1; } public String getmText2() { return mText2; } public void setmText2(String mText2) { this.mText2 = mText2; } }

Output