Android Recycler View Tutorial

Posted by on

In Android there is the need when you need to display a list of data or simply data that get generated at run-time. Rather than creating your own layout inflator. Android provide Recycler View, there is also a listview which was provided to show data.

After after many experiments with Recycler View here is the tutorial for it. Hope it will be use full to someone.I assume if you are reading this then you know how to add activity in the android studio.

I have divided the article into several parts. Here is the First part.

Part 2 : http://www.androidlearner.com/2017/11/android-recycler-view-tutorial-part-2.html

Here is the video of it :




# First Create an Android Project.

#Compiling the required library

Open your build.gradle file for (module:app) level
add line compile 'com.android.support:recyclerview-v7:25.3.1'  in the dependencies section.
this will download recycler view dependencies in the project.


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })

    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    //Recycler view library -- its version should be similar as appcompact.
    // It can also be used as
    //compile 'com.android.support:recyclerview-v7:25.+'
    compile 'com.android.support:recyclerview-v7:25.3.1'

    testCompile 'junit:junit:4.12'
}


# Add the Recycler view to the layout.

Open your layout file and add the View.


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="skd.app.androidfeatures.sRecylerView.RecylerActivity">

    <!-- Recycler view -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

# Initializing the Recycler View in your activity class.


Recycler view requires 3 components to set it up.

  • The Recycler view widget from the layout.
  • The Data Adapter for the view , This contain the data which need to be shown
  • The LayoutManager , it defines how data is shown in the Layout.
Now open your Activity Class which corresponds to the layout which contain the recycler view.
and set up your Recycler View.


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import skd.app.androidfeatures.R;

public class RecylerActivity extends AppCompatActivity {


    //Below are the componets which are required by the Recycler view
    RecyclerView recyclerView; //this will hold the recycler view from the layout
    RecyclerView.Adapter   mAdapter; //this will hold the adapter for the recycler view
    RecyclerView.LayoutManager mLayoutmanager; //holds the layout manager

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_recyler); //layout which contain the recycler view

        //Find the Recycler view
        recyclerView = (RecyclerView)findViewById(R.id.my_recycler_view); //got the recycler view from the layout

        //set the layout manager for the recycler view
        //standard layout managers( LinearLayoutManager or GridLayoutManager) can be used, or implement your own.
        //Layout Manager tells how the item are shown in your Recycler View
        mLayoutmanager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(mLayoutmanager);

        //set the data adapter
        //Adapter contain the Data Which need to be shown in the view
        mAdapter = new RvDataAdpt();
        recyclerView.setAdapter(mAdapter);
    }
}


#Recycler View Item


Now we need to create and recycler item , i.e the layout which can be shown by the recycler view.
Add layout recycler_item.xml

 


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?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="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hii "
        android:textSize="30sp" />
</LinearLayout>


# The Data Adapter

The data Adapter is the component which feeds to the recycler view. In the post I will describe how to set up the basic adapter class to able to show the view. listening events from the view will be decribed in a later post :).

As per Android doc your adapter class must extent RecyclerView.Adapter class from the support library.


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import skd.app.androidfeatures.R;

/**
 * THis class will be the data adapter for the recycler view
 * This class must exxtend the Recycler view adapter.
 */
public class RvDataAdpt extends RecyclerView.Adapter {
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0; 
    }
}

These methods are need overridden by the base class.

onCreateViewHolder : This method used to construct the view holder and set the view it uses
 to display its contents. Typically, it would set the view by inflating an XML layout file.

onBindViewHolder : Called by RecyclerView to display the data at the specified position. This method should update the contents of the itemView to reflect the item at the given position.

getItemCount : Returns the total number of items in the data set held by the adapter.

For more info visit Recycler Adapter

At this point if you run the application. Recycler view will be visible however with no item.
Now lets try to display our item layout in the recycler.

To display the item in the recycler view we need to inflate our item in the onCreateViewHolder  method however. However this method return data of RecyclerView.ViewHolder , so we first need to convert or return our view as ViewHolder type. By creating instance of ViewHolder Class.

To set the count of the item displayed. getItemCount should return value greater than 0.



1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import skd.app.androidfeatures.R;

/**
 * THis class will be the data adapter for the recycler view
 * This class must exxtend the Recycler view adapter.
 */
public class RvDataAdpt extends RecyclerView.Adapter {
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        //lets populate our recyler view with the item created;
        //get the view from the layout inflator
        //  third parameter is set to false to prevent viewgroup to attach to root
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item,parent,false);

        // as this method need to return the viewHolder type
        // need to convert our view to the view holder
        RecyclerView.ViewHolder viewHolder = new RecyclerView.ViewHolder(view) {
            @Override
            public String toString() {
                return super.toString();
            }
        };
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
  //this defined how many items need to be displayed
        return 3000; // to display the 3000 items
    }
}


Now After compiling and running the application you will get something like this.

In the next post I will describe how to use Recycler view with proper items ,with data model and listing to the events of the items.

Source Code : - https://github.com/sapandang/AndroidFeatures

Comments

Post a Comment