How to handle the fast-scroller on Lollipop 5.1?

Question

Background

I've made a tiny library, which shows how to mimic the style of the stock contacts app of Android Lollipop, here.

The problem

It seems that on Android 5.1 , the fast scroller looks very different than the previous one, and it's too close to the right, so it's hard to use it.

screenshot of Android 4.4 :

Here's a screenshot on Android 5 :

and on Android 5.1 :

What I've found

I've tried to go over all of the "what's new" section of Android 5.1, and also in some related classes docs, but I didn't find anything special, except for "setFastScrollStyle" . However, I couldn't find any explanation of how to use it (plus it's from API 21 , so that might not be the reason).

The question

How can I make the fast scroller to be located a bit to the left, so that it will be easier to touch it?

How do you use setFastScrollStyle? Is there any tutorial for this?

Quipster

I think this will help #5978930 – Clotheshorse

@BenyamEphrem It didn't work. – Quipster

"However, I couldn't find any explanation of how to use it...". Is that not common with Google? It's up to us developers to document the details. – Concentric

@TheOriginalAndroid I don't understand. Are you disappointed at me that I didn't find information? – Quipster

@android developer, no, it's not that, sorry for the confusion. I am tired of the lack of documentation in Google library/SDK. – Concentric

hey how you implemented this type of scrollbar in list view? – Nomanomad

@14bce109 It's built in. However, if you wish, there is one solution I've made of scrollbar for RecyclerView, here: github.com/AndroidDeveloperLB/… . I think Google made something too, but I don't remember where. – Quipster

I want this type of scrollbar for list view. Any suggestions? – Nomanomad

@14bce109 Just enable it. – Quipster

Answer 1

I had the same problem and after a few hours of research I came up with a solution. This AOSP commit helped me the most, it shows the changes made to the scrollbar in Android 5.1 (SDK 22): Update scrollbars to match Material spec

There are two possibilities:

A: Use the new style and add padding

This will keep the same new rectangle from API 21 (Android 5.1), but add some padding left and right.

1: Copy the fastscroll_thumb_material.xml to your drawables folder

This should be the content (removed AOSP comments to save space):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:tint="?attr/colorControlActivated"
            android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <size android:width="8dp" android:height="48dp" />
        </shape>
    </item>
    <item>
        <shape android:tint="?attr/colorControlNormal"
            android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <size android:width="8dp" android:height="48dp" />
        </shape>
    </item>
</selector>

2: Edit your theme

Add the following item to your theme. I think you could put this in a style and use it with setFastScrollStyle, but I find this easier.

<item name="android:fastScrollThumbDrawable">@drawable/fastscroll_thumb_material</item>

3: Edit fastscroll_thumb_material.xml

You can edit it to your liking, but I did the following, which adds 8dp to the left and right of the scrollbar. I added a layer-list and item around each shape and added android:right="8dp" and android:left="8dp" to the new item. I tried adding that to the original items, but that didn't work, neither did adding padding to the shape.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <item android:right="8dp" android:left="8dp">
                <shape android:tint="?attr/colorControlActivated"
                    android:shape="rectangle">
                    <solid android:color="@android:color/white" />
                    <size android:width="8dp" android:height="48dp" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item android:right="8dp" android:left="8dp">
                <shape android:tint="?attr/colorControlNormal"
                    android:shape="rectangle">
                    <solid android:color="@android:color/white" />
                    <size android:width="8dp" android:height="48dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

B: Change the scrollbar to the old style

This will use the API 21, Android 5.0 style

1: Add the old drawables to your project

You can download them from the commit above (fastscroll_thumb_mtrl_alpha.png and fastscroll_track_mtrl_alpha.9.png), but I also bundled them, you can also download them from my Google Drive.

2: Add fastscroll_thumb_material.xml to your drawables

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <bitmap android:src="@drawable/fastscroll_thumb_mtrl_alpha"
            android:tint="?attr/colorControlActivated" />
    </item>
    <item>
        <bitmap android:src="@drawable/fastscroll_thumb_mtrl_alpha"
            android:tint="?attr/colorControlNormal" />
    </item>
</selector>

3: Add fastscroll_track_material.xml to your drawables

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/fastscroll_track_mtrl_alpha"
    android:tint="?attr/colorControlNormal" />

4: Edit your theme

Add the following item to your theme. I think you could put this in a style and use it with setFastScrollStyle, but I find this easier.

<item name="android:fastScrollThumbDrawable">@drawable/fastscroll_thumb_material</item>
<item name="android:fastScrollTrackDrawable">@drawable/fastscroll_track_material</item>

I hope this helps to achieve your goal :)

Pyroconductivity

wait, so this is by design? How come the Android apps don't seem affected by this? What do they do there? – Quipster

No idea, there aren't that many that use the fast scrollbar though. The contacts app uses the old fast scrollbar and the Google Play Music uses the new one (in "My Library"). That last one seems to have issues though. – Pyroconductivity

But it looks so bulky and weird compared to the contacts app. I didn't test what you wrote. Which of them is used for the contacts app? Solution A? Also, BTW, API 22 is Android 5.1 and not API 21 (which is Android 5). – Quipster

Yeah, I've noticed the API level mistake, I fixed it. Option B is the option you should choose to have the same scrollbar as the contacts app. It's the 3th screen in the image. I've edited the image to make it more clear. – Pyroconductivity

You know what. I think I actually like the new 5.1 style, except for the missing space between the popup label and the fast-scroller. What should I do in order to make it look this way on pre-5.1 versions? – Quipster

Also, BTW, solution B didn't work for me for some reason. I've put the "fastScrollThumbDrawable" and "fastScrollTrackDrawable" into the ListView XML-Tag directly. – Quipster

I've also tried putting it in the theme of the app. – Quipster

Answer 2

Why not set padding on the right side of your layout containing the ListView? Google webpage @ setPadding(). Personally I used android:paddingLeft for a similar issue like yours.

Another common trick is to add a (hidden) ImageView in the layout on the right side (horizontal orientation). The ImageView would be hidden and the (width) size can be set.

Glad to help a frequent SO user, hope I did. Regards, Tommy Kwee.

Concentric

An empty View at the right with a fixed width will do the trick! Nice – Innocence

This will not work well, as clicking on items will not have the effect of full selection on the entire row, but only on a part of it, as the right area got empty content. – Quipster

@android developer, If the ImageView is narrow in width, then a user is not likely to hit on that area. So I think clicking an item is not an issue. – Concentric

@android developer, Did you try setPadding() or android:paddingRight in your layout? Did it work for you? – Concentric

@TheOriginalAndroid It's not just the clicking area, it's also the filling effect of the item. Adding padding would have the same issue. People would notice that something isn't right. – Quipster