Tuesday, 9 February 2016

Android Programming Tutorial 58 : About RecyclerView and Example In Android Studio

About RecyclerView in Android:
RecyclerView is an Extension Of ListView In General.RecyclerView Is also used to display the data on the screen in a list.
RecyclerView ViewGroup is an container for larger data set of views that can be recycled and scrolled very efficiently. RecyclerView can be used for larger datasets to be rendered on the UI like a list. RecyclerView provides maximum flexibility to design different kind of views.

RecyclerView includes a new kind of adapter. It’s a similar approach to the ones you already used, but with some peculiarities, such as a required ViewHolder. You will have to override two main methods: one to inflate the view and its view holder, and another one to bind data to the view. The good thing about this is that first method is called only when we really need to create a new view. No need to check if it’s being recycled. 
 
Creating a Project In Android Studio:

File >> New >> Android Application
Enter Project name: RecylerView Example
Package: com.recyclerviewdemo
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.+'
}

 Copy and Past the following code in the MainActivity.java

  package com.recyclerviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends Activity {
    RecyclerView rv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rv = (RecyclerView) findViewById(R.id.recyclerView);
        ItemData itemsData[] = {new ItemData("Help", R.drawable.help),
                new ItemData("Delete", R.drawable.delete),
                new ItemData("Cloud", R.drawable.cloud),
                new ItemData("Favorite", R.drawable.fav),
                new ItemData("Like", R.drawable.like),
                new ItemData("Rating", R.drawable.rate)};
        rv.setLayoutManager(new LinearLayoutManager(this));
        Adapter adap = new Adapter(itemsData);
        rv.setAdapter(adap);
        rv.setItemAnimator(new DefaultItemAnimator());
    }
 }


 Now Create An Adapter Class and Copy and Past the following code in the RecyclerAdapter.java


  package com.recyclerviewdemo;

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;

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
  private ItemData[] itemsData;
    public Adapter(ItemData[] itemsData) {
        this.itemsData = itemsData;
    }
    @Override
    public Adapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_data, null);
        ViewHolder vH = new ViewHolder(v);
        return vH;
    }
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        viewHolder.tv.setText(itemsData[i].getTitle());
        viewHolder.iv.setImageResource(itemsData[i].getImageURL());
    }
    public static class ViewHolder extends RecyclerView.ViewHolder {
        TextView tv;
        ImageView iv;
        public ViewHolder(View view) {
            super(view);
            tv = (TextView) view.findViewById(R.id.item_title);
            iv = (ImageView) view.findViewById(R.id.item_icon);
        }
    }
    @Override
    public int getItemCount() {
        return itemsData.length;
    }
}

Now Create a DataType Class , Copy and Past the following code in the ItemData.java

  package com.recyclerviewdemo;

 public  class ItemData {
    private String title;
    private int imageURL;
    public ItemData(String title, int imageURL) {
        this.title = title;
        this.imageURL = imageURL;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public int getImageURL() {
        return imageURL;
    }
    public void setImageURL(int imageURL) {
        this.imageURL = imageURL;
    }
}

 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="fill_parent"
    android:layout_height="match_parent"
    tools:context="com.hmkcode.android.recyclerview.MainActivity" >

    <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" />
</RelativeLayout>

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

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="80dp"    >

    <!-- icon -->
    <ImageView
        android:id="@+id/item_icon"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="1dp"
        android:layout_marginBottom="1dp"
        android:contentDescription="icon"
        android:src="@drawable/girl"
        />

    <!-- title -->
    <TextView
        android:id="@+id/item_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/item_icon"
        android:layout_alignBaseline="@+id/item_icon"
        android:textColor="@android:color/darker_gray"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:textSize="22dp" />

</RelativeLayout>

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

    <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...  About RecyclerView and CardView With Example in Android Studio

No comments:

Post a Comment