How to make a simple RecyclerView in Android Studio
In this blog, I’m going to explain how to make a RecyclerView in Java. It is used to display thousands of items as a list and is used in many Android applications like Playstore, Instagram, Facebook, etc.
Why RecyclerView?
The Android platform gives us two different types of views that can be leveraged to display lists of data — the ListView and the RecyclerView.
RecyclerView makes it easier to display large sets of data. It creates data dynamically, when needed and requires very less memory than ScrollView. It only creates as many views as required to fill the layout whereas ScrollView gets all the data at a time and causes the screen to get less responsive over time. As the user scrolls down, the items at the top will get replaced by the forthcoming items.
Implementation of RecyclerView
Step 1: Create an Android project in Android Studio.
Note that Java is selected as the programming language.
Step 2: Create a layout file containing RecyclerView as an element in the layout. It displays the data of the items in a list.
<?xml version="1.0" encoding="utf-8"?>
<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_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:layout_editor_absoluteX="-27dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Create a new layout file list_item.xml for a single list item view. This layout contains an ImageView and TextView.
The following is the code for the list_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_marginBottom="10dp"
tools:context=".list_item">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/ic_launcher" />
<TextView
android:id="@+id/imageinfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="192dp"
android:text="TextView"
android:textColor="@color/black"
android:textSize="22sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.101"
app:layout_constraintStart_toEndOf="@+id/image"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 4: Create an Adapter class that acts as a bridge between the data and layout elements.
Following is the code for the Adapter.java:
package com.example.recyclerview;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder>{
ArrayList Img, Name;
Context context;
// Constructor for initialization
public Adapter(Context context, ArrayList Img, ArrayList Name) {
this.context = context;
this.Img = Img;
this.Name = Name;
}
@NonNull
@Override
public Adapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_list_item, parent, false);
// Passing view to ViewHolder
Adapter.ViewHolder viewHolder = new Adapter.ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull Adapter.ViewHolder holder, int position) {
int res = (int) Img.get(position);
holder.images.setImageResource(res);
holder.text.setText(Name.get(position));
}
@Override
public int getItemCount() {
return Img.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
ImageView images;
TextView text;
public ViewHolder(View view) {
super(view);
images = itemView.findViewById(R.id.image);
text = itemView.findViewById(R.id.imageinfo);
}
}
}
The following are the methods used in the above code:
OnCreateViewHolder: RecyclerView calls this method whenever it needs to create a new ViewHolder. It creates and initializes the ViewHolder and its associated View, but does not fill in the view's contents.
OnBindViewHolder: RecyclerView calls this method to associate a ViewHolder with data. The method fetches the appropriate data and uses the data to fill in the view holder's layout.
getItemCount: RecyclerView calls this method to get the size of the data set.
Step 5: In the MainActivity.java class, we create two ArrayList for storing Img and Name. Images are added to a drawable folder, then we get the reference RecyclerView and set the LayoutManager as LinearLayoutManager and Adapter to show items in RecyclerView.
Following is the code for the MainActivity.java file.
package com.example.recyclerview;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.Arrays;
public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;
ArrayList Img = new ArrayList<>(Arrays.asList(R.drawable.apple, R.drawable.banana,
R.drawable.orange, R.drawable.watermelon,
R.drawable.jackfruit));
ArrayList Name = new ArrayList<>(Arrays.asList("Apple", "Banana", "Orange", "Watermelon", "Jackfruit"));
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recyclerview);
// layout for vertical orientation
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(linearLayoutManager);
// Sending reference and data to Adapter
Adapter adapter = new Adapter(MainActivity.this, Img, Name);
// Setting Adapter to RecyclerView
recyclerView.setAdapter(adapter);
}
}
A LayoutManager is responsible for measuring and positioning item views within a RecyclerView as well as determining the policy for when to recycle the item views that are no longer visible to the user.
The Android framework provides a few predefined layout managers that can be used to determine how the data would be displayed. The LayoutManagers are:
- LinearLayoutManager
- GridLayoutManager
- StaggeredGridLayoutManager
Since we want to display our data as a linear vertical list, we will use LinearLayoutManager.
Finally, we need to attach our Adapter.java to the RecyclerView by using the setAdapter() method.
Now, let's see the result:
If you have any questions or suggestions, leave a comment below and I’ll be happy to help in any way that I can.
Have a great day!
References:
RecyclerView using ListView in Android With Example — GeeksforGeeks