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);
}

Lichter

check my answer here #7995459 – Impassible

Hi, thanks for answering but this shows how to do headers, which is not what I need... Check the image. What I want is a list of letters on the right which when I click one, the list scroll the the first element starting with this letter. – Lichter

@Lichter I am not getting the onClick event, can you please explain me how it works? – Cum

have look on the tutorial https://mcmap.net/q/356712/-android-alphabetical-fast-scrollview-in-recyclerview-with-collapsing-toolbar – Stockman

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.

Efficiency

Yeah I know it's an iphone feature, but it's not for me. So i'm doing what i'm asked for. though i agree with you, complying with android's way would be better. Any pointer on how to get the separator ? – Lichter

Thanks. It works fine. Also add android:clickable="true" to TextViews. – Raptor

What about other languages? – Couloir

Answer 2

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

Mannes

@PankajNimgade: Create new question and elaborate what did you try and how did it not work :) – Mannes

@juandg, how did you implement this in code, i never get the alphabets on the right hand side. Kindly help – Kibbutz

@Jul, I have tried the github.com/woozzu/IndexableListView mentioned in you answer and pretty much applied all the classes to implement this but list show and crashes if i were to scroll the list – Kibbutz

@PankajNimgade: You can create a question and add related information. I cant help you without your code and crash log. – Mannes

How to attach this to my listview? – Autosuggestion

@Autosuggestion : Please check this sample github.com/woozzu/IndexableListView/blob/master/src/com/woozzu/… – Mannes