================================
Create a list with RecyclerView
================================
The ``RecyclerView`` widget is a more advanced and flexible version of ``ListView``.
It is used for displaying a scrolling list of elements based on large data sets.
This worksheet will create a scrolling list of users' names and their address.
Add RecyclerView to layout
===============================
#. Create a new empty project, and remove the *Hello World* TextView in :file:`activity_main.xml`.
#. Search ``RecyclerView`` in the Palette and drag it to :file:`activity_main.xml`.
Click *OK* when it asks to add the ``RecyclerView`` dependency.
Under the *Text* tab it should look something like this:
.. code-block:: xml
#. If there is error at
.. code-block:: xml
androidx.recyclerview.widget.RecyclerView
This can be removed by clicking the *infer constraint* button.
Create a layout for items in the list
=====================================
In this exercise, one item consists of a name and a corresponding address. This can be
modified to contain other information/pictures.
#. Click the *Text* tab and change
.. code-block:: xml
android:layout_height="match_parent"
to
.. code-block:: xml
android:layout_height="wrap_content"
By doing this, item will be placed under the previous one, otherwise, every new item will appear on a
new page.
#. Create a new layout resource file and name it :file:`item_layout.xml`.
#. Add a ``TextView`` and constrain the text box to the top and left of the layout
(with suitable margins).
Name ``id`` *"textViewName"*.
#. Similarly, add another ``TextView``. Constrain the top of the new text box to the bottom of the previous
text box, and constraint the right side of the new text box to the left of the layout.
Name ``id`` *"textViewAddress"*.
Create a data class
===================
Right-click on the ``com.example.yourProjectName`` folder and create a new Kotlin file called ``User``.
Create a data class ``User`` with 2 String parameters ``name`` and ``address``.
Create RecyclerView Adapter
===========================
#. Under the same folder where ``User`` data class was created, create a Kotlin class ``RecyclerViewAdapter``.
The class should be specified as below:
.. code-block:: kotlin
class RecyclerViewAdapter (val userList: ArrayList) : RecyclerView.Adapter(){
...
}
#. There are three functions required for ``RecyclerViewAdapter`` class.
.. code-block:: kotlin
override fun getItemCount(): Int {
return userList.size
}
``getItemCount()`` function provides the size of the list.
.. code-block:: kotlin
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val layoutInflater = LayoutInflater.from(parent.context)
val row = layoutInflater.inflate(R.layout.item_layout, parent, false)
return ViewHolder(row)
}
``LayoutInflater`` is used to instantiate layout XML file into its corresponding View objects.
``onCreateViewHolder`` function returns the view for each item in the list.
.. code-block:: kotlin
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.bindItems(userList[position])
}
``onBindViewHolder`` function is called for each ``ViewHolder`` to bind it to the adapter.
This is where data is passed to ``ViewHolder``.
#. Then create another class called ``ViewHolder`` inside the ``RecyclerViewAdapter`` class.
This class holds the list view.
.. code-block:: kotlin
class ViewHolder(itemView: View) :RecyclerView.ViewHolder(itemView){
fun bindItems(user: User) {
val textViewName = itemView.findViewById(R.id.textViewName) as TextView
val textViewAddress = itemView.findViewById(R.id.textViewAddress) as TextView
textViewName.text = user.name
textViewAddress.text = user.address
}
}
Create RecyclerView
===================
Now go to ``MainActivity.kt`` and write the following code inside ``onCreate`` function.
#. First, create a ``RecyclerView``:
.. code-block:: kotlin
val recyclerView = findViewById(R.id.RecyclerView) as RecyclerView
#. Then add a ``LayoutManager``. It is responsible for measuring and positioning item views
within a ``RecyclerView`` as well as determining the policy for when to recycle item views
that are no longer visible to the user. This one implements a standard *vertically* scrolling list.
.. code-block:: kotlin
recyclerView.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false)
#. Add data to the list:
.. code-block:: kotlin
val users = ArrayList()
users.add(User("user1", "address1"))
users.add(User("user2", "address2"))
users.add(User("user1", "address1"))
users.add(User("user2", "address2"))
users.add(User("user3", "address3"))
users.add(User("user4", "address4"))
users.add(User("user5", "address5"))
users.add(User("user6", "address6"))
users.add(User("user7", "address7"))
users.add(User("user8", "address8"))
users.add(User("user9", "address9"))
users.add(User("user10", "address10"))
users.add(User("user11", "address11"))
users.add(User("user12", "address12"))
users.add(User("user13", "address13"))
users.add(User("user14", "address14"))
users.add(User("user15", "address15"))
users.add(User("user16", "address16"))
users.add(User("user17", "address17"))
users.add(User("user18", "address18"))
users.add(User("user19", "address19"))
...
#. Create adapter and add it to ``RecyclerView``:
.. code-block:: kotlin
val adapter = RecyclerViewAdapter(users)
recyclerView.adapter = adapter
Run the app
===========
Click *Run* to install and run the app.
It should look like the pictures below on the Lenovo tablet.
.. figure:: screen_shot.jpg
:scale: 40 %
:align: center