Android Programming Tutorial 59 : About RecyclerView and CardView With Example in Android Studio

CardView In Android:
Cards represented by CardViews can be used to display the row of data in a RecyclerView or ListView.  Like the rows in a RecyclerView or ListView, a CardView typically serves as the entry to more detailed information – in a master/detail way.  CardViews have a constant width but a variable height.  The height is determined by the collection of objects displayed in the card.

Creating a Project In Android Studio:

File >> New >> Android Application
Enter Project name: RecylerViewWithCardViewApp
Package: com.recyclerviewncardviewdemo
Keep other default selections, click Next until you reach Finish

                                      
  Add Following jar in build.gradle display below in the
 dependencies {
    compile 'com.android.support:appcompat-v7:21.0.3'
    compile 'com.android.support:recyclerview-v7:21.0.+'
    compile 'com.android.support:cardview-v7:21.0.+'
} 
Copy and Past the following code in the MainActivity.java
package com.recyclerviewncardviewdemo;

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 com.recyclerviewncardviewdemo.adapter.CardAdapter;

public class MainActivity extends Activity {

    RecyclerView rv;
    RecyclerView.LayoutManager lm;
    RecyclerView.Adapter adapt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rv = (RecyclerView) findViewById(R.id.rv);
        rv.setHasFixedSize(true);
        lm = new LinearLayoutManager(this);
        rv.setLayoutManager(lm);

        adapt = new CardAdapter();
        rv.setAdapter(adapt);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}
Now Create An Adapter Class and Copy and Past the following code in the CardViewAdapter.java


package com.recyclerviewncardviewdemo.adapter;

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.recyclerviewncardviewdemo.R;
import com.recyclerviewncardviewdemo.model.NatureData;

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

    public class CardViewAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {

    List<NatureData> list;

    public CardAdapter(){
        super();
        list =  new ArrayList<NatureData>();
        NatureData data = new NatureData();
        data.setTopic("Introduction");
        data.setTiming("9:00am - 9:15am");
        data.setName("sunil"); ;
        data.setDes("Sunil Is Very Brave");
        data.setThumbail(R.drawable.eight);
        list.add(data);

        data = new NatureData();
        data.setTopic("Chairman's Address");
        data.setTiming("9:15am - 10:00 m");
        data.setName("Tanil");
        data.setDes("Tanil Will Play Cricket");
        data.setThumbail(R.drawable.eleven);
        list.add(data);

        data = new NatureData();
        data.setName("Anil");
        data.setDes("An Brillent Android Developer");
        data.setThumbail(R.drawable.one);
        list.add(data);

        data = new NatureData();
        data.setName("Ram");
        data.setDes("A .dot Net Developer");
        data.setThumbail(R.drawable.two);
        list.add(data);
       
        data.setName("W anil");
        data.setDes("Java Developer");
        data.setThumbail(R.drawable.three);
        list.add(data);
  
        data = new NatureData();
        data.setName("Flower");
        data.setDes("Flower One");
        data.setThumbail(R.drawable.four);
        list.add(data);
      
        data.setDes("Flower are Beautiful");
        data.setThumbail(R.drawable.five);
        data.setName("Flower");
        list.add(data);
    }
    @Override
    public CardAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_data, viewGroup,false);
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }
    @Override
    public void onBindViewHolder(CardAdapter.ViewHolder viewHolder, int i) {
        NatureData data = list.get(i);
        viewHolder.tv_Topic.setText(data.getTopic());
        viewHolder.tv_Timing.setText(data.getTiming());
        viewHolder.img.setImageResource(data.getThumbail());
    }

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

    class ViewHolder extends RecyclerView.ViewHolder{

        public ImageView img;
        public TextView tv_Topic;
        public TextView tv_Timing;

        public ViewHolder(View itemView){
            super(itemView);
           img = (ImageView) itemView.findViewById(R.id.img_thumbnail);
            tv_Topic = (TextView) itemView.findViewById(R.id.tv_Topic);
            tv_Timing = (TextView) itemView.findViewById(R.id.tv_Timing);
        }
    }
}
Now Create a DataType Class, Copy and Past the following code in the NatureData.java
package com.recyclerviewncardviewdemo.model;

public class NatureData {

    private String topic;
    private String timing;
    private String name;
    private String des;
    private int thumnail;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDes() {
        return des;
    }

    public void setDes(String des) {
        this.des = des;
    }

    public Integer getThumnail() {
        return thumnail;
    }

    public void setThumnail(int thumnail) {
        this.thumnail = thumnail;
    }

    public String getTopic() {
        return topic;
    }

    public void setTopic(String topic) {
        this.topic = topic;
    }

    public String getTiming() {
        return timing;
    }

    public void setTiming(String timing) {
        this.timing = timing;
    }
}
Copy and Past the following code in the layout file called activity_main.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"
    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=".MainActivity">

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

</RelativeLayout>

 Copy and Past the following code in the layout file called itme_data.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:orientation="vertical"
    android:weightSum="1">

    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="9dp"
        android:layout_marginRight="9dp"
        android:layout_marginTop="9dp"
        card_view:cardCornerRadius="9dp"
        card_view:cardElevation="0.01dp">

        <RelativeLayout
            android:id="@+id/top_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <!--<ImageView
                android:id="@+id/img_thumbnail"
                android:layout_width="fill_parent"
                android:layout_height="250dp"
                android:layout_marginBottom="50dp"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/tv_nature"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:layout_alignBottom="@+id/img_thumbnail"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_gravity="bottom"
                android:alpha="0.5"
                android:background="#F7D358"
                android:gravity="center_vertical"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:text="Test"
                android:textColor="#fff"
                android:textSize="26sp" />

            <TextView
                android:id="@+id/tv_des_nature"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/tv_nature"
                android:alpha="0.8"
                android:paddingBottom="2dp"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="5dp"
                android:text="Test Test Test Test Test Test Test Test Test
                Test Test Test Test Test Test Test Test Test Test Test Test"
                android:textColor="#000000"
                android:textSize="15dp" />-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Text"
                android:id="@+id/tv_Topic"
                android:layout_marginEnd="57dp"
                android:layout_alignParentTop="true"
                android:layout_toStartOf="@+id/tv_Timing" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Text"
                android:id="@+id/tv_Timing"
                android:layout_alignParentTop="true"
                android:layout_alignParentEnd="true"
                android:layout_marginEnd="112dp" />

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

</LinearLayout>

  Copy and Past the following code in the Manifest.xml

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            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>

Run Your Project as the below by clicking on shift+10 or like the below-->Android Application and observe the output
      



OutPut:

 

Please Send Your Comments To ambilpura.sunil@gmail.com

 
Stay Tune For Next Tutorial...ExtendedListView Example in Android Studio