ZOFTINO.COM android and web dev tutorials

Android Recycler View Example

Recycler view widget is an enhanced version of list view with advanced features. It lets you display large data set efficiently. The efficiency is achieved by reusing item views and not performing or reducing findByView operations.

Recycler view widget contains layout manager, recycler view adapter and animation adapter. Layout manager positions item views within in recycler view. Recycler view adapter provides views, creating them by populating item data in views. Animation adapter provides animation on item changes, for example animation when adding and removing items.

How to use recycler view

To display list of items in your app, you can use recycler view. To use recycler view, you need layout manager, recycler view adapter and animation adapter.

Recycler view layout manager

Layout manager measures and positions views in recycler view. It also decides when to recycle views which are not shown on screen. Support library provides linear layout manager, grid layout manager and staggered grid layout. You can use one of them or create custom layout manager by extending RecyclerView.LayoutManager class.

Recycler view adapter

You need to create recycler view adapter which binds your data to views. Recycler view adapter can be created by extending RecyclerView.Adapter class. Recycler view adapter uses view holder, which you need to create by extending RecyclerView.ViewHolder class, to store item view data and metadata related to its place in recycler view.

Animation adapter

Animation adapter provides animation on items as content change or on move events in recycler view. If you don’t provide animation adapter, default animation adapter, DefaultItemAnimator, is used. You can create custom animation adapter by extending RecyclerView.ItemAnimator class.

Recycler view example

I’ll show you how to use recycler view and how to create recycler view adapter using coupons app. In this example, list of coupons will be displayed in recycler view. Each coupon contains data such as store name, coupon text and expiration date.

Recycler view event handling

In this coupon example, coupon item click events are handled by event listener. Coupon view holder in recycler adapter implements View.OnClickListener and sets the listener to item view. When item view is clicked, this listener’s onClick method gets called.

Recycler view adapter output

android recycler view example

Recycler view adapter code

Activity

 package com.zoftino.materialdesign;

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;

public class RecyclerViewActivity extends AppCompatActivity {

    private RecyclerView couponRecyclerView;
    private RecyclerView.Adapter couponAdapter;
    private RecyclerView.LayoutManager couponLayoutManager;

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

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);

        couponRecyclerView = (RecyclerView) findViewById(R.id.all_coupons);

        couponLayoutManager = new LinearLayoutManager(this);
        couponRecyclerView.setLayoutManager(couponLayoutManager);


        couponAdapter = new CouponRecyclerViewAdapter(CouponStoreData.couponsData,this);
        couponRecyclerView.setAdapter(couponAdapter);

    }

}

Activity layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:id="@+id/recycler_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.materialdesign.RecyclerViewActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/appbar">
        <android.support.v7.widget.Toolbar android:id="@+id/z_toolbar" android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"
            android:elevation="4dp" app:layout_scrollFlags="scroll|enterAlways">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:id="@+id/tabL">
            <android.support.design.widget.TabItem
                android:text="@string/stores"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/stores"></android.support.design.widget.TabItem>

            <android.support.design.widget.TabItem
                android:text="@string/coupons"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/coupons"></android.support.design.widget.TabItem>

            <android.support.design.widget.TabItem
                android:text="@string/cashback"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/cashback"></android.support.design.widget.TabItem>
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/seconnest"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorGrn"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/all_coupons"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Coupon

 package com.zoftino.materialdesign;

public class Coupon {
    private String storeName;
    private String coupon;
    private String expiarationDt;

    public String getStoreName() {
        return storeName;
    }

    public void setStoreName(String storeName) {
        this.storeName = storeName;
    }

    public String getCoupon() {
        return coupon;
    }

    public void setCoupon(String coupon) {
        this.coupon = coupon;
    }

    public String getExpiarationDt() {
        return expiarationDt;
    }

    public void setExpiarationDt(String expiarationDt) {
        this.expiarationDt = expiarationDt;
    }
}

Recycler view adapter

 package com.zoftino.materialdesign;


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

import java.util.List;

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

    private List<Coupon> couponList;
    private Context context;


    public CouponRecyclerViewAdapter(List<Coupon> couponLst, Context ctx){
        couponList = couponLst;
        context = ctx;
    }

    @Override
    public CouponRecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.coupon_row, parent, false);

        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Coupon cpn = couponList.get(position);
        holder.storeName.setText(cpn.getStoreName());
        holder.coupon.setText(cpn.getCoupon());
        holder.expirationDt.setText(cpn.getExpiarationDt());
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{

        public TextView storeName;
        public TextView coupon;
        public TextView expirationDt;

        public ViewHolder(View view) {
            super(view);
            storeName = (TextView) view.findViewById(R.id.storeName);
            coupon = (TextView) view.findViewById(R.id.coupon);
            expirationDt = (TextView) view.findViewById(R.id.expirationDt);
            view.setOnClickListener(this);
        }
        @Override
        public void onClick(View v){
            storeName = (TextView) v.findViewById(R.id.storeName);
            Toast.makeText(context, "You selected "+storeName.getText()+" coupon "+ getAdapterPosition(),
                    Toast.LENGTH_LONG).show();
        }
    }
}

Recycler view item layout

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/coupon_row"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">
    <TextView android:id="@+id/storeName" android:layout_width="100dp" android:textSize="20dp"
        android:textColor="@color/colorPrimary" android:textAlignment="center"
        android:layout_height="match_parent" android:text="something"></TextView>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_height="match_parent">
        <TextView android:id="@+id/coupon" android:layout_width="match_parent" android:textSize="15dp"
            android:layout_height="wrap_content" android:text="something1"></TextView>
        <TextView android:id="@+id/expirationDt" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:text="something2"></TextView>
    </LinearLayout>
</LinearLayout>