• Stars
    star
    698
  • Rank 64,841 (Top 2 %)
  • Language
    Kotlin
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Android library providing a simple UI control for scrolling through RecyclerViews

Indicator Fast Scroll

by reddit

Features

  • 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 β™₯

Usage

Add the dependency to your app's build.gradle:

AndroidX:
implementation 'com.reddit:indicator-fast-scroll:1.4.0'
Pre-AndroidX (older projects):
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.

Kotlin:
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
    }
)
Java:
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)

Advanced usage

Mapping positions to indicators

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.

Styling

The fast scroller and thumb view support standard attributes that can be set in an XML layout or a custom style.

FastScrollerView
  • fastScrollerIconSize: How large icon indicators should be
  • fastScrollerIconColor: Color or ColorStateList for tinting icon indicators (supports state_pressed="true")
  • android:textAppearance: Text appearance for text indicators
  • android:textColor: Color or ColorStateList for text indicators (supports state_pressed="true")
  • fastScrollerTextPadding: Dimension for vertical padding applied to text indicators
FastScrollerThumbView
  • fastScrollerThumbColor: Color for the background of the thumb circle
  • fastScrollerIconSize: How large the currently selected icon indicator should be
  • fastScrollerIconColor: Color for tinting the currently selected icon indicator
  • android:textAppearance: Text appearance for the currently selected text indicator
  • android:textColor: Color for the currently selected text indicator

These can be set in an XML layout, style, or theme. Here's a sample.

Filtering out indicators

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.

Custom scroll handling

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.

Kotlin:
fastScrollerView.useDefaultScroller = false
fastScrollerView.itemIndicatorSelectedCallbacks += object : FastScrollerView.ItemIndicatorSelectedCallback {
  override fun onItemIndicatorSelected(
      indicator: FastScrollItemIndicator,
      indicatorCenterY: Int,
      itemPosition: Int
  ) {
    // Handle scrolling
  }
}
Java:
fastScrollerView.setUseDefaultScroller(false);
fastScrollerView.getItemIndicatorSelectedCallbacks().add(
    new FastScrollerView.ItemIndicatorSelectedCallback() {
        @Override
        public void onItemIndicatorSelected(
            FastScrollItemIndicator indicator,
            int indicatorCenterY,
            int itemPosition
        ) {
            // Handle scrolling
        }
    }
);

Here's a sample.

More Repositories

1

baseplate.py

reddit's python service framework
Python
539
star
2

redditsans

Reddit Sans. The typeface of the internet.
Pug
405
star
3

rpan-studio

RPAN Studio
C
263
star
4

snudown

reddit's markdown renderer. based on sundown.
C
181
star
5

rollingpin

fast deploy to lots of servers
Python
144
star
6

baseplate.go

Reddit's Service Framework in Go
Go
89
star
7

bugs

opinionated jira client for 80% of a devs jira usage
Shell
87
star
8

node-api-client

JavaScript
86
star
9

mcsauna

Track hottest memcached keys by regex in a graphite-friendly format.
Go
63
star
10

monitors

daemons to monitor reddit ops
Python
61
star
11

thebutton-data

press history for /r/thebutton
60
star
12

AlienBlue

Alien Blue iOS app - r/AlienBlue
Objective-C
59
star
13

devvit

Reddit for Developers
TypeScript
56
star
14

node-platform

A set of tools to enable easy universal rendering and page navigation on a React + Redux stack
JavaScript
47
star
15

node-horse

JavaScript
35
star
16

error-pages

the bummer mobile
HTML
33
star
17

node-build

build system for ES2015 projects
JavaScript
29
star
18

node-flags

🐾
JavaScript
25
star
19

CodableRPC

A Swift RPC client & server implementation using Codable.
Swift
22
star
20

node-horse-react

JavaScript
14
star
21

diamond-memcached-slab-collector

A Diamond collector for capturing memcached slab statistics.
Python
13
star
22

experiments.py

reddit's python experiments framework
Python
10
star
23

snooboots

Exploratory bootstrap customized for reddit
CSS
9
star
24

cabot-alert-slack

A simple Cabot alerting plugin for Slack.
Python
9
star
25

event-tracker

JavaScript
9
star
26

node-rest-cache

An LRU-based caching solution for rest-like data fetching.
JavaScript
9
star
27

devvit-kit

TypeScript
9
star
28

cqlmapper

A baseplate compatible fork of datastax' cqlengine library
Python
9
star
29

node-widgets

A collection of Reddit specific React components and the Redux actions and reducers to accompany them
JavaScript
8
star
30

devvit-sandbox

Devvit example apps and sketches not ready for production.
TypeScript
8
star
31

obs-browser-plugin

Browser plugin for OBS Studio
C++
8
star
32

node-middleware

Middleware for Redux
JavaScript
7
star
33

node-text-js

JavaScript
7
star
34

node-private

login / register / etc endpoints, only useful if you have access your own reddit instance
JavaScript
7
star
35

play

πŸ› A little playground for building apps on Reddit.
TypeScript
6
star
36

monoceros

Go
6
star
37

jsapi-example-consumer

JavaScript
5
star
38

reddit-gtm-template

The official tag template for the Reddit conversion pixel for use with Google Tag Manager
Smarty
5
star
39

baseplate.py-upgrader

automates much of the work of upgrading to newer baseplate.py versions
Python
4
star
40

iOS-interview

Sandbox for the iOS Programming Interview
Swift
4
star
41

reddit-coredns-plugins

Some CoreDNS plugins that reddit made
Go
3
star
42

django-underpants

tiny helpers for integrating django with underpants
Python
3
star
43

reddit-client-lib

library of client side code to be shared between multiple projects
JavaScript
3
star
44

data-firehose-client

JavaScript
3
star
45

edgecontext

request.edge_context payload definitions
Go
2
star
46

checkpoints

2
star
47

baseplate-celery

Python
2
star
48

thrift-compiler

a thrift compiler in a docker container
Dockerfile
2
star
49

test

1
star
50

thrift-python

1
star
51

docker-bazelisk

Docker image for Bazelisk
Dockerfile
1
star
52

android-interview

Sandbox for Android Programming Interview
Kotlin
1
star
53

spinnakerpb

Protobufs and a Golang lib for representing Spinnaker pipelines
Go
1
star
54

.github

1
star