Click here to Skip to main content
13,295,441 members (35,457 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 19 Feb 2013

Android Alphabetic IndexBar Scroller

, 20 Feb 2013
Rate this:
Please Sign up or sign in to vote.
This article would help you develop the Index Bar for Android across all screen resolutions.


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.  


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 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

	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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Khushboo Kaur
Software Developer 3Pillar Global, Inc
India India
No Biography provided

You may also be interested in...


Comments and Discussions

Questionno working Pin
Member 1078036321-Aug-14 2:37
memberMember 1078036321-Aug-14 2:37 
AnswerRe: no working Pin
Khushboo Kaur7-Oct-14 21:31
memberKhushboo Kaur7-Oct-14 21:31 
AnswerRe: no working Pin
Khushboo Kaur8-Oct-14 22:58
memberKhushboo Kaur8-Oct-14 22:58 
GeneralMissing files Pin
Smitha Vijayan19-Feb-13 8:39
staffSmitha Vijayan19-Feb-13 8:39 
GeneralRe: Missing files Pin
Khushboo Kaur25-Feb-13 0:27
memberKhushboo Kaur25-Feb-13 0:27 
GeneralRe: Missing files Pin
Smitha Vijayan5-Mar-13 5:47
staffSmitha Vijayan5-Mar-13 5:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 20 Feb 2013
Article Copyright 2013 by Khushboo Kaur
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid