How to Use SnapHelper in RecyclerView in Android?

SnapHelper is an amazing feature that is seen in RecyclerView. With the help of this feature, we can make the items of the RecyclerView properly visible. This feature of Recycler View is present in most of the apps, but it is not visible. This feature is generally seen in the Google Play application in which when we scroll the horizontal recycler view, we will get to see only a specific number of recycler view items visible. When we use normal recycler view we can get to see while scrolling some items are half present in the device screen. So to solve this issue in Android Recycler View. We have to use Snap Helper in our Recycler View. In this article, we will take a look at implementing this RecyclerView in our app. 

What is SnapHelper? 

SnapHelper is a helper class that is used to snap any child of our RecyclerView. With the help of this class, we can display the specific number of RecyclerView items on our screen, and we can avoid the RecyclerView children’s display inside our RecyclerView. This feature is generally seen in RecyclerView which is used in Google Play Store. 

What we are going to build in this article? 

We will be building a simple application in which we will be displaying the list of courses in our RecyclerView. In this RecyclerView we will be implementing the SnapHelper class feature to avoid the elements partially present in the user’s device. Below is the video in which we will get to see what we are going to build in this article. Note that we are going to implement this project using the Java language. 

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: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--adding recycler view in our app-->
    <androidx.recyclerview.widget.RecyclerView
      android:id="@+id/idRVCourses"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal" />

</RelativeLayout>

Step 3: Creating a modal class for storing our data

Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as CourseModal and add the below code to it. Comments are added in the code to get to know in more detail. 

Java

public class CourseModal {

    // variables for our course name, description and duration
    private String courseName;
    private String courseDescription;
    private String courseDuration;

    // constructor class.
    public CourseModal(String courseName, String courseDescription, String courseDuration) {
        this.courseName = courseName;
        this.courseDescription = courseDescription;
        this.courseDuration = courseDuration;
    }

    // getter and setter methods.
    public String getCourseName() {
        return courseName;
    }

    public void setCourseName(String courseName) {
        this.courseName = courseName;
    }

    public String getCourseDescription() {
        return courseDescription;
    }

    public void setCourseDescription(String courseDescription) {
        this.courseDescription = courseDescription;
    }

    public String getCourseDuration() {
        return courseDuration;
    }

    public void setCourseDuration(String courseDuration) {
        this.courseDuration = courseDuration;
    }
}

Step 4: Creating a new layout file for our item of RecyclerView

Navigate to the app > res > layout > Right-click on it > New > layout resource file and name it as course_rv_item and add below code to it. 

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    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"
    app:cardElevation="4dp"
    android:layout_margin="5dp"
    app:cardCornerRadius="6dp"
    android:id="@+id/idCVCOurseItem">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="4dp"
        android:layout_margin="2dp"
        >

        <!--Textview for displaying our Course Name-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/idTVCourseName"
            android:textColor="@color/purple_500"
            android:textSize="18sp"
            android:textStyle="bold"
            android:text="CourseName"
            android:padding="2dp"
            />

        <!--Textview for displaying our Course Duration-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/idTVCourseDuration"
            android:text="Duration"
            android:textColor="@color/black"
            android:padding="2dp"
            />

        <!--Textview for displaying our Course Description-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/idTVCourseDescription"
            android:text="Description"
            android:textColor="@color/black"
            android:padding="2dp"
            />
    </LinearLayout>

</androidx.cardview.widget.CardView>

Step 5: Creating an adapter class

Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as CourseRVAdapter and add the below code to it. Comments are added in the code to get to know in more detail. 

Java

import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class CourseRVAdapter extends RecyclerView.Adapter<CourseRVAdapter.ViewHolder> {
    private Context context;
    private ArrayList<CourseModal> courseModalArrayList;

    // creating a constructor class.
    public CourseRVAdapter(Context context, ArrayList<CourseModal> courseModalArrayList) {
        this.context = context;
        this.courseModalArrayList = courseModalArrayList;
    }

    @NonNull
    @Override
    public CourseRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // passing our layout file for displaying our card item
        return new ViewHolder(LayoutInflater.from(context).inflate(R.layout.course_rv_item, parent, false));

    }

    @Override
    public void onBindViewHolder(@NonNull CourseRVAdapter.ViewHolder holder, int position) {
        // setting data to our text views from our modal class.
        CourseModal courses = courseModalArrayList.get(position);
        holder.courseNameTV.setText(courses.getCourseName());
        holder.courseDurationTV.setText(courses.getCourseDuration());
        holder.courseDescTV.setText(courses.getCourseDescription());
    }

    @Override
    public int getItemCount() {
        return courseModalArrayList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our text views.
        private final TextView courseNameTV;
        private final TextView courseDurationTV;
        private final TextView courseDescTV;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing our text views.
            courseNameTV = itemView.findViewById(R.id.idTVCourseName);
            courseDurationTV = itemView.findViewById(R.id.idTVCourseDuration);
            courseDescTV = itemView.findViewById(R.id.idTVCourseDescription);
        }
    }
}

Step 6: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.LinearSnapHelper;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.SnapHelper;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    // creating variables for our recycler view, array list and adapter class.
    private RecyclerView coursesRV;
    private ArrayList<CourseModal> courseArrayList;
    private CourseRVAdapter courseRVAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // initializing our recycler view and array list.
        coursesRV = findViewById(R.id.idRVCourses);
        courseArrayList = new ArrayList<>();

        // on below line we are adding data to our array list.
        courseArrayList.add(new CourseModal("DSA", "DSA Self Paced Course", "90 days"));
        courseArrayList.add(new CourseModal("C++", "C++ Self Paced Course", "60 days"));
        courseArrayList.add(new CourseModal("Java", "Java Self Paced Course", "60 days"));
        courseArrayList.add(new CourseModal("Python", "Python Self Paced Course", "90 days"));
        courseArrayList.add(new CourseModal("PHP", "PHP Self Paced Course", "40 days"));
        courseArrayList.add(new CourseModal("DSA", "DSA Self Paced Course", "90 days"));
        courseArrayList.add(new CourseModal("C++", "C++ Self Paced Course", "60 days"));
        courseArrayList.add(new CourseModal("Java", "Java Self Paced Course", "60 days"));
        courseArrayList.add(new CourseModal("Python", "Python Self Paced Course", "90 days"));
        courseArrayList.add(new CourseModal("PHP", "PHP Self Paced Course", "40 days"));

        // calling a method to prepare our recycler view.
        prepareCourseRV();

        // on below line we are creating a new variable for
        // our snap helper class and initializing it for our Linear Snap Helper.
        SnapHelper snapHelper = new LinearSnapHelper();

        // on below line we are attaching this snap helper to our recycler view.
        snapHelper.attachToRecyclerView(coursesRV);
    }

    private void prepareCourseRV() {

        // on below line we are initializing our adapter class.
        courseRVAdapter = new CourseRVAdapter(this, courseArrayList);

          // on below line we are creating a variable for our linear layout manager.
        LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);

          // on below line we are setting layout manager to our recycler view.
        coursesRV.setLayoutManager(layoutManager);

          // on below line we are setting adapter to our recycler view.
        coursesRV.setAdapter(courseRVAdapter);
    }
}

Now run your app and see the output of the app.

Output: