Android Alphabetic IndexBar Scroller

• Download source code 

Introduction   

I would like to share Alphabetic Index Bar Scroller for Android Mobile apps. This code is supported on all the  versions of Android SDK. The important feature of this scroller is its compatibility on almost all screen resolutions of Android devices.

I am attaching the snapshot of the scroller on two different screen resolutions:

Android 4.2 AVD with 480 by 800 screen resolution, 4" display.

Android 2.3 AVD with 240 by 320 screen resolution, 2.7" display.  

As you can see, the Index Bar Scroller adjusts its User Interface against different screen resolutions.  

Background  

The components involved in this view: 

1. Alphabet IndexBar Listview.  
2. Custom Listview (placed on the left side of Alphabet IndexBar Listview).  

The basic idea in developing this piece of code is: 

1. Determine the height of the Alphabet IndexBar Listview before drawing it on the screen. 
2. Determine the height of one row of this Listview. This includes the row which has alphabet and the row which has a single dot. Depending on the font size, the height is determined on different screen resolutions. 
3. Determine the number of alphabets to be shown on this screen and the alphabets which are to be omitted.
4. Apply the algorithm and make the Adapter for the Listview.  
5. Finally, draw the Alphabet Index Bar Listview on the screen. 

Using the code 

IndexBarHandler.java is the Java file which prepares the Adapter for the Alphabet IndexBar Listview. You can browse the method for debugging purpose:

private void prepareArray(ArrayList<String> alphabets_list)  

As an example, if there are 4 characters to be omitted from the Alphabet IndexBar Listview such that this Listview is completely visible on the allocated space of the screen, below is the code which alters the ArrayList of the Adapter: 

removeAlphabet(alphabets_list, 5, 2);		//F,G
alphabets_list.add(5, ".");	

removeAlphabet(alphabets_list, 17, 2);		//S,T

if(number_of_characters_omit==5)
	alphabets_list.remove(17);		//U
alphabets_list.add(17, ".");

To omit 4 characters, it is done in two groups. Dots are placed in the listview after omitting the characters. So in total 5 characters are to be omitted. This is programmatically  deduced.  

Firstly, it omits two characters F,G and adds a dot instead. Further, in the second group it omits, S,T,U and adds a dot. 

Points of Interest

The two listviews: Android IndexBar and Custom Listview are drawn side by side. This means that both the Listviews have the same height. So, after the Custom Listview is drawn on the screen, we compute its height. Only after this, the Alphabet IndexBar Listview starts its rendering on the screen. 

The peculiar thing in this view component is that the developers can keep the height of both the listview according to their wish, given that the number of omits should not be more than 8 characters. You can check the logcat for this while developing: 

IndexBarHandler number of characters=18  omits=8  

Also, this view would adjust itself according to different screen resolutions.