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 4901 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.
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 | <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> </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.
1 2 3 4 5 6 7 8 | <?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.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <?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.
1 2 3 4 5 6 7 8 9 10 | 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:
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 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.
Pingback: android ListViewの調査メモiOSだとすぐできるけどけど - LOCAL COLOR BLOG