Skip to content

5.x | FastScroller

Jump to bottom Edit New page
Davide Steduto edited this page Jun 3, 2018 · 15 revisions

In this page

XML Configuration

FastScroller needs an XML layout and Java initialization. The layout has to be placed at the end of the view hierarchy after everything else has been declared:

    ...
    <android.support.v7.widget.RecyclerView
        .../>
    ...
    <!-- FastScroller Layout must be at the end of ViewHierarchy
         in order to be displayed at the top of every views -->
    <include layout="@layout/fast_scroller"/>

</FrameLayout>

Here is the layout/fast_scroller.xml

<eu.davidea.fastscroller.FastScroller
    xmlns:android="http:https://schemas.android.com/apk/res/android"
    xmlns:tools="http:https://schemas.android.com/tools"
    xmlns:app="http:https://schemas.android.com/apk/res-auto"
    android:id="@+id/fast_scroller"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:layout_alignTop="@+id/swipeRefreshLayout"
    android:layout_alignBottom="@+id/swipeRefreshLayout"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    app:fastScrollerAutoHideEnabled="true"
    app:fastScrollerAutoHideDelayInMillis="1000"
    app:fastScrollerBubblePosition="adjacent"
    app:fastScrollerBubbleEnabled="true"
    app:fastScrollerHandleAlwaysVisible="false"
    app:fastScrollerIgnoreTouchesOutsideHandle="false"
    tools:visibility="visible"/>

Colors

You can override default scrollbar and handle colors in yours values/colors.xml:

<!-- Override fastScroller bar color and handle idle color -->
<!-- Tip: you can use transparency -->
<color name="fast_scroller_bar">#bccc</color>
<color name="fast_scroller_handle_idle">#caaa</color>

Java initialization

In the creation of the Activity/Fragment call setFastScroller() after the Adapter has been attached to the RV:

// First, assign the Adapter to the RV
mRecyclerView.setAdapter(mAdapter);

// Then, add FastScroller to the RecyclerView
FastScroller fastScroller = getView().findViewById(R.id.fast_scroller);
fastScroller.setAutoHideEnabled(true);             //true is the default value
fastScroller.setAutoHideDelayInMillis(1000L);      //1000ms is the default value
fastScroller.setHandleAlwaysVisible(false);        //false is the default value
fastScroller.setIgnoreTouchesOutsideHandle(false); //false is the default value
// 0 pixel is the default value. When > 0 it mimics the fling gesture
fastScroller.setMinimumScrollThreshold(70);
// OnScrollStateChangeListener remains optional
fastScroller.addOnScrollStateChangeListener((MainActivity) getActivity());
fastScroller.removeOnScrollStateChangeListener((MainActivity) getActivity())
// The color (accentColor) is automatically fetched by the FastScroller constructor,
// but you can change it at runtime:
fastScroller.setBubbleAndHandleColor(Color.RED)

// Finally, assign the Fastscroller to the Adapter
mAdapter.setFastScroller(fastScroller);

Callbacks

A useful callback is triggered when the handle is dragged, the method onFastScrollerStateChange() is invoked.
From the Activity, implement the callback method:

@Override
public void onFastScrollerStateChange(boolean scrolling) {
    // Example
    if (scrolling) hideFab();
    else showFab();
}

The text is built from the Adapter callback. It has to be implemented/overridden from the inside of a CustomAdapter that extends FlexibleAdapter:

@Override
public String onCreateBubbleText(int position) {
    if (position < getScrollableHeaders().size()) {
        return "Top";
    } else if (position >= getItemCount() - getScrollableFooters().size()){
        return "Bottom";
    } else {
        // Get and show the first character
        IFlexible iFlexible = getItem(position);
        return iFlexible.toString().substring(0,1).toUpperCase();
    }
}

Examples

Fast Scroller DesignFast Scroller ColorFast Scroller Top

Fast Scroller TextFast Scroller Bottom

Full Control

The following 3 Adapter methods give some control on the FastScroller instance:

/**
 * Changes the visibility of the View
 */
public void toggleFastScroller();

/**
 * Returns true, if FastScroller is configured and shown, false otherwise
 */
public boolean isFastScrollerEnabled();

/**
 * Returns the FastScroller instance for more control on the settings.
 */
public FastScroller getFastScroller();

But you can also control it directly:

fastScroller.setEnabled(true/false);
fastScroller.hideScrollbar();
fastScroller.showScrollbar();
fastScroller.toggleFastScroller();
fastScroller.isHidden();
fastScroller.isAutoHideEnabled();

Customization

FastScroller is also composed by:

ℹ️ Tips:

  • The Resources can be overridden by assigning the same @+id to the views of the base layout. For instance, to customize the shape of the bubble text, just override drawable/fast_scroller_bubble.xml.
  • The activation color is assigned at runtime when initialized, usually is the accent color.
  • Interface FastScroller.AdapterInterface and Class FastScroller.Delegate allow to use FastScroller with any Adapter library, not only FlexibleAdapter.

In your code, pass the new views to the FastScroller before assigning it to the Adapter:

fastScroller.setViewsToUse(
                R.layout.library_fast_scroller_layout,
                R.id.fast_scroller_bubble,
                R.id.fast_scroller_handle);
mAdapter.setFastScroller(fastScroller);

Extend FastScroller

/**
 * Sample class that extends the FastScroller.
*/
public class ModifiedFastScroller extends FastScroller {

    public ModifiedFastScroller(Context context) {
        super(context);
    }

    public ModifiedFastScroller(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ModifiedFastScroller(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void updateBubbleText(int position) {
        super.updateBubbleText(position);

        // You can set a default way to update the text in the bubble.
        String bubbleTextString = bubbleTextCreator.onCreateBubbleText(position);
        if (TextUtils.isEmpty(bubbleTextString)) {
            bubble.setVisibility(View.VISIBLE);
            bubble.setText("...");
            bubble.setTextSize(TypedValue.COMPLEX_UNIT_PT, 32);
        }
    }

    @Override
    protected void setBubbleAndHandlePosition(float y) {
        // You can modify the computed y-position of the bubble and the handle
        // in this method. For this example, I allowed the bubble to be at the
        // bottom-most part of the screen.
        super.setBubbleAndHandlePosition(y);
        if (bubble != null && bubblePosition == FastScrollerBubblePosition.ADJACENT) {
            bubble.setY(getValueInRange(
                0, height - handle.getHeight(), (int) (y - bubble.getHeight())
            ));
        }
    }
}
Add a custom footer
Home
The basics
Functionalities
UI extensions 👓
Others experimental extensions
Demo App

* = Under revision!

Clone this wiki locally