How to create an alphabetical scrollbar displaying all the letter in android?

Question

My purpose is to obtain something like that :

But the only examples i can find are lists like that :
android - listview fastscroll with alphabet like on iPhone contacts activity

Obviously, I don't want a list like the contacts which displays the letters when you fastscroll. I know how to do this.

Any pointer would be welcome. (I tried this but no success)

Below, the full solution as suggest by FunkTheMonk (thanks a lot) :

Define the listview as usual. Define a RelativeLayout containing the ListView and on the right, a LinearLayout with all the letters. For a better solution, the list of letters could be generated dynamically to only display the letters in the list. Then in the onClick method, add the behaviour to scroll the list :

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ListView android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginRight="28dip" />

    <LinearLayout android:orientation="vertical"
        android:layout_width="28dip" android:layout_height="wrap_content"
        android:layout_alignParentRight="true" android:background="@android:color/transparent" >

        <TextView android:id="@+id/A" android:text="A" android:tag="A"
            style="@style/alphabetTextView"/>
        <TextView android:id="@+id/B" android:text="B" android:tag="B"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/C" android:text="C" android:tag="C"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/D" android:text="D" android:tag="D"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/E" android:text="E" android:tag="E"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/F" android:text="F" android:tag="F"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/G" android:text="G" android:tag="G"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/H" android:text="H" android:tag="H"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/I" android:text="I" android:tag="I"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/J" android:text="J" android:tag="J"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/K" android:text="K" android:tag="K"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/L" android:text="L" android:tag="L"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/M" android:text="M" android:tag="M"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/N" android:text="N" android:tag="N"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/O" android:text="O" android:tag="O"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/P" android:text="P" android:tag="P"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/Q" android:text="Q" android:tag="Q"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/R" android:text="R" android:tag="R"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/S" android:text="S" android:tag="S"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/T" android:text="T" android:tag="T"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/U" android:text="U" android:tag="U"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/V" android:text="V" android:tag="V"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/W" android:text="W" android:tag="W"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/X" android:text="X" android:tag="X"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/Y" android:text="Y" android:tag="Y"
            style="@style/alphabetTextView" />
        <TextView android:id="@+id/Z" android:text="Z" android:tag="Z"
            style="@style/alphabetTextView" />

    </LinearLayout>
</RelativeLayout>

Java

@Override
public void onClick(View v) {
    String firstLetter = (String) v.getTag();
    int index = 0;
    if (stringList != null) {
        for (String string : stringList) {
            if (string.startsWith(firstLetter)) {
                index = stringList.indexOf(string);
                break;
            }
        }
    }
    lv.setSelectionFromTop(index, 0);
}

Answer 1

This is an iPhone feature, Android uses fast scroll. I'd recommend that you use the platform alternative rather than try to enforce common functionality.

If you must, you'll have to implement this yourself. Put your list view in a RelativeLayout and put A-Z TextViews in a vertical LinearLayout that is set to layout_alignParentRight="true". Set the TextView's tag to A-Z appropiately and set onClick="quickScroll" on all of them.

Implement in your Activity:

public void quickScroll(View v) {
    String alphabet = (String)v.getTag();
    //find the index of the separator row view
    list.setSelectionFromTop(index, 0);
}

This will scroll to the selected letter onClick, but I believe you can scroll your finger over the alphabet on iPhone and it'll update the list? You'll have to implement an onTouchListener rather than onClickListener for that.

Answer 2

You can try using IndexScroller which only visible on touch and auto invisible when no contact. Here is the screenshot