Monday, 18 January 2016

Android RecyclerView and CardView

The new support library in Android L introduced two new UI widgets: RecyclerView and CardView. The RecyclerView is a more advanced and more flexible version of the ListView. This new component is a big step because the ListView is one of the most used UI widgets. The CardView widget, on the other hand, is a new component that does not "upgrade" an existing component. In this tutorial, I'll explain how to use these two widgets and show how we can mix them. Let's start by diving into the RecyclerView.
RecyclerView: Introduction
As I mentioned, RecyclerView is more flexible that ListView even if it introduces some complexities. We all know how to use ListView in our app and we know if we want to increase the ListView performances we can use a pattern called ViewHolder

CardView

The CardView UI component shows information inside cards. We can customise its corners, the elevation and so on. We want to use this component to show contact information. These cards will be the rows of RecyclerView and we will see later how to integrate these two components. By now, we can define our card layout:



Adding libraries

dependencies {
    
compile 'com.android.support:cardview-v7:24.0.0'
  compile 'com.android.support:recyclerview-v7:24.0.0'

}

actvity_main.xml
----------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:orientation="vertical"
   
app:layout_behavior="@string/appbar_scrolling_view_behavior"
   
tools:context="com.sgp.anil.recyclerviewexample.MainActivity"
   
tools:showIn="@layout/activity_main">

    <
android.support.v7.widget.RecyclerView
       
android:id="@+id/recycler_view"
       
android:layout_width="match_parent"
       
android:layout_height="match_parent"
       
android:scrollbars="vertical">
    </
android.support.v7.widget.RecyclerView>
</
LinearLayout>


mycardview.xml
-----------------------
<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:cardElevation="3dp"
   
card_view:cardUseCompatPadding="true">
   
    <
RelativeLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content">
        <
ImageView
           
android:id="@+id/list_avatar"
           
android:layout_width="40dp"
           
android:layout_height="40dp"
           
android:layout_alignParentLeft="true"
           
android:layout_centerVertical="true"
           
android:layout_marginLeft="10dp"
           
android:scaleType="centerCrop"
           
android:src="@mipmap/ic_launcher" />

        <
TextView
           
android:id="@+id/list_title"
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_alignLeft="@+id/list_desc"
           
android:layout_alignParentTop="true"
           
android:layout_alignStart="@+id/list_desc"
           
android:text="Androidwarriors "
           
android:textAppearance="?attr/textAppearanceListItem"
           
android:textColor="#000000"
           
android:textSize="16sp" />

        <
TextView
           
android:id="@+id/list_desc"
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_below="@+id/list_title"
           
android:layout_marginLeft="16dp"
           
android:layout_toRightOf="@+id/list_avatar"
           
android:ellipsize="end"
           
android:singleLine="true"
            
android:text="Place to dive into android programming"
           
android:textAppearance="?attr/textAppearanceListItem"
           
android:textColor="#000000"
           
android:textSize="14sp" />
    </
RelativeLayout>
</
android.support.v7.widget.CardView>
Employee.Java
-----------------------

 package com.sgp.anil.recyclerviewexample.Model;

/**
 * Created by Anil on 18-01-2016.
 */
public class Employee {
   
public String name;
  
public String addrs;

   
public Employee(String name, String addrs) {
       
this.name = name;
       
this.addrs = addrs;
    }
}
 RecyclerAdapter .Java
----------------------------
package com.sgp.anil.recyclerviewexample.Adapter;

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.TextView;

import com.sgp.anil.recyclerviewexample.Model.Employee;
import com.sgp.anil.recyclerviewexample.R;

import java.util.List;

/**
 * Created by Anil on 18-01-2016.
 */
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.VH> {

    List<Employee>
list;
    Context
context;

   
public RecyclerAdapter(List<Employee> list, Context context) {
       
this.list = list;
       
this.context = context;
    }


   
@Override
   
public RecyclerAdapter.VH onCreateViewHolder(ViewGroup parent, int viewType) {
       
return new RecyclerAdapter.VH(LayoutInflater.from(parent.getContext()).inflate(R.layout.mycardview, parent, false));
    }

   
@Override
   
public void onBindViewHolder(RecyclerAdapter.VH holder, int position) {
        holder.
name.setText(list.get(position).name);
        holder.
loc.setText(list.get(position).addrs);

    }

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

   
public class VH extends RecyclerView.ViewHolder {
        TextView
name;
        TextView
loc;

       
public VH(View itemView) {
           
super(itemView);
           
name = (TextView) itemView.findViewById(R.id.list_title);
           
loc = (TextView) itemView.findViewById(R.id.list_desc);
        }

    }
}

MainActivity.Java
------------------------
package com.sgp.anil.recyclerviewexample;

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

import com.sgp.anil.recyclerviewexample.Adapter.RecyclerAdapter;
import com.sgp.anil.recyclerviewexample.Model.Employee;

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

public class MainActivity extends AppCompatActivity {
    RecyclerView
recyclerView;
    RecyclerAdapter
recyclerAdapter;
    List<Employee>
list;


   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.
toolbar);
        setSupportActionBar(toolbar);
       
recyclerView=(RecyclerView)findViewById(R.id.recycler_view);
       
recyclerView.setLayoutManager(new LinearLayoutManager(this));
        createemplist();
       
recyclerAdapter=new RecyclerAdapter(list,MainActivity.this);
       
recyclerView.setAdapter(recyclerAdapter);



    }
   
private void createemplist(){
       
list=new ArrayList<>();
       
list.add(new Employee("Anil","Tadipatri"));
       
list.add(new Employee("Jayachandra","Srikalahasti"));
       
list.add(new Employee("Aswartha","Jammalamadugu"));
       
list.add(new Employee("Ashraff","Rayachoti"));
       
list.add(new Employee("Mohan","Pileru"));
       
list.add(new Employee("Kishore","Rajampeta"));
       
list.add(new Employee("TulasiRam","Pulivendula"));
       
list.add(new Employee("Mahendra","Kadapa"));
       
list.add(new Employee("Venkatesh","Kurnool"));
       
list.add(new Employee("Veera","Tadipatri"));
       
list.add(new Employee("Sudhakar","Ananthapur"));
       
list.add(new Employee("SurendraBabu","Ananthapur"));
    }
}











No comments:

Post a Comment