Click here to Skip to main content
Click here to Skip to main content

Android Alphabetic IndexBar Scroller

, 20 Feb 2013 CPOL
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.

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.

License

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

Share

About the Author

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

Comments and Discussions

 
Questionno working PinmemberMember 1078036321-Aug-14 2:37 
AnswerRe: no working PinmemberKhushboo Kaur7-Oct-14 21:31 
AnswerRe: no working PinmemberKhushboo Kaur8-Oct-14 22:58 
GeneralMissing files PinstaffSmitha Vijayan19-Feb-13 8:39 
GeneralRe: Missing files PinmemberKhushboo Kaur25-Feb-13 0:27 
GeneralRe: Missing files PinstaffSmitha Vijayan5-Mar-13 5:47 

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

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

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