Wednesday, 15 March 2017

Android Recycler View Example

    Android RecyclerView is more advanced version of ListView with improved performance and other benefits. In this tutorial we are going to learn how to render a simple RecyclerView with a custom layout. We’ll also learn writing a adapter class and row click listener.
    Open build.gradle and add recycler view and card view dependency. Then after rebuild the project.
build.gradle

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.android.support:design:25.0.1'
    compile 'com.android.support:cardview-v7:25.0.1'
    compile 'com.android.support:recyclerview-v7:25.0.1'
}
    Open res->values->styles.xml and added this below card view style into your styles file.
styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="CardViewDefault" parent="CardView">
        <item name="cardElevation">3dp</item>
        <item name="contentPadding">5dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_marginLeft">5dp</item>
        <item name="android:layout_marginRight">5dp</item>
        <item name="android:layout_marginBottom">5dp</item>
    </style>

</resources>
    Open res->layout->activity_main.xml then after added this below line of code into your activity_main.xml file. here main componet is recycler view.
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="#e7e7e7"
    tools:context="com.androidsimplifycodes.example.RecyclerView.RecyclerActivity">

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

</LinearLayout>
    Create an layout xml named list_item.xml with the below line of code. This layout file renders a single row in recycler view by displaying images into card view.
list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <android.support.v7.widget.CardView
        style="@style/CardViewDefault">

        <ImageView
            android:id="@+id/ivImage"
            android:layout_width="wrap_content"
            android:layout_height="300dp"
            android:contentDescription="@null"
            android:scaleType="fitXY"
            android:src="@drawable/img2" />

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

</LinearLayout>
    RecyclerModel is class use for the data storage. For example here stored scale bitmap into this model class.
RecyclerModel.java

package com.androidsimplifycodes.example.RecyclerView;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class RecyclerModel {

    private Bitmap bitmapResource;

    public Bitmap getBitmapResource() {
        return bitmapResource;
    }

    public void setGetBitmapResource(Context context, int getBitmapResource) {
        this.bitmapResource = Bitmap.createScaledBitmap(
                BitmapFactory.decodeResource(context.getResources(), getBitmapResource),
                500,
                500,
                false);
    }
}
RecyclerAdapter.java

package com.androidsimplifycodes.example.RecyclerView;

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

import com.androidsimplifycodes.example.R;

import java.util.ArrayList;

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    private Context context;
    private ArrayList<RecyclerModel> list;

    RecyclerAdapter(Context context, ArrayList<RecyclerModel> list) {
        // give reference to the Activity context and list into the adapter
        this.context = context;
        this.list = list;
    }

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

    @Override
    public void onBindViewHolder(final RecyclerAdapter.ViewHolder holder, int position) {
        holder.ivImage.setImageBitmap(list.get(position).getBitmapResource());

        holder.ivImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // for the displaying the current item position when click.
                Toast.makeText(context, String.valueOf(holder.getAdapterPosition()), Toast.LENGTH_SHORT).show();
            }
        });
    }

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

    class ViewHolder extends RecyclerView.ViewHolder {

        ImageView ivImage;

        ViewHolder(View itemView) {
            super(itemView);
            initView(itemView);
        }

        private void initView(View rootView) {
            ivImage = (ImageView) rootView.findViewById(R.id.ivImage);
        }
    }
}
RecyclerActivity.java

package com.androidsimplifycodes.example.RecyclerView;

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

import com.androidsimplifycodes.example.R;

import java.util.ArrayList;

public class RecyclerActivity extends AppCompatActivity {

    protected RecyclerView rvSelectItem;
    protected ArrayList<RecyclerModel> list;
    protected RecyclerModel recyclerModel;

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

        // initialize array list
        list = new ArrayList<>();

        recyclerModel = new RecyclerModel();
        recyclerModel.setGetBitmapResource(this, R.drawable.img2);
        list.add(recyclerModel);

        recyclerModel = new RecyclerModel();
        recyclerModel.setGetBitmapResource(this, R.drawable.img5);
        list.add(recyclerModel);

        recyclerModel = new RecyclerModel();
        recyclerModel.setGetBitmapResource(this, R.drawable.img4);
        list.add(recyclerModel);

        recyclerModel = new RecyclerModel();
        recyclerModel.setGetBitmapResource(this, R.drawable.img5);
        list.add(recyclerModel);

        recyclerModel = new RecyclerModel();
        recyclerModel.setGetBitmapResource(this, R.drawable.img2);
        list.add(recyclerModel);

        recyclerModel = new RecyclerModel();
        recyclerModel.setGetBitmapResource(this, R.drawable.img4);
        list.add(recyclerModel);

        // LinearLayoutManager user for set Recycler View HORIZONTAL Or VERTICAL
        // for example LinearLayoutManager.VERTICAL Or LinearLayoutManager.HORIZONTAL
        LinearLayoutManager manager = new LinearLayoutManager(RecyclerActivity.this, LinearLayoutManager.HORIZONTAL, false);
        rvSelectItem.setLayoutManager(manager);
        // set Our RecyclerAdapter into setAdapter() method.
        rvSelectItem.setAdapter(new RecyclerAdapter(this, list));
    }

    private void initView() {
        rvSelectItem = (RecyclerView) findViewById(R.id.rvSelectItem);
    }
}
Output :