Wednesday, 17 June 2015

Easiest RecyclerView Example

RecyclerView ?

The RecyclerView is a new ViewGroup  similar to and much more than a LisView.
It is supossed to be the successor of ListView and GridView with Material Design Style.
It can be found in the latest support-v7 version.

How to use RecyclerView ?

The 2 mandatory elements require to create a RecyclerView are.

–Your Adapter that extends RecyclerView.Adapter and implements your ViewHolder
– LayoutManager [Default layout manager -LinearLayoutManager.]


Note: Your ViewHolder class is a simple class with a constructor to find the views in your layout.

Step 1: Add dependency in your build.gradle

dependencies {
    
    compile 'com.android.support:recyclerview-v7:21.0.+'
}

Step 2: Add RecyclerView in 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"
    tools:context=".MainActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>


Step 3:  Design your RowView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:id="@+id/list_item"
        xmlns:android="http://schemas.android.com/apk/res/android" />


</LinearLayout>

Step 4: Create your Adapter for RecyclerView. and your ViewHolder class

The new RecyclerView.Adapter abstract/generic class is similar in behavior to the old BaseAdapter. There are 3  methods you need to implement:

onCreateViewHolder – It creates the ViewHolder for speciic row display.It inflates the row layout for the row and creates a ViewHolder with that layout.

onBindViewHolder – It updates the row’s View components with data from the dataset.Called by the RecyclerView when it needs to display the data at the position/row specified as a parameter.

getItemCount – It returns the number of rows in the associated data set.

Code:

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
    private String[] dataSource;
    public RecyclerAdapter(String[] dataArgs){
        dataSource = dataArgs;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // create a new view
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.textView.setText(dataSource[position]);
    }

    @Override
    public int getItemCount() {
        return dataSource.length;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder{
        public TextView textView;
        public ViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView;
        }
    }
}

Step 5: Modify your MainAcivity to use the RecyclerView

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

public class MainActivity extends Activity {
    private RecyclerView recyclerView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    String[] dataArray = new String[]{"JellyBean","KitKat","Lollipop"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        adapter = new RecyclerAdapter(dataArray);
        recyclerView.setAdapter(adapter);
    }
}


OutPut:





Another excellent tutorial on RecyclerView is available at

https://www.binpress.com/tutorial/android-l-recyclerview-and-cardview-tutorial/156

http://www.vogella.com/tutorials/AndroidRecyclerView/article.html

http://blog.lovelyhq.com/creating-lists-with-recyclerview-in-android/

No comments:

Post a Comment