Android RecyclerView to Display Datas

Hello again, here I will show you how to display a sets of data. With RecyclerView you can display how each item looks and it can dynamically create the elements when in needed (like when you scroll and the items is visible in your screen). Before move further, check last post I write before => Android App Rounded Corner Button. Note that I use kotlin language here because it’s recommended for new android project in 2021. Next, lets go!!!

Create Item Look

Create new layout for each item we will show, right click on layout -> New -> Layout Resource File

Here I name the layout as note_item. It will be a simple view, just TextView to display the item text.

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


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dim18"
        android:textSize="@dimen/sp18"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

It will look like below
Item layout content

Create Adapter for RecyclerView

You can create new folder to put all adapter together like me, but it is optional. Do it what you prefer for. Here I create new folder called adapter so you will see package com.alextrapixel.notelite.adapter on very top of code snippet below. Right click on package name in Project View and choose New -> Kotlin Class/File. I name it as NoteAdapter

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


package com.alextrapixel.notelite.adapter

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.alextrapixel.notelite.R

class NoteAdapter(val dataSet: Array<String>) : RecyclerView.Adapter<NoteAdapter.ViewHolder>() {
    class ViewHolder(itemView: View): RecyclerView.ViewHolder(itemView) {
        val tvTitle : TextView

        init {
            tvTitle = itemView.findViewById(R.id.tv_title)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.note_item, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.tvTitle.text = dataSet[position]
    }

    override fun getItemCount(): Int {
        return dataSet.size
    }
}

Here the explanation, class ViewHolder described the layout we create before to use in NoteAdapter. Then function onCreateViewHolder is to choose which layout we use, here we’ll user layout note_item and return the view.
OnBindViewHolder used for fill the data to the item views. In this case, dataSet as Array of String and we put each String item into tvTitle. Last one getItemCount is to show the data count.

Create RecyclerView in Activity Layout

Create new activity and here I name it as NotesActivity. Defaultly when you create new activity it also create new layout with layout name similar with the activity name.

Add RecyclerView to notes activity layout. Below the snippet code :

1
2
3
4
5
6


<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rv_note"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@id/appbar_layout"
    app:layout_constraintBottom_toBottomOf="parent"/>

Next in class NotesActivity get the RecyclerView, create a list of data, put adapter to RecyclerView, and give simple LinearLayoutManager to RecyclerView.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


package com.alextrapixel.notelite

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.alextrapixel.notelite.adapter.NoteAdapter

class NotesActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_notes)
        val rvNote : RecyclerView = findViewById(R.id.rv_note)

        val notes: MutableList<String> = ArrayList()
        notes.add("number one")
        notes.add("number two")
        notes.add("number three")
        val noteArr: Array<String> = notes.toTypedArray()

        val noteAdapter = NoteAdapter(noteArr)
        rvNote.adapter = noteAdapter
        rvNote.layoutManager = LinearLayoutManager(this)
    }
}

Next when you finished you can run the project and here it will look like
App result

Finally, 😅😅
Thats how we can use RecyclerView to display a sets of data, you can modify code above for any usage like list of image with description. Until here, see you guys in the next article. Hope this help when you start new code. 😉