1. Support Older Versions
At the time of writing, less than 2% of Android devices run Android Lollipop. However, thanks to the v7 Support Library, you can use the
RecyclerView andCardView widgets on devices that run older versions of Android by adding the following lines to the dependencies section in your project's build.grade file:
1
2
| compile 'com.android.support:cardview-v7:21.0.+'compile 'com.android.support:recyclerview-v7:21.0.+' |
2. Creating a cardview
A
CardView is a ViewGroup. Like any other ViewGroup, it can be added to yourActivity or Fragment using a layout XML file.
To create an empty
CardView, you would have to add the following code to your layout XML as shown in the following snippet:
1
2
3
4
5
6
| <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"></android.support.v7.widget.CardView> |
As a more realistic example, let us now create a
LinearLayout and place aCardView inside it. The CardView could represent, for example, a person and contain the following:- a
TextViewto display the name of the person - a
TextViewto display the person's age - an
ImageViewto display the person's photo
This is what the XML would look like:
01
02
03
04
05
06
07
08
09
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
43
44
45
46
47
48
49
| <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" > <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/cv" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/person_photo" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginRight="16dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/person_name" android:layout_toRightOf="@+id/person_photo" android:layout_alignParentTop="true" android:textSize="30sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/person_age" android:layout_toRightOf="@+id/person_photo" android:layout_below="@+id/person_name" /> </RelativeLayout> </android.support.v7.widget.CardView></LinearLayout> |
If this XML is used as the layout of an
Activity, with the TextView andImageView fields are set to meaningful values, then this is how it would render on an Android device:
3. Creating a Recyclerview
Step 1: Defining It in a Layout
Using a
RecyclerView instance is slightly more complicated. However, defining it in a layout XML file is quite simple. You can define it in a layout as follows:
1
2
3
4
5
| <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/rv" /> |
To obtain a handle to it in your
Activity, use the following snippet:
1
| RecyclerView rv = (RecyclerView)findViewById(R.id.rv); |
If you are sure that the size of the
RecyclerView won't be changing, you can add the following to improve performance:
1
| rv.setHasFixedSize(true); |
Step 2: Using a LayoutManager
Unlike a
ListView, a RecyclerView needs a LayoutManager to manage the positioning of its items. You could define your own LayoutManager by extending theRecyclerView.LayoutManager class. However, in most cases, you could simply use one of the predefined LayoutManager subclasses:LinearLayoutManagerGridLayoutManagerStaggeredGridLayoutManager
In this tutorial, I am going to use a
LinearLayoutManager. ThisLayoutManager subclass will, by default, make your RecyclerView look like aListView.
1
2
| LinearLayoutManager llm = new LinearLayoutManager(context);rv.setLayoutManager(llm); |
Step 3: Defining the Data
Just like a
ListView, a RecyclerView needs an adapter to access its data. But before we create an adapter, let us create data that we can work with. Create a simple class to represent a person and then write a method to initialize a List ofPerson objects:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| class Person { String name; String age; int photoId; Person(String name, String age, int photoId) { this.name = name; this.age = age; this.photoId = photoId; }}private List// This method creates an ArrayList that has three Person objects// Checkout the project associated with this tutorial on Github if// you want to use the same images.private void initializeData(){ persons = new ArrayList<>(); persons.add(new Person("Emma Wilson", "23 years old", R.drawable.emma)); persons.add(new Person("Lavery Maiss", "25 years old", R.drawable.lavery)); persons.add(new Person("Lillie Watts", "35 years old", R.drawable.lillie));} |
Step 4: Creating an Adapter
To create an adapter that a
RecyclerView can use, you must extendRecyclerView.Adapter. This adapter follows the view holder design pattern, which means that it you to define a custom class that extendsRecyclerView.ViewHolder. This pattern minimizes the number of calls to the costly findViewById method.
Earlier in this tutorial, we already defined the XML layout for a
CardView that represents a person. We are going to reuse that layout now. Inside the constructor of our custom ViewHolder, initialize the views that belong to the items of ourRecyclerView.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
| public class RVAdapter extends RecyclerView.Adapter public static class PersonViewHolder extends RecyclerView.ViewHolder { CardView cv; TextView personName; TextView personAge; ImageView personPhoto; PersonViewHolder(View itemView) { super(itemView); cv = (CardView)itemView.findViewById(R.id.cv); personName = (TextView)itemView.findViewById(R.id.person_name); personAge = (TextView)itemView.findViewById(R.id.person_age); personPhoto = (ImageView)itemView.findViewById(R.id.person_photo); } }} |
Next, add a constructor to the custom adapter so that it has a handle to the data that the
RecyclerView displays. As our data is in the form of a List of Personobjects, use the following code:
1
2
3
4
5
| ListRVAdapter(List this.persons = persons;} |
RecyclerView.Adapter has three abstract methods that we must override. Let us start with the getItemCount method. This should return the number of items present in the data. As our data is in the form of a List, we only need to call thesize method on the List object:
1
2
3
4
| @Overridepublic int getItemCount() { return persons.size();} |
Next, override the
onCreateViewHolder method. As its name suggests, this method is called when the custom ViewHolder needs to be initialized. We specify the layout that each item of the RecyclerView should use. This is done by inflating the layout using LayoutInflater, passing the output to the constructor of the custom ViewHolder.
1
2
3
4
5
6
| @Overridepublic PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false); PersonViewHolder pvh = new PersonViewHolder(v); return pvh;} |
Override the
onBindViewHolder to specify the contents of each item of theRecyclerView. This method is very similar to the getView method of aListView's adapter. In our example, here's where you have to set the values of the name, age, and photo fields of the CardView.
1
2
3
4
5
6
| @Overridepublic void onBindViewHolder(PersonViewHolder personViewHolder, int i) { personViewHolder.personName.setText(persons.get(i).name); personViewHolder.personAge.setText(persons.get(i).age); personViewHolder.personPhoto.setImageResource(persons.get(i).photoId);} |
Finally, you need to override the
onAttachedToRecyclerView method. For now, we can simply use the superclass's implementation of this method as shown below.
1
2
3
4
| @Overridepublic void onAttachedToRecyclerView(RecyclerView recyclerView) { super.onAttachedToRecyclerView(recyclerView);} |
Step 5: Using the Adapter
Now that the adapter is ready, add the following code to your
Activity to initialize and use the adapter by calling the adapter's constructor and the RecyclerView'ssetAdapter method:
1
2
| RVAdapter adapter = new RVAdapter(persons);rv.setAdapter(adapter); |
Step 6: Compile and Run
When you run the
RecyclerView example on an Android device, you should see something similar to the following result.
TAGS :
Posts
.png)
COMMENTS