Recycler And CardView Combined In Android L

April 7, 2015 /
Android /
By Chetana

RecyclerView and CardView are 2 very important and new features introduced in Android L version (An early version Android Lollipop). The RecyclerView is a more advanced and more flexible version of the ListView. On the other hand CardView is a new component which is not an “upgrade” to any existing component.

Today in this tutorial, we are going to learn how to use these two components together. Before starting lets have a look at each of them separately.

I assume you all know how to use ListView in our app and if we want to increase the ListView performance we need to use a pattern called ViewHolder. RecyclerView makes the use of ViewHolder pattern compulsory. For example, let’s suppose we need to create a simple app that shows a list of contact cards. The first thing we should do is create the main layout. RecyclerView is very similar to the ListView and we can use them in the same way. Create a project and write following in your main layout to create recyclerview:

<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">

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

</RelativeLayout>

On the other side CardView shows information inside cards which user can customize, elevate, etc. Here in this example we want to use CardView to show contact information i.e. these cards will be displayed as rows of RecyclerView. So let’s define our card layout by creating a new layout as shown below:

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

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="@color/bkg_card"
android:text="contact det"
android:gravity="center_vertical"
android:textColor="@android:color/white"
android:textSize="14dp"/>

<TextView
android:id="@+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:gravity="center_vertical"
android:textSize="10dp"
android:layout_below="@id/title"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"/>

<TextView
android:id="@+id/txtPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Phone"
android:textSize="10dp"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:layout_marginRight="150dp"
android:layout_alignBaseline="@id/txtName"/>

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

Now let’s see the step by step method to implement this example. Follow the steps below:

Step1: Create a new android project in your IDE with minimum L version of sdk.

Step2: Add below dependencies to you gradle:

compile 'com.android.support:recyclerview-v7:21.0.0'
compile 'com.android.support:cardview-v7:21.0.0'

Step3: Create and write below into your ContactInfoe.java:

package com.example.androidrecyclerandcardview;

public class ContactInfo {
protected String name;
protected String phone;

protected static final String NAME_PREFIX = "Name_";
protected static final String PHONE_PREFIX = "1234567890";
}

Step4: Create and write below into ContactAdapter.java:

package com.example.androidrecyclerandcardview;

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

import java.util.List;

public class ContactAdapter extends RecyclerView.Adapter<ContactAdapter.ContactViewHolder> {

private List<ContactInfo> contactList;

public ContactAdapter(List<ContactInfo> contactList) {
this.contactList = contactList;
}

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

@Override
public void onBindViewHolder(ContactViewHolder contactViewHolder, int i) {
ContactInfo ci = contactList.get(i);
contactViewHolder.vName.setText(ci.name);
contactViewHolder.vPhone.setText(ci.phone);
contactViewHolder.vTitle.setText(ci.name );
}

@Override
public ContactViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View itemView = LayoutInflater.
from(viewGroup.getContext()).
inflate(R.layout.card_layout, viewGroup, false);

return new ContactViewHolder(itemView);
}

public static class ContactViewHolder extends RecyclerView.ViewHolder {

protected TextView vName;
protected TextView vPhone;
protected TextView vTitle;

public ContactViewHolder(View v) {
super(v);
vName = (TextView) v.findViewById(R.id.txtName);
vPhone = (TextView) v.findViewById(R.id.txtPhone);
vTitle = (TextView) v.findViewById(R.id.title);
}
}
}

Step5: Write following into main activity file:

package com.example.androidrecyclerandcardview;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recList = (RecyclerView) findViewById(R.id.cardList);
recList.setHasFixedSize(true);
LinearLayoutManager llm = new LinearLayoutManager(this);
llm.setOrientation(LinearLayoutManager.VERTICAL);
recList.setLayoutManager(llm);

ContactAdapter ca = new ContactAdapter(createList(10));
recList.setAdapter(ca);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

private List<ContactInfo> createList(int size) {

List<ContactInfo> result = new ArrayList<ContactInfo>();
for (int i=1; i <= size; i++) {
ContactInfo ci = new ContactInfo();
ci.name = ContactInfo.NAME_PREFIX + i;
ci.phone = ContactInfo.PHONE_PREFIX;
result.add(ci);
}
return result;
}
}

Step6: Run to see output as below:

Google cast sender app .

Recycler And CardView Combined In Android L

Related Posts

Leave a Comment:

Popular posts

Socket Programming

Use Of SQLite

TicTacToe Game Implementation

View Pager Example In Android Development