Android Recycler View Tutorial

0
57

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.

Here is the video of it :

 
[embedded content]

 

# 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<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br />10<br />11<br />12<br />13<br />14<br />15

<span style="color: black;">dependencies</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: black;">compile</span> <span style="color: black;">fileTree</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: #f57900;">dir:</span> <span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: black;">libs</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: #ce5c00; font-weight: bold;">,</span> <span style="color: #f57900;">include:</span> <span style="color: #ce5c00; font-weight: bold;">[</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: #ce5c00; font-weight: bold;">*.</span><span style="color: #c4a000;">jar</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: #ce5c00; font-weight: bold;">])</span><br /> <span style="color: black;">androidTestCompile</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: black;">com</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">android</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">support</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">test</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">espresso</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black;">espresso</span><span style="color: #ce5c00; font-weight: bold;">-</span><span style="color: #f57900;">core:</span><span style="color: #0000cf; font-weight: bold;">2.2</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #0000cf; font-weight: bold;">2</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: #ce5c00; font-weight: bold;">,</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: black;">exclude</span> <span style="color: #f57900;">group:</span> <span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: black;">com</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">android</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">support</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: #ce5c00; font-weight: bold;">,</span> <span style="color: #f57900;">module:</span> <span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: black;">support</span><span style="color: #ce5c00; font-weight: bold;">-</span><span style="color: black;">annotations</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><br /> <span style="color: #ce5c00; font-weight: bold;">})</span><br /><br /> <span style="color: black;">compile</span> <span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: black;">com</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">android</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">support</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black;">appcompat</span><span style="color: #ce5c00; font-weight: bold;">-</span><span style="color: #f57900;">v7:</span><span style="color: #0000cf; font-weight: bold;">25.3</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #0000cf; font-weight: bold;">1</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><br /> <span style="color: black;">compile</span> <span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: black;">com</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">android</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">support</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">constraint</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black;">constraint</span><span style="color: #ce5c00; font-weight: bold;">-</span><span style="color: #f57900;">layout:</span><span style="color: #0000cf; font-weight: bold;">1.0</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #0000cf; font-weight: bold;">2</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><br /> <span style="color: #8f5902; font-style: italic;">//Recycler view library -- its version should be similar as appcompact.</span><br /> <span style="color: #8f5902; font-style: italic;">// It can also be used as</span><br /> <span style="color: #8f5902; font-style: italic;">//compile 'com.android.support:recyclerview-v7:25.+'</span><br /> <span style="color: black;">compile</span> <span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: black;">com</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">android</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">support</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black;">recyclerview</span><span style="color: #ce5c00; font-weight: bold;">-</span><span style="color: #f57900;">v7:</span><span style="color: #0000cf; font-weight: bold;">25.3</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #0000cf; font-weight: bold;">1</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><br /><br /> <span style="color: black;">testCompile</span> <span style="border: 1px solid #ef2929; color: #a40000;">'</span><span style="color: #f57900;">junit:junit:</span><span style="color: #0000cf; font-weight: bold;">4.12</span><span style="border: 1px solid #ef2929; color: #a40000;">'</span><br /><span style="color: #ce5c00; font-weight: bold;">}</span><br />

 

# Add the Recycler view to the layout.

Open your layout file and add the View.

<!– HTML generated using hilite.me –>

1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br />10<br />11<br />12<br />13<br />14<br />15<br />16

<span style="color: #ce5c00; font-weight: bold;"><?</span><span style="color: black;">xml</span> <span style="color: black;">version</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"1.0"</span> <span style="color: black;">encoding</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"utf-8"</span><span style="color: #ce5c00; font-weight: bold;">?></span><br /><span style="color: #ce5c00; font-weight: bold;"><</span><span style="color: black;">RelativeLayout</span> <span style="color: #f57900;">xmlns:</span><span style="color: black;">android</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"http://schemas.android.com/apk/res/android"</span><br /> <span style="color: #f57900;">xmlns:</span><span style="color: black;">app</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"http://schemas.android.com/apk/res-auto"</span><br /> <span style="color: #f57900;">xmlns:</span><span style="color: black;">tools</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"http://schemas.android.com/tools"</span><br /> <span style="color: #f57900;">android:</span><span style="color: black;">layout_width</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"match_parent"</span><br /> <span style="color: #f57900;">android:</span><span style="color: black;">layout_height</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"match_parent"</span><br /> <span style="color: #f57900;">tools:</span><span style="color: black;">context</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"skd.app.androidfeatures.sRecylerView.RecylerActivity"</span><span style="color: #ce5c00; font-weight: bold;">></span><br /><br /> <span style="color: #ce5c00; font-weight: bold;"><!--</span><br /> <span style="color: #ce5c00; font-weight: bold;"><</span><span style="color: black;">android</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">support</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">v7</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">widget</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">RecyclerView</span><br /> <span style="color: #f57900;">android:</span><span style="color: black;">id</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"@+id/my_recycler_view"</span><br /> <span style="color: #f57900;">android:</span><span style="color: black;">scrollbars</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"vertical"</span><br /> <span style="color: #f57900;">android:</span><span style="color: black;">layout_width</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"match_parent"</span><br /> <span style="color: #f57900;">android:</span><span style="color: black;">layout_height</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"match_parent"</span><span style="color: #ce5c00; font-weight: bold;">/></span><br /><br /><span style="color: #ce5c00; font-weight: bold;"></</span><span style="color: black;">RelativeLayout</span><span style="color: #ce5c00; font-weight: bold;">></span><br />

 

# 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<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35

<span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.support.v7.app.AppCompatActivity</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.os.Bundle</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.support.v7.widget.LinearLayoutManager</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.support.v7.widget.RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">skd.app.androidfeatures.R</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><br /><span style="color: #204a87; font-weight: bold;">public</span> <span style="color: #204a87; font-weight: bold;">class</span> <span style="color: black;">RecylerActivity</span> <span style="color: #204a87; font-weight: bold;">extends</span> <span style="color: black;">AppCompatActivity</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /><br /><br /> <span style="color: #8f5902; font-style: italic;">//Below are the componets which are required by the Recycler view</span><br /> <span style="color: black;">RecyclerView</span> <span style="color: black;">recyclerView</span><span style="color: #ce5c00; font-weight: bold;">;</span> <span style="color: #8f5902; font-style: italic;">//this will hold the recycler view from the layout</span><br /> <span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">Adapter</span> <span style="color: black;">mAdapter</span><span style="color: #ce5c00; font-weight: bold;">;</span> <span style="color: #8f5902; font-style: italic;">//this will hold the adapter for the recycler view</span><br /> <span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">LayoutManager</span> <span style="color: black;">mLayoutmanager</span><span style="color: #ce5c00; font-weight: bold;">;</span> <span style="color: #8f5902; font-style: italic;">//holds the layout manager</span><br /><br /> <span style="color: #204a87; font-weight: bold;">protected</span> <span style="color: #204a87; font-weight: bold;">void</span> <span style="color: black;">onCreate</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">Bundle</span> <span style="color: black;">savedInstanceState</span><span style="color: #ce5c00; font-weight: bold;">)</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: #204a87; font-weight: bold;">super</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">onCreate</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">savedInstanceState</span><span style="color: #ce5c00; font-weight: bold;">);</span><br /><br /> <span style="color: black;">setContentView</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">R</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">layout</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">activity_recyler</span><span style="color: #ce5c00; font-weight: bold;">);</span> <span style="color: #8f5902; font-style: italic;">//layout which contain the recycler view</span><br /><br /> <span style="color: #8f5902; font-style: italic;">//Find the Recycler view</span><br /> <span style="color: black;">recyclerView</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">)</span><span style="color: black;">findViewById</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">R</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">id</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">my_recycler_view</span><span style="color: #ce5c00; font-weight: bold;">);</span> <span style="color: #8f5902; font-style: italic;">//got the recycler view from the layout</span><br /><br /> <span style="color: #8f5902; font-style: italic;">//set the layout manager for the recycler view</span><br /> <span style="color: #8f5902; font-style: italic;">//standard layout managers( LinearLayoutManager or GridLayoutManager) can be used, or implement your own.</span><br /> <span style="color: #8f5902; font-style: italic;">//Layout Manager tells how the item are shown in your Recycler View</span><br /> <span style="color: black;">mLayoutmanager</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">new</span> <span style="color: black;">LinearLayoutManager</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: #204a87; font-weight: bold;">this</span><span style="color: #ce5c00; font-weight: bold;">);</span><br /> <span style="color: black;">recyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">setLayoutManager</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">mLayoutmanager</span><span style="color: #ce5c00; font-weight: bold;">);</span><br /><br /> <span style="color: #8f5902; font-style: italic;">//set the data adapter</span><br /> <span style="color: #8f5902; font-style: italic;">//Adapter contain the Data Which need to be shown in the view</span><br /> <span style="color: black;">mAdapter</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">new</span> <span style="color: black;">RvDataAdpt</span><span style="color: #ce5c00; font-weight: bold;">();</span><br /> <span style="color: black;">recyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">setAdapter</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">mAdapter</span><span style="color: #ce5c00; font-weight: bold;">);</span><br /> <span style="color: #ce5c00; font-weight: bold;">}</span><br /><span style="color: #ce5c00; font-weight: bold;">}</span><br />

 

#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<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br />10<br />11<br />12<br />13<br />14

<span style="color: #8f5902; font-style: italic;"><?xml version="1.0" encoding="utf-8"?></span><br /><span style="color: #204a87; font-weight: bold;"><LinearLayout</span> <span style="color: #c4a000;">xmlns:android=</span><span style="color: #4e9a06;">"http://schemas.android.com/apk/res/android"</span><br /> <span style="color: #c4a000;">android:layout_width=</span><span style="color: #4e9a06;">"match_parent"</span><br /> <span style="color: #c4a000;">android:layout_height=</span><span style="color: #4e9a06;">"wrap_content"</span><br /> <span style="color: #c4a000;">android:layout_marginTop=</span><span style="color: #4e9a06;">"10dp"</span><br /> <span style="color: #c4a000;">android:orientation=</span><span style="color: #4e9a06;">"vertical"</span><span style="color: #204a87; font-weight: bold;">></span><br /><br /> <span style="color: #204a87; font-weight: bold;"><TextView</span><br /> <span style="color: #c4a000;">android:id=</span><span style="color: #4e9a06;">"@+id/textView"</span><br /> <span style="color: #c4a000;">android:layout_width=</span><span style="color: #4e9a06;">"match_parent"</span><br /> <span style="color: #c4a000;">android:layout_height=</span><span style="color: #4e9a06;">"wrap_content"</span><br /> <span style="color: #c4a000;">android:text=</span><span style="color: #4e9a06;">"Hii "</span><br /> <span style="color: #c4a000;">android:textSize=</span><span style="color: #4e9a06;">"30sp"</span> <span style="color: #204a87; font-weight: bold;">/></span><br /><span style="color: #204a87; font-weight: bold;"></LinearLayout></span><br />

 

# 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<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28

<span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.support.v7.widget.RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.view.LayoutInflater</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.view.View</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.view.ViewGroup</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">skd.app.androidfeatures.R</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><br /><span style="color: #8f5902; font-style: italic;">/**</span><br /><span style="color: #8f5902; font-style: italic;"> * THis class will be the data adapter for the recycler view</span><br /><span style="color: #8f5902; font-style: italic;"> * This class must exxtend the Recycler view adapter.</span><br /><span style="color: #8f5902; font-style: italic;"> */</span><br /><span style="color: #204a87; font-weight: bold;">public</span> <span style="color: #204a87; font-weight: bold;">class</span> <span style="color: black;">RvDataAdpt</span> <span style="color: #204a87; font-weight: bold;">extends</span> <span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">Adapter</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: #5c35cc; font-weight: bold;">@Override</span><br /> <span style="color: #204a87; font-weight: bold;">public</span> <span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">ViewHolder</span> <span style="color: black;">onCreateViewHolder</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">ViewGroup</span> <span style="color: black;">parent</span><span style="color: #ce5c00; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">int</span> <span style="color: black;">viewType</span><span style="color: #ce5c00; font-weight: bold;">)</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /><br /> <span style="color: #204a87; font-weight: bold;">return</span> <span style="color: #204a87; font-weight: bold;">null</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /> <span style="color: #ce5c00; font-weight: bold;">}</span><br /><br /> <span style="color: #5c35cc; font-weight: bold;">@Override</span><br /> <span style="color: #204a87; font-weight: bold;">public</span> <span style="color: #204a87; font-weight: bold;">void</span> <span style="color: black;">onBindViewHolder</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">ViewHolder</span> <span style="color: black;">holder</span><span style="color: #ce5c00; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">int</span> <span style="color: black;">position</span><span style="color: #ce5c00; font-weight: bold;">)</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /><br /> <span style="color: #ce5c00; font-weight: bold;">}</span><br /><br /> <span style="color: #5c35cc; font-weight: bold;">@Override</span><br /> <span style="color: #204a87; font-weight: bold;">public</span> <span style="color: #204a87; font-weight: bold;">int</span> <span style="color: black;">getItemCount</span><span style="color: #ce5c00; font-weight: bold;">()</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: #204a87; font-weight: bold;">return</span> <span style="color: #0000cf; font-weight: bold;">0</span><span style="color: #ce5c00; font-weight: bold;">;</span> <br /> <span style="color: #ce5c00; font-weight: bold;">}</span><br /><span style="color: #ce5c00; font-weight: bold;">}</span><br />

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.

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<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42

<span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.support.v7.widget.RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.view.LayoutInflater</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.view.View</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">android.view.ViewGroup</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><br /><span style="color: #204a87; font-weight: bold;">import</span> <span style="color: black;">skd.app.androidfeatures.R</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /><br /><span style="color: #8f5902; font-style: italic;">/**</span><br /><span style="color: #8f5902; font-style: italic;"> * THis class will be the data adapter for the recycler view</span><br /><span style="color: #8f5902; font-style: italic;"> * This class must exxtend the Recycler view adapter.</span><br /><span style="color: #8f5902; font-style: italic;"> */</span><br /><span style="color: #204a87; font-weight: bold;">public</span> <span style="color: #204a87; font-weight: bold;">class</span> <span style="color: black;">RvDataAdpt</span> <span style="color: #204a87; font-weight: bold;">extends</span> <span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">Adapter</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: #5c35cc; font-weight: bold;">@Override</span><br /> <span style="color: #204a87; font-weight: bold;">public</span> <span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">ViewHolder</span> <span style="color: black;">onCreateViewHolder</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">ViewGroup</span> <span style="color: black;">parent</span><span style="color: #ce5c00; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">int</span> <span style="color: black;">viewType</span><span style="color: #ce5c00; font-weight: bold;">)</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /><br /> <span style="color: #8f5902; font-style: italic;">//lets populate our recyler view with the item created;</span><br /> <span style="color: #8f5902; font-style: italic;">//get the view from the layout inflator</span><br /> <span style="color: #8f5902; font-style: italic;">// third parameter is set to false to prevent viewgroup to attach to root</span><br /> <span style="color: black;">View</span> <span style="color: black;">view</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">LayoutInflater</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">from</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">parent</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">getContext</span><span style="color: #ce5c00; font-weight: bold;">()).</span><span style="color: #c4a000;">inflate</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">R</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">layout</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">recycler_item</span><span style="color: #ce5c00; font-weight: bold;">,</span><span style="color: black;">parent</span><span style="color: #ce5c00; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">false</span><span style="color: #ce5c00; font-weight: bold;">);</span><br /><br /> <span style="color: #8f5902; font-style: italic;">// as this method need to return the viewHolder type</span><br /> <span style="color: #8f5902; font-style: italic;">// need to convert our view to the view holder</span><br /> <span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">ViewHolder</span> <span style="color: black;">viewHolder</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">new</span> <span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">ViewHolder</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">view</span><span style="color: #ce5c00; font-weight: bold;">)</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: #5c35cc; font-weight: bold;">@Override</span><br /> <span style="color: #204a87; font-weight: bold;">public</span> <span style="color: black;">String</span> <span style="color: black;">toString</span><span style="color: #ce5c00; font-weight: bold;">()</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: #204a87; font-weight: bold;">return</span> <span style="color: #204a87; font-weight: bold;">super</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">toString</span><span style="color: #ce5c00; font-weight: bold;">();</span><br /> <span style="color: #ce5c00; font-weight: bold;">}</span><br /> <span style="color: #ce5c00; font-weight: bold;">};</span><br /> <span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black;">viewHolder</span><span style="color: #ce5c00; font-weight: bold;">;</span><br /> <span style="color: #ce5c00; font-weight: bold;">}</span><br /><br /> <span style="color: #5c35cc; font-weight: bold;">@Override</span><br /> <span style="color: #204a87; font-weight: bold;">public</span> <span style="color: #204a87; font-weight: bold;">void</span> <span style="color: black;">onBindViewHolder</span><span style="color: #ce5c00; font-weight: bold;">(</span><span style="color: black;">RecyclerView</span><span style="color: #ce5c00; font-weight: bold;">.</span><span style="color: #c4a000;">ViewHolder</span> <span style="color: black;">holder</span><span style="color: #ce5c00; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">int</span> <span style="color: black;">position</span><span style="color: #ce5c00; font-weight: bold;">)</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /><br /> <span style="color: #ce5c00; font-weight: bold;">}</span><br /><br /> <span style="color: #5c35cc; font-weight: bold;">@Override</span><br /> <span style="color: #204a87; font-weight: bold;">public</span> <span style="color: #204a87; font-weight: bold;">int</span> <span style="color: black;">getItemCount</span><span style="color: #ce5c00; font-weight: bold;">()</span> <span style="color: #ce5c00; font-weight: bold;">{</span><br /> <span style="color: #8f5902; font-style: italic;">//this defined how many items need to be displayed</span><br /> <span style="color: #204a87; font-weight: bold;">return</span> <span style="color: #0000cf; font-weight: bold;">3000</span><span style="color: #ce5c00; font-weight: bold;">;</span> <span style="color: #8f5902; font-style: italic;">// to display the 3000 items</span><br /> <span style="color: #ce5c00; font-weight: bold;">}</span><br /><span style="color: #ce5c00; font-weight: bold;">}</span><br />

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

LEAVE A REPLY