Recycler View — 1
To create a recycle view, there are few steps to follow.
- Add dependency in build.gradle (Module).
implementation ‘androidx.recyclerview:recyclerview:<version>
2. Add recyclerview in activity_main.xml
3. Initialize recyclerview in MainActivity.java file. (referring to the RecyclerView created in step 2.)
4. Create the layout file for every item in our RecyclerView.
For instance here, create a new layout resource file named “contacts_list_item.xml”
In this file, we add a TextView, of which text is "Contact Name”
5. Create Adapter class. (By adding a new Java class)
First thing to do is to create an inner class (often named “ViewHolder”), which inherits RecyclerView.ViewHolder, and create its constructor. (shortcut: ALT + insert)
This ViewHolder is basically responsible for generating our view objects. In this case, it generates contact_list_item objects.
Next, we add all the elements in our layout file one by one. For this case, as defined in the previous layout file (in step 4. contacts_list_item), there is a TextView element on the left top corner. Hence, here we add a TextView, and initialize it in the constructor.
6. Extend the Adpater class to RecyclerView.Adapter (Type: The inner class, ViewHolder)
Note that the datatype means that, the final data type of this adapter would be the ViewHolder created in this Adapter.
And after extending to RecyclerView.Adapter, we need to implement 3 methods (shortcut: Ctrl + I ) and also create the constructor (shortcut: Alt + insert).
7. For this instance, we want to display multiple contacts inside the recycle view. So we create a new “Contact” class.
8. For this instance, we want to show a list of different contacts, we need to pass a list of contacts to the Adapter class.
Hence, we create an ArrayList of contacts in Adapter.
Then, we create the setter of it.
Note that, if the setter is used, it means that the data has changed. Aside from changing the list of contacts, remember to refresh the RecyclerView too. To do this, we add the line of code: modifyDataSetChanged();
Also, we can now modify the getItemCount method to return the size of dataset, which is the size of contacts.
9. Then, we can work on the overriden methods here. First, for the “onCreateViewHolder” method, it is for
generating an instance of ViewHolder class for every item in our RecyclerView
The first argument of this method is a ViewGroup, which is the parent of all the layout files (ex: Constraint, Relative…).
To create a ViewHolder, we first need to create a View object. (by using the LayoutInflater)
For the inflate method, the second argument is where we want to attach this View Object to. The last argument is whether we want to attach this View Object to the root. If we want to attach it to the parent instead of the root, we can leave it as “false”. Also, if you are not sure where to attach this View Object to yet, we can simply leave the 2nd argument “null”, and this inflate function can have only 2 arguments as well, which is → inflate(item, null)
10. Second, for the “onBindViewHolder” method. We can define some operations or listeners for the holder.
For instance, in our RecyclerView layout file, we have a txtName on the left-upper corner. We want this TextView to display the name of contact.
Hence, we have
11. Back to the Main_activity.java file, we start to create our database and the adapter.
For instance, we want to display multiple contacts, and thus we need multiple contacts data. Hence, we create an ArrayList of contacts here.
And then, we instantiate an adapter here, and get the list of contacts.
Then, recyclerView need to set its Adapter & LayoutManager.
Here, we set LinearLayoutManager to display our view in a linear fashion.
If you want to display it horizontally, you can add the 2nd argument: LinearLayoutManager.HORIZONTAL, and the 3rd argument: false
Or you can use GridLayoutManager
We set spanCount as 2, so we have two columns here.
12. Set onClickListner for each item in our recyclerview.
We need to do in the Adapter class -> onBindViewHolder. And we need to setOnClickListner for the whole layout.
Hence, as defined in our layout file, the RelativeLayout’s ID is “parent.”
And then we add this RelativeLayout in the ViewHolder inner class.
Then, we can define the parent’s onCilckListener as shown below.
Say, we want to show a Toast message when we click on the element. Toast.make() function needs a “context”, but there is no context in this adapter class. So, we need to pass the context from the constructor.
And then, we pass the context from MainActivity.java when we create our adapter.
And then, we can put this context to the 1st argument of Toast.makeText function.
Finally, each time we click on the item, it would display a Toast message showing the clicked name.
