Android: ListView with Alphabetical side index

In this Android Example, we will see how to create a ListView with alphabetical side index.

Project Description:

This Android ListView tutorial explains the following,

How to create a ListView displaying list of fruits.
How to display alphabetical index at right side of the ListView
Display corresponding list items by selecting a letter from the alphabet indexer at the right.

Download “Android ListView With Side Index” AndroidListViewIndex.zip – Downloaded 4774 times – 1 MB

Android Project

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

Resources

Layout files

activity_main.xml

This XML layout file ( activity_main.xml ) is used for defining ListView and a LinearLayout to display side index.

Open activity_main.xml file in res/layout and copy the following content.

< LinearLayout 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 : orientation = "horizontal"

android : paddingLeft = "5dp"

tools : context = ".MainActivity"

android : baselineAligned = "false" >

< ListView

android : id = "@+id/list_fruits"

android : layout_width = "0dp"

android : layout_height = "wrap_content"

android : layout_weight = "1"

android : paddingRight = "5dp" >

< / ListView >

< LinearLayout

android : id = "@+id/side_index"

android : layout_width = "50dp"

android : layout_height = "fill_parent"

android : background = "#c3c3c3"

android : gravity = "center_horizontal"

android : orientation = "vertical" >

< / LinearLayout >

side_index_item.xml

This XML layout file ( side_index_item.xml ) is used for displaying index item. It contains a single TextView.
Create a new side_index_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/side_list_item"

android : layout_width = "wrap_content"

android : layout_height = "fill_parent"

android : gravity = "center"

android : padding = "3dp"

android : textSize = "14sp" / >

strings.xml

Open res/values/strings.xml and edit to have the content as shown below. A string array is defined to have list of fruits.

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

<string name="app_name">AndroidListViewIndex</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>Blueberry</item>
        <item>Blackberry</item>
        <item>Blackapple</item>
        <item>Custard Apple</item>
        <item>Clementine</item>
        <item>Cantalope</item>
        <item>Date</item>
        <item>Elderberry</item>
        <item>Fig</item>
        <item>Grapefruit</item>
        <item>Grape</item>
        <item>Gooseberry</item>
        <item>Guava</item>
        <item>Honeydew melon</item>
        <item>Jackfruit</item>
        <item>Juniper Berry</item>
        <item>Kiwi</item>
        <item>Kumquat</item>
        <item>Lemons</item>
        <item>Limes</item>
        <item>Lychee</item>
        <item>Mango</item>
        <item>Mandarin</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>Pomelo</item>
        <item>Raspberries</item>
        <item>Rambutan</item>
        <item>Strawberries</item>
        <item>Sweety</item>
        <item>Salmonberry</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" > AndroidListViewIndex < / 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 > Blueberry < / item >

< item > Blackberry < / item >

< item > Blackapple < / item >

< item > Custard Apple < / item >

< item > Clementine < / item >

< item > Cantalope < / item >

< item > Date < / item >

< item > Elderberry < / item >

< item > Fig < / item >

< item > Grapefruit < / item >

< item > Grape < / item >

< item > Gooseberry < / item >

< item > Guava < / item >

< item > Honeydew melon < / item >

< item > Jackfruit < / item >

< item > Juniper Berry < / item >

< item > Kiwi < / item >

< item > Kumquat < / item >

< item > Lemons < / item >

< item > Limes < / item >

< item > Lychee < / item >

< item > Mango < / item >

< item > Mandarin < / 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 > Pomelo < / item >

< item > Raspberries < / item >

< item > Rambutan < / item >

< item > Strawberries < / item >

< item > Sweety < / item >

< item > Salmonberry < / item >

< item > Tangerines < / item >

< item > Tomato < / item >

< item > Ugli < / item >

< item > Watermelon < / item >

< item > Woodapple < / item >

< / string - array >

< / resources >

Source files

MainActivity

This is the main activity class.

Here, a java.util.Map is created with key as alphabets and value as its index position.
We generate the map by calling getIndexList() method.

private void getIndexList ( String [ ] fruits ) {

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

for ( int i = 0 ; i < fruits . length ; i ++ ) {

String fruit = fruits [ i ] ;

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

if ( mapIndex . get ( index ) == null )

mapIndex . put ( index , i ) ;

}

displayIndex() displays alphabetic indexer at the right and sets OnClickListener for TextView.
When a letter from alphabet indexer is selected, it displays corresponding list item.

1	fruitList . setSelection ( mapIndex . get ( selectedIndex . getText ( ) ) ) ;

Complete Code:

package com.androidopentutorials.listviewindex;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener {

Map<String, Integer> mapIndex;
	ListView fruitList;

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

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

Arrays.asList(fruits);

fruitList = (ListView) findViewById(R.id.list_fruits);
		fruitList.setAdapter(new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, fruits));

getIndexList(fruits);

displayIndex();

}

private void getIndexList(String[] fruits) {
		mapIndex = new LinkedHashMap<String, Integer>();
		for (int i = 0; i < fruits.length; i++) {
			String fruit = fruits[i];
			String index = fruit.substring(0, 1);

if (mapIndex.get(index) == null)
				mapIndex.put(index, i);
		}
	}

private void displayIndex() {
		LinearLayout indexLayout = (LinearLayout) findViewById(R.id.side_index);

TextView textView;
		List<String> indexList = new ArrayList<String>(mapIndex.keySet());
		for (String index : indexList) {
			textView = (TextView) getLayoutInflater().inflate(
					R.layout.side_index_item, null);
			textView.setText(index);
			textView.setOnClickListener(this);
			indexLayout.addView(textView);
		}
	}

public void onClick(View view) {
		TextView selectedIndex = (TextView) view;
		fruitList.setSelection(mapIndex.get(selectedIndex.getText()));
	}

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

package com . androidopentutorials . listviewindex ;

import java . util . ArrayList ;

import java . util . Arrays ;

import java . util . LinkedHashMap ;

import java . util . List ;

import java . util . Map ;

import android . os . Bundle ;

import android . app . Activity ;

import android . view . Menu ;

import android . view . View ;

import android . view . View . OnClickListener ;

import android . widget . ArrayAdapter ;

import android . widget . LinearLayout ;

import android . widget . ListView ;

import android . widget . TextView ;

public class MainActivity extends Activity implements OnClickListener {

Map < String , Integer > mapIndex ;

ListView fruitList ;

@ Override

protected void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState ) ;

setContentView ( R . layout . activity_main ) ;

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

Arrays . asList ( fruits ) ;

fruitList = ( ListView ) findViewById ( R . id . list_fruits ) ;

fruitList . setAdapter ( new ArrayAdapter < String > ( this ,

android . R . layout . simple_list_item_1 , fruits ) ) ;

getIndexList ( fruits ) ;

displayIndex ( ) ;

}

private void getIndexList ( String [ ] fruits ) {

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

for ( int i = 0 ; i < fruits . length ; i ++ ) {

String fruit = fruits [ i ] ;

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

if ( mapIndex . get ( index ) == null )

mapIndex . put ( index , i ) ;

}

private void displayIndex ( ) {

LinearLayout indexLayout = ( LinearLayout ) findViewById ( R . id . side_index ) ;

TextView textView ;

List < String > indexList = new ArrayList < String > ( mapIndex . keySet ( ) ) ;

for ( String index : indexList ) {

textView = ( TextView ) getLayoutInflater ( ) . inflate (

R . layout . side_index_item , null ) ;

textView . setText ( index ) ;

textView . setOnClickListener ( this ) ;

indexLayout . addView ( textView ) ;

}

public void onClick ( View view ) {

TextView selectedIndex = ( TextView ) view ;

fruitList . setSelection ( mapIndex . get ( selectedIndex . getText ( ) ) ) ;

}

@ Override

public boolean onCreateOptionsMenu ( Menu menu ) {

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

return true ;

}

Output

Running the app will display the following output.

About The Author

nithya

Alex Mansour

Hello , how to populate the listview from online JSON file with keeping the same functionality of Alphabetical order . Thanks
- Bruno Cardoso
  
  Hi Alex Mansour, did you discover how to do this from a json file?
raman kumar

this works great but the order in not alphabetical so i need you to provide the correct code to display alphabetically
Carl Smith

Excellent tutorial. Very easy to follow. Many thanks!
fikriyogi

Excellent tutorial, but how to start another activity from this listview using intent?
Eko Wiyatnanto

Excellent, but i’m using fragment and i got error in textView.setOnClickListener(this); . can you fix it? please help me
- Who wants me? I’m here
  
  ·‚←¤←‚·↔„·›‚«‚→÷
  &#9658 http://rrntdes.blogspot.cz &#9668
  ±±¸›—•¬—¸↔¤¬„·¨<
- Nijas
  
  implement View.OnClickListener.
- Vinod Raaj
  
  textView.setOnClickListener(getActivity()); i hope i m not too late
Half Moon

Android ListView Example: http://www.viralandroid.com/2015/10/android-listview-example.html
Rahul Otwar

sir i am beginner and i am accessing sd card item so coulde you please tell me how to add alphabetic side index for sd card list
Pingback: android ListViewの調査メモiOSだとすぐできるけどけど - LOCAL COLOR BLOG
Frans Appel

Nice, but how can I use custom adapter with the index ? (more lines in a listviewrow)
Hari Krishna

ya …good ur create on static then how to create on dynamic…..give me hint
manoj

If the list not having any letter starting with that then the letter is also gone in the scroll. how to fix this
pietjestraat

I would like to create a separate class for the side index. How can I replace “this” within textView.onClicklistener(this) in the parameter list of your routine displayIndex. I believe this needs to be passed from calling Fragment.

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