How to Use SnapHelper in RecyclerView in Android? - GeeksforGeeks

12 Apr, 2021
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. 
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. 
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 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:
Picked
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Resource Raw Folder in Android Studio
Broadcast Receiver in Android With Example
Android RecyclerView in Kotlin
Content Providers in Android with Example
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
HashMap in Java with Examples