Introduction to Android RecyclerView
Introduction to RecyclerView
A recyclerview is a widget that is used to display a list of items. The items can be scrolled and their numbers might vary depending on the size of the data provided. A recyclerview is an advanced widget which was developed combining the features of ListView and GridLayout.
The advantage of using a recyclerview is that it creates views on run time meaning that a recyclerview will not make all the items of the list and store it in the memory instead it will create the items when the user scrolls to it, which means that a recyclerview does not choke the main UI thread with the task of creating views. This feat is achieved by using a Viewholder.
Now let’s get moving to making our own recyclerview.
To make a recyclerview we will need to understand some of its components:
- Adapter
- View holder
- Layout Manager
Adapter:
The adapter is the component that is responsible for taking the data from the data source and passing it to the layout manager to be shown on the screen.
View Holder:
The view holder is responsible for setting the data to the view. A recycler view will create only enough viewholder objects to populate the screen and the rest it will recycle hence the name recyclerview.
LayoutManager:
A layout Manager is a class that is responsible for showing the data on the screen. There are different types of layout managers, such as
- Linear Layout manager
- Grid layout manager
- Staggered Grid layout manager
Now we move to actual coding for a recycler view
To start off we must first add the dependency in the app level gradle file
implementation “androidx.recyclerview:recyclerview:1.1.0”
The next thing we will need are the xml views that we will create. Following is the layout for the recyclerview item named “recyclerview_item”.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
xmlns:tools=”http://schemas.android.com/tools"
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:padding=”12dp”>
<TextView
android:id=”@+id/textView”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:textColor=”#000000"
android:textSize=”12sp”
android:textStyle=”bold”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent”
tools:text=”Dummy Text” />
</androidx.constraintlayout.widget.ConstraintLayout>
Similarly we will also create the xml layout of the Main Activity
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
xmlns:tools=”http://schemas.android.com/tools"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”>
<androidx.recyclerview.widget.RecyclerView
android:id=”@+id/recyclerview”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Now we will create the adapter class that will bring our recyclerview to life
class CustomAdapter : RecyclerView.Adapter<CustomAdapter.CustomViewHolder>() {
private var data = ArrayList<String>()
class CustomViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bind(s: String) {
itemView.textView.text = s
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder =
CustomViewHolder(
LayoutInflater.from(parent.context).inflate(R.layout.recyclerview_item, parent, false)
)
override fun getItemCount(): Int = data.size
override fun onBindViewHolder(holder: CustomViewHolder, position: Int) {
holder.bind(data[position])
}
fun setData(data:ArrayList<String>){
this.data = data
notifyDataSetChanged()
}
}
Here we see that the Customdapter.kt class contains an inner class named “CustomViewHolder”. This is our view holder class that will bind the data to the views, as seen in the function bind(s:String).
Apart from the bind() function we see some overridden functions in the adapter. These functions need to be overridden in every adapter. Lets see what each one of the functions do.
onCreateViewHolder creates an object of the viewholder.
onBindViewHolder binds data from the data set to the viewholder object.
getItemCount returns the number of objects that will be displayed in the recyclerview.
Now let’s make our MainActivity that will attach the adapter to the widget.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//SETTING THE LAYOUT MANAGER
recyclerview.layoutManager = LinearLayoutManager(this)
//INITIALIZING THE ADAPTER
val adapter = CustomAdapter()
//SETTING THE DATA FOR THE RECYCLERVIEW
adapter.setData(arrayListOf(“NewYork”,”London”,”Paris”,”Moscow”,”Karachi”,”Singapore”))
//SETTING THE ADAPTER TO THE RECYCLERVIEW
recyclerview.adapter = adapter
}
}
Now that the recyclerview is all set just fire up the app and see your recyclerview in action.
