Home » CardView » Custom List » ListView » RecyclerView » Android Material Design Custom List with CardView and RecyclerView

Android Material Design Custom List with CardView and RecyclerView

in , , , - on 05:32 - No comments
Android lollipop 5.0 introduced two new widgets RecuclerView and CardView. The RecyclerView is a updated version of ListView. And other new component CardView is use for rounded corner or shadow and its use for a single row for ListView or GridView.
RecuclerView is also use for both direction Vertical or Horizontal
Ccreen View something like this after using  RecuclerView and CardView.     
                                                                         
                               
In this tutorial we learn about how to implements RecycleView or CardView for creating custom list.
whenever you want to use this two component please follow the step below.

 note :
Now we have to replace AppCompatActivity  to Activity
add supported library in your Gradle Scripts
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:recyclerview-v7:23.+'
    compile 'com.android.support:cardview-v7:23.+'
    compile 'com.android.support:design:23.0.0'
    compile 'com.android.support:appcompat-v7:23.0.0'
}

1. How to create Material Design Theme and add Toolbar click on below link  

2.Create Project
first create a project in android studio with Activity name as MainActivity.java Class and layout name as activity_main.xml.
2.1 Create activity_main.xml in app-> res-> layout.

<LinearLayout 
    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:orientation="vertical"
    tools:context=".MainActivity">
        <LinearLayout
            android:id="@+id/container_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
              <include
                 android:id="@+id/toolbar"
                layout="@layout/toolbar" />
        </LinearLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".CountryActivity"
        />
</LinearLayout>

2.2 Create Activity MainActivity.java in app-> java-> your package name

 package demo.androidpoint.com.androidcostomlist;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
import demo.androidpoint.com.androidcostomlist.modal.item;

public class MainActivity extends AppCompatActivity{
    RecyclerView mRecyclerView;
    CustomAdaptor mAdapter;
    ArrayList<item> list;
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView)findViewById(R.id.list);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

/*click on Home button enable and set title for this Activity*/
        getSupportActionBar().setDisplayShowHomeEnabled(true);
       getSupportActionBar().setTitle("Material Design CardView");

/*initialised list for costom list and add data*/
        list = new ArrayList<item>();
        list.add(new item("Manish Rajput","manish@gmail.com",R.drawable.a1));
        list.add(new item("Vinit yadav","vinit@gmail.com",R.drawable.a2));
        list.add(new item("Anoop","anoop@gmail.com",R.drawable.a3));
        list.add(new item("Dheeraj","Dheeraj@gmail.com",R.drawable.a5));
        list.add(new item("Ramu","Ramu@gmail.com",R.drawable.a6));
        list.add(new item("Pankaj","manish@gmail.com",R.drawable.a8));
        list.add(new item("Ketan","Ketan@gmail.com",R.drawable.a9));
        list.add(new item("Akshay","Akshay@gmail.com",R.drawable.a10));

/*initialised Adapter Class and set Adapter on ListView */
        mAdapter = new CustomAdaptor(list, R.layout.adaptor_item, this);
        mRecyclerView.setAdapter(mAdapter);
    }
/*create options Menu on your Activity*/
    @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);
    }
}

3. Create Custom Adapter  
app-> java-> your package name

package demo.androidpoint.com.androidcostomlist;
import android.content.Context;
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 java.util.List;
import demo.androidpoint.com.androidcostomlist.modal.item;

 public class CustomAdaptor extends RecyclerView.Adapter<CustomAdaptor.ViewHolder> {
    private List<item> countries;
    private int rowLayout;
    private Context mContext;
    public CustomAdaptor(List<item> countries, int rowLayout, Context context) {
        this.countries = countries;
        this.rowLayout = rowLayout;
        this.mContext = context;
    }
    @Override
    public int getItemCount() {
        return countries == null ? 0 : countries.size();
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(rowLayout, viewGroup, false);
        return new ViewHolder(v);
    }
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        item myItem = countries.get(i);
        viewHolder.Name.setText(myItem.getName());
        viewHolder.Image.setImageDrawable(mContext.getDrawable(myItem.getOmg()));
        viewHolder.email.setText(myItem.getEmail());
    }
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView Name,email;
        public ImageView Image;

        public ViewHolder(View itemView) {
            super(itemView);
            Name = (TextView) itemView.findViewById(R.id.text_name);
            Image = (ImageView)itemView.findViewById(R.id.Image);
            email = (TextView) itemView.findViewById(R.id.text_email);
        }
  }}

 4.create Item View for Adapter app-> res-> layout-> adaptor_item.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">

    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        card_view:cardCornerRadius="10dp"
        >
        <LinearLayout
            android:padding="5dp"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <TextView
                android:padding="5dp"
                android:textStyle="bold|italic"
                android:textColor="@android:color/holo_blue_dark"
                android:textSize="20dp"
            android:text="@string/app_name"
            android:id="@+id/text_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"/>
            <ImageView
                android:src="@drawable/a1"
                android:id="@+id/Image"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:scaleType="centerCrop"
                />
            <TextView
                android:padding="5dp"
                android:textColor="@android:color/black"
                android:textSize="15dp"
                android:layout_gravity="right"
                android:gravity="right"
                android:text="Email"
                android:id="@+id/text_email"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_below="@+id/textView"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

5.Create Bean Class :- Its Bean class for set data and get data whenever we want to use it

 app-> java-> your package name
package demo.androidpoint.com.androidcostomlist.modal;
/*its a bean class*/

public class item {
   public String name ,email;
    public int omg;
    public item(String name, String email, int omg) {
        this.name = name;
        this.email = email;
        this.omg = omg;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public int getOmg() {
        return omg;
    }
    public void setOmg(int omg) {
        this.omg = omg;
    }

}

 6.For more detail about cardView or RecyclerView
http://goo.gl/5vWwyp
Labels: , , ,