Customize your RecyclerView with SnapHelper

Some of you may have thought what is SnapHelper, what is it for? SnapHelper is a helper class to implement “snapping” in RecyclerView. It disables flings that RecyclerView normally does, and smoothly animates to the position like springs.

To archive this, you need to understand SnapHelper class.

Extends SnapHelper class, attach that to your RecyclerView. That’s all you have to do, and you will see your RecyclerView snapping smoothly just like the gif above.

SnapHelper class has three abstract methods to override.

  • CalculateDistanceToFinalSnap
  • findSnapView
  • findTargetSnapPosition

If you are too lazy to override these methods, I created a super-duper nice snapping Library that does everything for you.

Let’s dive into these methods and understand how it works.

CalculateDistanceToFinalSnap

// SnapHelper.java
@SuppressWarnings(
"WeakerAccess")
@Nullable
public abstract int[] calculateDistanceToFinalSnap(@NonNull LayoutManager layoutManager, @NonNull View targetView);

Inside calculateDistanceToFinalSnap, you need to return a distance between the final position and the location of the targeView.

If you want to snap to the start direction, you will return a distance between the left edge of the RecyclerView and the left edge of the targetView.

findSnapView

// SnapHelper.java
@SuppressWarnings(
"WeakerAccess")
@Nullable
public abstract View findSnapView(LayoutManager layoutManager);

The second abstract method is findSnapView. In this method, you have to return a view you want to snap and it will passed down to calculateDistanceToFinalSnap as a targetView.

Again, if you want to snap to the start direction, you need to return the closest view to the left edge.

findTargetSnapPosition

// SnapHelper.java
public
abstract int findTargetSnapPosition(LayoutManager layoutManager, int velocityX, int velocityY);

The last one is findTargetSnapPosition. You return a position of the view you want to snap in this method. The deference between findSnapView and findTargetSnapPosition is findSnapView will be called when RecyclerView finished scrolling or this SnapHelper is added to your RecyclerView first, while findTargetSnapPosition is called when RecyclerView is started flinging. Since the target view may have not been created when flinging, you return the position of the view instead of the view itself.

If you want your RecyclerView to be snapped to the left edge, you need to return the next position of the previous target view. The code would be like this below.

To return the findTargetSnapPosition, keep track of previous position as a variable. Every time findSnapView is called, just update the variable. Then you can simply return the next position.

After you have implemented these methods, you just create your SnapHelper class and attach to your RecyclerView.

That’s what’s all about! Enjoy your life with your own custom SnapHelper!

At last, let me introduce my Library again. What this does is you can snap your RecyclerView to the Start, Center or End direction and specify the snap count which is the number of the items to scroll over.

Please check this out. It would be really appreciated if you give me a star!