Open In App

RecyclerView using ListView in Android With Example

Improve
Improve
Like Article
Like
Save
Share
Report

RecyclerView is more flexible and advanced version of ListView and GridView. RecyclerView is used for providing a limited window to a large data set, which means it is used to display a large amount of data that can be scrolled very efficiently by maintaining a limited number of Views. In RecyclerView we supply data and define how each item looks, and the RecyclerView library dynamically creates the content when it is needed. RecyclerView was introduced in Material Design in Android 5.0(API level 21.0).

How RecyclerView Works?

  • RecyclerView is a ViewGroup that contains Views corresponding to your data. It itself a View so, it is added to the layout file as any other UI element is added.
  • ViewHolder Object is used to define each individual element in the list. View holder does not contain anything when it created, RecyclerView binds data to it. ViewHolder is defined by extending RecyclerView.ViewHolder.
  • Adapters are used to bind data to the Views. RecyclerView request views, and binds the views to their data, by calling methods in the adapter. The adapter can be defined by extending RecyclerView.Adapter.
  • LayoutManager arranges the individual elements in the list. It contains the reference of all views that are filled by the data of the entry.

LayoutManager class of RecyclerView provide three types of built-in LayoutManagers

  • LinearLayoutManager: It is used for displaying Horizontal and Vertical List
  • GridLayoutManager: It is used for displaying items in the forms of grids
  • StaggeredGridLayoutManager: It is used for displaying items in form of staggered grids

Example

In this example, we are going to use RecyclerView as ListView. Here, we are going to display the list of courses with their images as a vertical list using RecyclerView.

Step by Step Implementation

Step 1: Create A New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add Dependency

We are going to use RecyclerView as ListView. So, we need to add the dependency for it. For adding the dependency Go to Gradle Scripts > build.gradle(Module: app) and add the following dependency. After adding the dependency click on Sync Now

dependencies {

  implementation “androidx.recyclerview:recyclerview:1.1.0”

}

Before moving further let’s add some color attributes in order to enhance the app bar. Go to app > res > values > colors.xml and add the following color attributes.  

XML




<resources>
    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#16E37F</color>
    <color name="colorAccent">#03DAC5</color>
</resources>


Step 3: Working with the activity_main.xml file

In this step, we will add a RecyclerView to our activity_main.xml file which is used to display data of listItems. Go to the app > res > layout > activity_main.xml and the following code snippet.

XML




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <!--RecyclerView-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 
</LinearLayout>


Step 4: Create a new layout file list_item.xml

In this step, we will create a new layout file for the single list item view. Go to app > res > layout > right-click > New > Layout Resource File and name it as list_item. list_item.xml contains an ImageView and a TextView which is used for populating the RecyclerView.

XML




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
 
    <!--For image src we have used ic_launcher
        and for text "courseName" they are used
        only for reference how it will looks"-->
    <ImageView
        android:id="@+id/courseImg"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:padding="8dp"
        android:src="@mipmap/ic_launcher_round" />
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center">
        <TextView
            android:id="@+id/courseName"
            android:text="courseName"
            android:textStyle="bold"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
 
</LinearLayout>


Step 5: Create a new Adapter class

Now, we will create an Adapter class that acts as a bridge between the UI Component and the Data Source .i.e., courseImg, courseName, and RecyclerView. Go to the app > java > package > right-click and create a new java class and name it as Adapter. Below is the code snippet given for it.

Java




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;
 
// Extends the Adapter class to RecyclerView.Adapter
// and implement the unimplemented methods
public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
    ArrayList courseImg, courseName;
    Context context;
 
    // Constructor for initialization
    public Adapter(Context context, ArrayList courseImg, ArrayList courseName) {
        this.context = context;
        this.courseImg = courseImg;
        this.courseName = courseName;
    }
 
    @NonNull
    @Override
    public Adapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflating the Layout(Instantiates list_item.xml
          // layout file into View object)
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
 
        // Passing view to ViewHolder
        Adapter.ViewHolder viewHolder = new Adapter.ViewHolder(view);
        return viewHolder;
    }
 
    // Binding data to the into specified position
    @Override
    public void onBindViewHolder(@NonNull Adapter.ViewHolder holder, int position) {
        // TypeCast Object to int type
        int res = (int) courseImg.get(position);
        holder.images.setImageResource(res);
        holder.text.setText((String) courseName.get(position));
    }
 
    @Override
    public int getItemCount() {
        // Returns number of items
          // currently available in Adapter
        return courseImg.size();
    }
 
    // Initializing the Views
    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView images;
        TextView text;
 
        public ViewHolder(View view) {
            super(view);
            images = (ImageView) view.findViewById(R.id.courseImg);
            text = (TextView) view.findViewById(R.id.courseName);
        }
    }
}


Step 6: Working with the MainActivity file

In MainActivity.java class we create two ArrayList for storing courseImg and courseName. These images are placed in the drawable folder(app > res > drawable). You can use any images in place of these. And then we get the reference RecyclerView and set the LayoutManager as LinearLayoutManager and Adapter, to show items in RecyclerView. Below is the code for the MainActivity.java file.

Java




import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.Arrays;
 
public class MainActivity extends AppCompatActivity {
 
    RecyclerView recyclerView;
 
    // Using ArrayList to store images data
    ArrayList courseImg = new ArrayList<>(Arrays.asList(R.drawable.data_structure, R.drawable.c_plus_plus,
                                                        R.drawable.c_hash, R.drawable.java_script,
                                                        R.drawable.java, R.drawable.c,
                                                        R.drawable.html, R.drawable.css));
    ArrayList courseName = new ArrayList<>(Arrays.asList("Data Structure", "C++", "C#", "JavaScript", "Java",
                                                         "C-Language", "HTML 5", "CSS"));
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // Getting reference of recyclerView
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
 
        // Setting the layout as linear
          // layout for vertical orientation
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext());
        recyclerView.setLayoutManager(linearLayoutManager);
 
        // Sending reference and data to Adapter
        Adapter adapter = new Adapter(MainActivity.this, courseImg, courseName);
 
        // Setting Adapter to RecyclerView
        recyclerView.setAdapter(adapter);
    }
}


Output: Run On Emulator

RecyclerView using ListView in Android



Last Updated : 14 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads