Android App Development

Introduction of RecyclerView in Android

Introduction:

Recycler View is a new widget of Android i.e. “android.support.v7.widget.RecyclerView”.
Recycler View is an advanced form of ListView and GridView.
It works like a ListView but it is more flexible and advance with the large data set.
By using LayoutManager class in RecyclerView we can show the items in horizontally and vertically scrolling list.

Classes & Methods:
Classes:
ViewHolder
This class is used to hold the reference of each item of RecyclerView.
Methods:
onCreateViewHolder(..)
In this method, we create a new view by inflating the layout and create the ViewHolder.
onBindViewHolder(..)
Here we get the data for the particular position from our Model class.
These are the important classes and methods that are defined above to create RecyclerView in android.
Example with code:
To create Recycler View we have to add the dependency for RecyclerView in build.gradle i.e.
build.gradle

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

Update the Android Studio with the latest version, my Android Studio is updated to Android Studio 2.2 Preview 3.
STEPS

  1. Create a new application RecyclerViewAndroid in AndroidStudio.
  2. Two layout files are required activity_main.xml and item_layout.xml.activity_main.xml:add the code in this xml file.
    <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"
    />
  3. item_layout.xml:This layout is used to show the each item in the RecyclerView.
    <!-- 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"
    />
    <!-- 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" />
    <View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_below="@+id/item_icon"
    android:padding="2dp"
    android:background="#aaa"/>
    StudentItemData:
    Add the code in this model class.
    public class StudentItemData {
    private String studentname;
    private int studentimage;
    //create constructor and getters, setters
    }

     

  4. StudentAdapter:Here we implement the methods and inner class to create the RecyclerView.Add the code in onCreateViewHolder(…) and onBindViewHolder(…) methods.
     @Override
    public StudentAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
    int viewType) {
    // create a new view
    View itemLayoutView = LayoutInflater.from(parent.getContext())
    .inflate(R.layout.item_layout, null);
    // create ViewHolder
    ViewHolder viewHolder = new ViewHolder(itemLayoutView);
    return viewHolder;
    }
    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int position) {
    // - get data from your itemsData at this position
    // - replace the contents of the view with that itemsData
    viewHolder.txtViewTitle.setText(itemsData[position].getStudentname());
    viewHolder.imgViewIcon.setImageResource(itemsData[position].getStudentimage());
    }
    // inner class to hold a reference to each item of RecyclerView
    public static class ViewHolder extends RecyclerView.ViewHolder {
    public TextView txtViewTitle;
    public ImageView imgViewIcon;
    public ViewHolder(View itemLayoutView) {
    super(itemLayoutView);
    txtViewTitle = (TextView) itemLayoutView.findViewById(R.id.item_title);
    imgViewIcon = (ImageView) itemLayoutView.findViewById(R.id.item_icon);
    }
    }

    MainActivity:
    Here we set the layoutManager, adapter and take the reference of RecyclerView.

    Add the code in oncreate():
     //Take the refrencne of RecyclerView
    RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recyclerView);
    // this is data from recycler view
    StudentItemData itemsData[] = {..
    ..};
    // 2. set layoutManger
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    // 3. create an adapter
    StudentAdapter mAdapter = new StudentAdapter(itemsData);
    // 4. set adapter
    recyclerView.setAdapter(mAdapter);
    // 5. set item animator to DefaultAnimator
    recyclerView.setItemAnimator(new DefaultItemAnimator());
    }

    Output:

Conclusion:

This is the basic idea to create RecyclerView in Android. It is just an advanced form of ListView.
We can customize it according to the need of the application. This feature is very popular in Android development.
Keep visiting our site www.acadgild.com for more updates on Android and other technologies.

Suggested Reading

ExpandableListview in Android

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close