- Simple interface for expressing your data via fast scroll indicators
- Shows text and icons
- Works with standard RecyclerViews and in any layout
- Supports styling
- Haptic feedback
- Kotlin ♥
Add the dependency to your app's build.gradle:
implementation 'com.reddit:indicator-fast-scroll:1.4.0'implementation 'com.reddit:indicator-fast-scroll:1.0.1'Then, add the fast scroller to the layout with your RecyclerView:
<com.reddit.indicatorfastscroll.FastScrollerView
android:id="@+id/fastscroller"
android:layout_width="32dp"
android:layout_height="match_parent"
/>Typically, you'll want to place the fast scroller on the right edge of your RecyclerView, but it can be placed anywhere.
When setting up your views, call setupWithRecyclerView() to wire up the FastScrollerView to your RecyclerView.
fastScrollerView.setupWithRecyclerView(
recyclerView,
{ position ->
val item = data[position] // Get your model object
// or fetch the section at [position] from your database
FastScrollItemIndicator.Text(
item.title.substring(0, 1).toUpperCase() // Grab the first letter and capitalize it
) // Return a text indicator
}
)fastScrollerView.setupWithRecyclerView(
recyclerView,
(position) -> {
ItemModel item = data.get(position); // Get your model object
// or fetch the section at [position] from your database
return new FastScrollItemIndicator.Text(
item.getTitle().substring(0, 1).toUpperCase() // Grab the first letter and capitalize it
); // Return a text indicator
}
);🎉 That's all for basic setup! Your list should now have a working fast scroller.
There's also an optional companion view that shows a hovering "thumb" next to the user's finger when the fast scroller is being used. To use it, add it to your layout:
<com.reddit.indicatorfastscroll.FastScrollerThumbView
android:id="@+id/fastscroller_thumb"
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_alignBottom="@+id/fastscroller"
android:layout_alignTop="@+id/fastscroller"
android:layout_marginEnd="16dp"
android:layout_toStartOf="@+id/fastscroller"
/>It should be placed alongside the fast scroller. The exact layout hierarchy doesn't matter, but the thumb view's top and bottom should be aligned with the fast scroller's.
Then, set up the thumb:
fastScrollerThumbView.setupWithFastScroller(fastScrollerView)When setting up the fast scroller with your RecyclerView, you have to provide a mapping function that returns the fast scroll indicator that's desired (if any) to represent a section in the list.
In this function, return a Text if you want this position's section to be represented by a text indicator (typically its starting letter for an alphabetical list), return an Icon if you want an icon, or return null if you don't want this section to be shown in the fast scroller.
Indicators in the fast scroller won't have any duplicates. You should return identical FastScrollItemIndicators for each item in your list that belongs to the same section. This often happens implicitly; if your database model contains a section field and you create a FastScrollItemIndicator.Text based on it, all items with the same section will be grouped together in the fast scroller. Similarly, if a list is alphabetical, creating a FastScrollItemIndicator.Text with the first letter of each item's name will result in all items starting with the same letter to be grouped together.
The fast scroller observes your RecyclerView's adapter's data, and will call your mapping function for each list position whenever the data has changed. Here's a sample.
The fast scroller and thumb view support standard attributes that can be set in an XML layout or a custom style.
fastScrollerIconSize: How large icon indicators should befastScrollerIconColor: Color or ColorStateList for tinting icon indicators (supportsstate_pressed="true")android:textAppearance: Text appearance for text indicatorsandroid:textColor: Color or ColorStateList for text indicators (supportsstate_pressed="true")fastScrollerTextPadding: Dimension for vertical padding applied to text indicators
fastScrollerThumbColor: Color for the background of the thumb circlefastScrollerIconSize: How large the currently selected icon indicator should befastScrollerIconColor: Color for tinting the currently selected icon indicatorandroid:textAppearance: Text appearance for the currently selected text indicatorandroid:textColor: Color for the currently selected text indicator
These can be set in an XML layout, style, or theme. Here's a sample.
The fast scroller can be set up to filter out certain indicators from being shown. showIndicator is a predicate that you can supply (either during setupWithRecyclerView() or at a later time) that lets you determine whether or not each indicator should be shown. For example, this can be used to hide some indicators if the screen is too short to fit them all. Here's a sample.
By default, the fast scroller handles scrolling the RecyclerView to the right section when it's pressed. However, in case you want to override this behavior, you can set useDefaultScroller to false and set up a callback with the fast scroller to handle it yourself.
fastScrollerView.useDefaultScroller = false
fastScrollerView.itemIndicatorSelectedCallbacks += object : FastScrollerView.ItemIndicatorSelectedCallback {
override fun onItemIndicatorSelected(
indicator: FastScrollItemIndicator,
indicatorCenterY: Int,
itemPosition: Int
) {
// Handle scrolling
}
}fastScrollerView.setUseDefaultScroller(false);
fastScrollerView.getItemIndicatorSelectedCallbacks().add(
new FastScrollerView.ItemIndicatorSelectedCallback() {
@Override
public void onItemIndicatorSelected(
FastScrollItemIndicator indicator,
int indicatorCenterY,
int itemPosition
) {
// Handle scrolling
}
}
);