2

Android ListView with fast scroll and section index

Posted December 3rd, 2010. Filed under Tutorial

This small tutorial will show you how to create a ListView, enable fast scrolling, and create a alphabetical section list that displays the letter as you quickly scroll the list.

First lets create a layout file with a ListView in it list this

<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@drawable/background">
 
    <ListView
            android:id="@+id/thelist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scrollbars="vertical"
            android:fadingEdge="vertical"
            android:cacheColorHint="#00000000"
            android:fastScrollEnabled="true"
            android:padding="2dp">
    </ListView>
</LinearLayout>

Notice I am putting a background image on the layout and setting the ListView to be transparent with the cacheColorHint. I also set fastScrollEnabled to true.

Now I have a store object to store the attributes about a store

public class Store {
 
    public int id;
    public String name;
    public String direction;
    public int floor;
    public String address;
    public String category;
    public String phone;
}

finally we need to create the Activity. We will assign a custom ArrayAdapter to the list and the custom ArrayAdapter will implement SectionIndexer

/**
 * The Store List Activity
 */
public class StoreListActivity extends Activity {
    private DBAdapter db;
 
    private LinkedList<Store> storeList = new LinkedList<Store>();
    private StoreListAdaptor storeListAdaptor;
 
    private ListView list;
 
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        setContentView(R.layout.storelist);
 
        list = (ListView) findViewById(R.id.thelist);
 
        // populate the store list
        storeList = db.getAllStoresOrderByName(storeList);
 
        // create an adaptor with the store list
        storeListAdaptor = new StoreListAdaptor(this,storeList);
 
        // assign the listview an adaptor
        list.setAdapter(storeListAdaptor);
 
    }
 
    /**
     * The List row creator
     */
    class StoreListAdaptor extends ArrayAdapter<Store> implements SectionIndexer{
 
        HashMap<String, Integer> alphaIndexer;
        String[] sections;
 
        public StoreListAdaptor(Context context, LinkedList<Store> items) {
            super(context, R.layout.storerow, items);
 
            alphaIndexer = new HashMap<String, Integer>();
            int size = items.size();
 
            for (int x = 0; x < size; x++) {
                Store s = items.get(x);
 
		// get the first letter of the store
                String ch =  s.name.substring(0, 1);
		// convert to uppercase otherwise lowercase a -z will be sorted after upper A-Z
                ch = ch.toUpperCase();
 
		// HashMap will prevent duplicates
                alphaIndexer.put(ch, x);
            }
 
            Set<String> sectionLetters = alphaIndexer.keySet();
 
	    // create a list from the set to sort
            ArrayList<String> sectionList = new ArrayList<String>(sectionLetters); 
 
            Collections.sort(sectionList);
 
            sections = new String[sectionList.size()];
 
            sectionList.toArray(sections);
        }
 
       public View getView(int position, View convertView, ViewGroup parent) {
            // expand your row xml if you are using custom xml per row
       } 
 
       public int getPositionForSection(int section) {
           return alphaIndexer.get(sections[section]);
       }
 
       public int getSectionForPosition(int position) {
           return 1;
       }
 
       public Object[] getSections() {
            return sections;
       }
    }
}

Hope this helps

Post to Twitter Tweet This Post

If you have enjoyed this entry. Please feel free to bookmark it using your favorite social bookmarking site

2 Responses so far

  1. anselmophil says:

    Mine isnt working, and the only thats differentr from your code is that i use ArrayAdapter, not a custom adapter :(
    Any idea?

  2. Dustin says:

    Nice, thanks! It worked for me with an ArrayAdapter, but not until I implemented the “SectionIndexer”. Much appreciated post!

Leave a Comment