Android: ListView Fastscroll and its styling

In this Android example, we will see how to create a ListView with fast scroll enabled.

Project Description:

This Android ListView tutorial explains the following,

How to create a ListView which displays a list of items (in our example we display a list of fruits).
How to enable fast scroll in ListView
How to customize fast scroll style attributes such as,
- Fast scroll thumb drawable
- Fast scroll text color
- Fast scroll track drawable
- Fast scroll preview background

You can use this site http://www.android-holo-colors.com/ to generate drawables and themes which you can copy into your project.

Download “Android ListView FastScroll” AndroidFastScrollDemo.zip – Downloaded 5451 times – 1 MB

Android Project

Create a new Android project and name it as “ AndroidFastScrollDemo “.

Resources

colors.xml

Create a new file res/values/colors.xml and copy paste the following content.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="apptheme_color">#DA4A38</color>
</resources>

<? xml version = "1.0" encoding = "utf-8" ?>

< resources >

< color name = "apptheme_color" > #DA4A38</color>

< / resources >

strings.xml

Open res/values/strings.xml and edit to have the content as shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">AndroidFastScrollDemo</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

    <string-array name="fruits_array">
        <item>Apples</item>
        <item>Apricots</item>
        <item>Avocado</item>
        <item>Annona</item>
        <item>Banana</item>  
        <item>Bilberry</item>
        <item>Blackberry</item>
        <item>Custard Apple</item>
        <item>Clementine</item>
        <item>Cantalope</item>
        <item>Coconut</item>
        <item>Currant</item>
        <item>Cherry</item>
        <item>Cherimoya</item>
        <item>Date</item>
        <item>Damson</item>
        <item>Durian</item>
        <item>Elderberry</item>
        <item>Fig</item>
        <item>Feijoa</item>
        <item>Grapefruit</item>
        <item>Grape</item>
        <item>Gooseberry</item>
        <item>Guava</item>
        <item>Honeydew melon</item>
        <item>Huckleberry</item>
        <item>Jackfruit</item>
        <item>Juniper Berry</item>
        <item>Jambul</item>
        <item>Jujube</item>
        <item>Kiwi</item>
        <item>Kumquat</item>
        <item>Lemons</item>
        <item>Limes</item>
        <item>Lychee</item>
        <item>Mango</item>
        <item>Mandarin</item>
        <item>Mangostine</item>
        <item>Nectaraine</item>
        <item>Orange</item>
        <item>Olive</item>
        <item>Prunes</item>
        <item>Pears</item>
        <item>Plum</item>
        <item>Pineapple</item>
        <item>Peach</item>
        <item>Papaya</item>
        <item>Passionfruit</item>
        <item>Pomegranate</item>
        <item>Pomelo</item>
        <item>Raspberries</item>
        <item>Rock melon</item>
        <item>Rambutan</item>
        <item>Strawberries</item>
        <item>Sweety</item>
        <item>Salmonberry</item>
        <item>Satsuma</item>
        <item>Tangerines</item>
        <item>Tomato</item>
        <item>Ugli</item>
        <item>Watermelon</item>
        <item>Woodapple</item>
    </string-array>

</resources>

<? xml version = "1.0" encoding = "utf-8" ?>

< resources >

< string name = "app_name" > AndroidFastScrollDemo < / string >

< string name = "action_settings" > Settings < / string >

< string name = "hello_world" > Hello world ! < / string >

< string - array name = "fruits_array" >

< item > Apples < / item >

< item > Apricots < / item >

< item > Avocado < / item >

< item > Annona < / item >

< item > Banana < / item >

< item > Bilberry < / item >

< item > Blackberry < / item >

< item > Custard Apple < / item >

< item > Clementine < / item >

< item > Cantalope < / item >

< item > Coconut < / item >

< item > Currant < / item >

< item > Cherry < / item >

< item > Cherimoya < / item >

< item > Date < / item >

< item > Damson < / item >

< item > Durian < / item >

< item > Elderberry < / item >

< item > Fig < / item >

< item > Feijoa < / item >

< item > Grapefruit < / item >

< item > Grape < / item >

< item > Gooseberry < / item >

< item > Guava < / item >

< item > Honeydew melon < / item >

< item > Huckleberry < / item >

< item > Jackfruit < / item >

< item > Juniper Berry < / item >

< item > Jambul < / item >

< item > Jujube < / item >

< item > Kiwi < / item >

< item > Kumquat < / item >

< item > Lemons < / item >

< item > Limes < / item >

< item > Lychee < / item >

< item > Mango < / item >

< item > Mandarin < / item >

< item > Mangostine < / item >

< item > Nectaraine < / item >

< item > Orange < / item >

< item > Olive < / item >

< item > Prunes < / item >

< item > Pears < / item >

< item > Plum < / item >

< item > Pineapple < / item >

< item > Peach < / item >

< item > Papaya < / item >

< item > Passionfruit < / item >

< item > Pomegranate < / item >

< item > Pomelo < / item >

< item > Raspberries < / item >

< item > Rock melon < / item >

< item > Rambutan < / item >

< item > Strawberries < / item >

< item > Sweety < / item >

< item > Salmonberry < / item >

< item > Satsuma < / item >

< item > Tangerines < / item >

< item > Tomato < / item >

< item > Ugli < / item >

< item > Watermelon < / item >

< item > Woodapple < / item >

< / string - array >

< / resources >

Layout files

activity_main.xml

This XML layout file ( activity_main.xml ) is used to define ListView
Open activity_main.xml file in res/layout and copy the following content.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    tools:context=".MainActivity" >

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbarStyle="outsideOverlay" />

</RelativeLayout>

< RelativeLayout xmlns : android = "http://schemas.android.com/apk/res/android"

xmlns : tools = "http://schemas.android.com/tools"

android : layout_width = "match_parent"

android : layout_height = "match_parent"

android : padding = "5dp"

tools : context = ".MainActivity" >

< ListView

android : id = "@android:id/list"

android : layout_width = "fill_parent"

android : layout_height = "fill_parent"

android : scrollbarStyle = "outsideOverlay" / >

< / RelativeLayout >

list_item.xml

This XML layout file ( list_item.xml ) is used for displaying a particular ListView item. It contains a single TextView.
Create a new list_item.xml file in res/layout and copy the following content.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/txt_title"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingBottom="10dp"
    android:paddingLeft="15dp"
    android:paddingTop="10dp" />

<? xml version = "1.0" encoding = "utf-8" ?>

< TextView xmlns : android = "http://schemas.android.com/apk/res/android"

android : id = "@+id/txt_title"

android : layout_width = "fill_parent"

android : layout_height = "fill_parent"

android : paddingBottom = "10dp"

android : paddingLeft = "15dp"

android : paddingTop = "10dp" / >

styles.xml

Open res/values/styles.xml and edit to have the content as shown below. Here, fast scroll style attributes are defined.

<resources>

    <style name="AppBaseTheme" parent="android:Theme.Light">
    </style>

    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:fastScrollThumbDrawable">@drawable/fastscroll_thumb_holo</item>
        <item name="android:fastScrollOverlayPosition">atThumb</item>
        <item name="android:fastScrollTextColor">@color/apptheme_color</item>
        <item name="android:fastScrollTrackDrawable">@drawable/fastscroll_thumb_pressed_holo</item>
        <item name="android:fastScrollPreviewBackgroundRight">@drawable/bg_default_focused_holo_light</item>
    </style>

</resources>

< resources >

</style>

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

<item name ="android : fastScrollOverlayPosition">atThumb</item>

<item name ="android : fastScrollTextColor">@color/apptheme_color</item>

<item name ="android : fastScrollTrackDrawable">@drawable/fastscroll_thumb_pressed_holo</item>

<item name ="android : fastScrollPreviewBackgroundRight">@drawable/bg_default_focused_holo_light</item>

</style>

< / resources >

fastscroll_thumb_holo.xml

Create a new file fastscroll_thumb_holo.xml in res/drawable/ and copy the following content. It defines selector for fast scroll thumb for default and pressed states.

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

    <item android:drawable="@drawable/fastscroll_thumb_pressed_holo" android:state_pressed="true"/>
    <item android:drawable="@drawable/fastscroll_thumb_default_holo"/>

</selector>

<? xml version = "1.0" encoding = "utf-8" ?>

< selector xmlns : android = "http://schemas.android.com/apk/res/android" >

< item android : drawable = "@drawable/fastscroll_thumb_pressed_holo" android : state_pressed = "true" / >

< item android : drawable = "@drawable/fastscroll_thumb_default_holo" / >

< / selector >

Source files

ListAdapter class

Create a new class “ ListAdapter ” in the package com.androidopentutorials.fastscrolldemo.adapter .

This is the custom ListView adapter class which implements SectionIndexer to enable fast scrolling between sections of an AbsListView. A section is a group of list items that have something in common. For example, they may begin with the same letter or they may be songs from the same artist. SectionIndexer provides following methods,

getPositionForSection(int section) returns the starting (first) position of that section with the list adapter
getSectionForPosition(int position) returns the index of the corresponding section within the array of section objects in that given position
getSections() returns an array of objects representing sections of the list.

package com.androidopentutorials.fastscrolldemo.adapter;

import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Locale;
import java.util.Set;

import android.content.Context;
import android.util.Log;
import android.widget.ArrayAdapter;
import android.widget.SectionIndexer;

import com.androidopentutorials.fastscrolldemo.R;

public class ListAdapter extends ArrayAdapter<String> implements SectionIndexer {

	HashMap<String, Integer> mapIndex;
	String[] sections;
	List<String> fruits;

	public ListAdapter(Context context, List<String> fruitList) {
		super(context, R.layout.list_item, fruitList);

		this.fruits = fruitList;
		mapIndex = new LinkedHashMap<String, Integer>();

		for (int x = 0; x < fruits.size(); x++) {
			String fruit = fruits.get(x);
			String ch = fruit.substring(0, 1);
			ch = ch.toUpperCase(Locale.US);

			// HashMap will prevent duplicates
			mapIndex.put(ch, x);
		}

		Set<String> sectionLetters = mapIndex.keySet();

		// create a list from the set to sort
		ArrayList<String> sectionList = new ArrayList<String>(sectionLetters);

		Log.d("sectionList", sectionList.toString());
		Collections.sort(sectionList);

		sections = new String[sectionList.size()];

		sectionList.toArray(sections);
	}

	public int getPositionForSection(int section) {
		Log.d("section", "" + section);
		return mapIndex.get(sections[section]);
	}

	public int getSectionForPosition(int position) {
		Log.d("position", "" + position);
		return 0;
	}

	public Object[] getSections() {
		return sections;
	}
}

package com . androidopentutorials . fastscrolldemo . adapter ;

import java . util . ArrayList ;

import java . util . Collections ;

import java . util . HashMap ;

import java . util . LinkedHashMap ;

import java . util . List ;

import java . util . Locale ;

import java . util . Set ;

import android . content . Context ;

import android . util . Log ;

import android . widget . ArrayAdapter ;

import android . widget . SectionIndexer ;

import com . androidopentutorials . fastscrolldemo . R ;

public class ListAdapter extends ArrayAdapter < String > implements SectionIndexer {

HashMap < String , Integer > mapIndex ;

String [ ] sections ;

List < String > fruits ;

public ListAdapter ( Context context , List < String > fruitList ) {

super ( context , R . layout . list_item , fruitList ) ;

this . fruits = fruitList ;

mapIndex = new LinkedHashMap < String , Integer > ( ) ;

for ( int x = 0 ; x < fruits . size ( ) ; x ++ ) {

String fruit = fruits . get ( x ) ;

String ch = fruit . substring ( 0 , 1 ) ;

ch = ch . toUpperCase ( Locale . US ) ;

// HashMap will prevent duplicates

mapIndex . put ( ch , x ) ;

}

Set < String > sectionLetters = mapIndex . keySet ( ) ;

// create a list from the set to sort

ArrayList < String > sectionList = new ArrayList < String > ( sectionLetters ) ;

Log . d ( "sectionList" , sectionList . toString ( ) ) ;

Collections . sort ( sectionList ) ;

sections = new String [ sectionList . size ( ) ] ;

sectionList . toArray ( sections ) ;

}

public int getPositionForSection ( int section ) {

Log . d ( "section" , "" + section ) ;

return mapIndex . get ( sections [ section ] ) ;

}

public int getSectionForPosition ( int position ) {

Log . d ( "position" , "" + position ) ;

return 0 ;

}

public Object [ ] getSections ( ) {

return sections ;

}

Understanding getPositionForSection(section) and getSectionForPosition(position)
For example if the index of section B is 1 and the indexed column of the cursor has the following data

Position	Data	getSectionForPosition(position)
0	Annona	0
1	Apples	0
2	Apricots	0
3	Avocado	0
4	Banana	1
5	Bilberry	1
6	Blackberry	1
7	Cantalope	2

getPositionForSection(0) – returns 0
getPositionForSection(1) – returns 4
getPositionForSection(2) – returns 7

MainActivity

This is the main activity class. To enable fast scroll in ListView, do the following steps,

Set fast scroll mode to your ListView
- listViewInstance.setFastScrollEnabled(true);
Make your adapter implement android.widget.SectionIndexer interface and override the methods to see an alphabet letter on which you are currently on during fast scrolling.

package com.androidopentutorials.fastscrolldemo;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

import com.androidopentutorials.fastscrolldemo.adapter.ListAdapter;

public class MainActivity extends ListActivity {

	ListView fruitView;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		fruitView = (ListView) findViewById(android.R.id.list);
		
		fruitView.setFastScrollEnabled(true);
		String[] fruits = getResources().getStringArray(R.array.fruits_array);

		List<String> fruitList = Arrays.asList(fruits);
		Collections.sort(fruitList);
		setListAdapter(new ListAdapter(this, fruitList));
		
		fruitView.setOnItemClickListener(new OnItemClickListener() {

			public void onItemClick(AdapterView<?> parent, View arg1,
					int position, long arg3) {
				Toast.makeText(getApplicationContext(),
						"" + parent.getItemAtPosition(position),
						Toast.LENGTH_LONG).show();
			}
		});
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
}

package com . androidopentutorials . fastscrolldemo ;

import java . util . Arrays ;

import java . util . Collections ;

import java . util . List ;

import android . app . ListActivity ;

import android . os . Bundle ;

import android . view . Menu ;

import android . view . View ;

import android . widget . AdapterView ;

import android . widget . AdapterView . OnItemClickListener ;

import android . widget . ListView ;

import android . widget . Toast ;

import com . androidopentutorials . fastscrolldemo . adapter . ListAdapter ;

public class MainActivity extends ListActivity {

ListView fruitView ;

@ Override

public void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState ) ;

setContentView ( R . layout . activity_main ) ;

fruitView = ( ListView ) findViewById ( android . R . id . list ) ;

fruitView . setFastScrollEnabled ( true ) ;

String [ ] fruits = getResources ( ) . getStringArray ( R . array . fruits_array ) ;

List < String > fruitList = Arrays . asList ( fruits ) ;

Collections . sort ( fruitList ) ;

setListAdapter ( new ListAdapter ( this , fruitList ) ) ;

fruitView . setOnItemClickListener ( new OnItemClickListener ( ) {

public void onItemClick ( AdapterView < ? > parent , View arg1 ,

int position , long arg3 ) {

Toast . makeText ( getApplicationContext ( ) ,

"" + parent . getItemAtPosition ( position ) ,

Toast . LENGTH_LONG ) . show ( ) ;

}

} ) ;

}

@ Override

public boolean onCreateOptionsMenu ( Menu menu ) {

getMenuInflater ( ) . inflate ( R . menu . main , menu ) ;

return true ;

}

The string array is retrieved from strings.xml. We create an instance of ListAdapter which implements SectionIndexer and set this to the ListView.

Output

Running the app will display the following output.

About The Author

nithya

Pingback: How to add a fast-scroller to the RecyclerView? | DL-UAT
Djul Lau

Hey, thanks for this great tutorial !

I’ve just used it to add fastscroll to my app and I’d like to add a few things.

1. The adapter contains a bug to me :
// HashMap will prevent duplicates
mapIndex.put(ch, x);

This will put the leave the last found index with the letter in the hashmap and I think it should be the first (was messing the fast access in my very long list).

Something like (assuming the list is ordered) :

if (!mapIndex.containsKey(ch))
mapIndex.put(ch, x);

2. You don’t explain why getSectionForPosition() is not implemented (always returns 0).
It seems to be called by the listview even if implementing it made no visible difference in my case.

3. I think the initial list must already be ordered (or weird things happen) and so there is no need to sort the sections (the linkedlist retains the insert order).

Cheers,

Julien
- http://thedroidcafe.com Abhishek Balani
  
  +1 for
  
  if (!mapIndex.containsKey(ch))mapIndex.put(ch, x);
Half Moon

ListView Example: http://www.viralandroid.com/2015/10/android-listview-example.html
Pingback: Fastscroll with chars get onClick event on char View - HTML CODE
Carnegi

It Gives error on “fastscroll_thumb_default_holo”

Error:(6, 29) No resource found that matches the given name (at ‘drawable’ with value ‘@drawable/fastscroll_thumb_default_holo’).
Pingback: How to show text that moves along scrollbar using RecyclerView? - QuestionFocus
Pingback: android - Cómo agregar una barra de desplazamiento a la RecyclerView
Pingback: android - Come aggiungere un fast-scroller per il RecyclerView

M	T	W	T	F	S	S
« Mar
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Project Description:

Android Project

Resources

colors.xml

strings.xml

Layout files

activity_main.xml

list_item.xml

styles.xml

fastscroll_thumb_holo.xml

Source files

ListAdapter class

MainActivity

Output

About The Author

nithya

Related Posts