================================ 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