---
title: "Sorting list with side bar"  
description: "Interface that may implemented on Adapter to enable fast scrolling between sections of an AbsListView."  
author: "Manoj Pandey"  
published: 2015-02-16  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1581/sorting-list-with-side-bar  
category: "android"  
tags: ["android", "sorting", "listview"]  
reading_time: 5 minutes  

---

# Sorting list with side bar

Previously, we learn about how to [Creating custom](https://www.mindstick.com/interview/34070/creating-custom-annotations-in-java) and compound [Views](https://yourviews.mindstick.com/view/87865/my-views-on-satanic-versus-most-controversial-book-on-islam) in [Android](https://www.mindstick.com/articles/1567/navigation-drawer-implementation-in-android) (Creating custom and compound Views in Android). Now we see how to [Sorting](https://www.mindstick.com/blog/600/two-dimensional-array-with-its-sorting-using-java) list with side bar in [Listview](https://www.mindstick.com/articles/12744/listview-in-android).

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370) we are going to learn, how to get the sorted list of items based on alphabets selected from alphabet list inside the sidebar.

Android provides SectionIndexer [interface](https://www.mindstick.com/articles/12036/interface-in-c-sharp) which help to get position for search custom listview adapter.

Interface that may implemented on Adapter to enable fast scrolling between sections of an AbsListView.

After finishing my code and UI, activity looking like this

![Sorting list with side bar](https://www.mindstick.com/mindstickarticle/b6d4288d-fe2e-4439-8a8f-9ca08c959ee4/images/46b0fc0b-1344-484c-8d92-400b91cf0d4d.png)

1. Create an Android project on eclipse or Android visual Studio.

2. Add a class for make side bar selection event.

```
@SuppressLint("DefaultLocale")public class SideBar extends View {      private  SectionIndexer sectionIndexter = null;      private ListView list;      private int m_nItemHeight = 9;      ArrayList<Character> charList;       int count = 0;       // Create constructor for get  Activity context      public  SideBar(Context context, AttributeSet attrs) {            super(context,  attrs);            init();      }       @SuppressLint("DefaultLocale")      private void init() {             charList = new  ArrayList<Character>();            // Add item for search in listview  on sidebar            for (int i = 65; i  < 91; i++)                  charList.add((char) i);             setBackgroundColor(0x44FFFFFF);      }       // Set list view from my listview      public void  setListView(ListView _list) {            try {                  list = _list;                   sectionIndexter =  (SectionIndexer) _list.getAdapter();            } catch (Exception  ex) {            }       }       @Override      @SuppressLint("DefaultLocale")      public boolean  onTouchEvent(MotionEvent event) {            try {                  // On Side  bar index touch or click                  super.onTouchEvent(event);                  int i = (int)  event.getY();                  int idx = i / m_nItemHeight;                  if (idx >= charList.size()) {                        idx = charList.size() - 1;                  } else if (idx < 0)  {                        idx = 0;                  }                  if  (event.getAction() == MotionEvent.ACTION_DOWN                              ||  event.getAction() == MotionEvent.ACTION_MOVE) {                        if (sectionIndexter == null) {                              sectionIndexter =  (SectionIndexer) list.getAdapter();                        }                        //                        int position = sectionIndexter.getPositionForSection(charList                                    .get(idx));                        if (position ==  -1) {                              return true;                        }                        // Set toast  message after select item                        final Toast toast =  Toast.makeText(getContext(),                             String.valueOf(charList.get(idx)),  Toast.LENGTH_SHORT);                        toast.show();                        toast.setGravity(Gravity.CENTER, 0, 0);                        new  CountDownTimer(500, 500) {                              @Override                              public void onTick(long  millisUntilFinished) {                                    toast.show();                              }                               @Override                              public void onFinish() {                                    toast.cancel();                              }                        }.start();                        // Set Selection  item position                        list.setSelection(position);                   }            } catch (Exception  ex) {             }            return true;      }       @Override      @SuppressLint("DrawAllocation")      protected void onDraw(Canvas  canvas) {            Paint paint = new Paint();            paint.setColor(Color.parseColor("#1A76C1"));            paint.setTextSize(14);             paint.setTextAlign(Paint.Align.CENTER);            float widthCenter =  getMeasuredWidth() / 2;            for (int i = 0; i <   charList.size(); i++)  {                   WindowManager wm =  (WindowManager) getContext().getSystemService(                              Context.WINDOW_SERVICE);                  Display display =  wm.getDefaultDisplay();                  @SuppressWarnings("deprecation")                  int height =  display.getHeight() - 90;                  m_nItemHeight = height /  26;                  paint.setTextSize(height /  26);                   canvas.drawText(String.valueOf(charList.get(i)),  widthCenter,                              m_nItemHeight + (i * m_nItemHeight), paint);            }             super.onDraw(canvas);      } 
```

3. Add listview in your layout xml. i.e

```
<RelativeLayout 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"    tools:context=".MainActivity"   >     <ListView        android:id="@+id/myListView"        android:layout_width="fill_parent"        android:layout_height="wrap_content"   >    </ListView>     <!-- Add layout to show in side  bar -->    <android.test.SideBar        android:id="@+id/sideBar"        android:layout_width="33px"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_marginLeft="25sp"        android:layout_marginRight="1sp"        android:background="#FFFFFF"        android:fadeScrollbars="true"   /> </RelativeLayout> 
```

4. Add xml layout file to show item of custom listview

```
  <?xml version="1.0"   encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_gravity="center"    android:orientation="horizontal"   >     <ImageView        android:id="@+id/myIcon"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/ic_launcher"   />     <TextView        android:id="@+id/tvTitle"        android:layout_marginTop="15sp"        android:layout_marginLeft="10sp"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center"         /> </LinearLayout>
```

5. Now paste following to code in MainActicity. class

```
package  com.example.listsortingbyname; import  java.util.ArrayList;import  java.util.List; import  android.os.Bundle;import  android.annotation.SuppressLint;import  android.app.Activity;import  android.test.SideBar;import  android.view.Menu;import  android.widget.ListView; public  class MainActivity extends Activity {            ListView listView;            List<String> myList;             @SuppressLint("NewApi")            @Override            protected void onCreate(Bundle  savedInstanceState) {                        super.onCreate(savedInstanceState);                        setContentView(R.layout.activity_main);                        listView = (ListView)  findViewById(R.id.myListView);                         //  Create an object of a class and find his id from xml layout                        SideBar indexBar = (SideBar)  findViewById(R.id.sideBar);                        // set listview to sort in side  bar                        indexBar.setListView(listView);                        myList = new  ArrayList<String>();                        myList.add("A");myList.add("Aa");myList.add("Aaa");     myList.add("Aaaa");            myList.add("Aaaaa");                        myList.add("B");myList.add("Bb");myList.add("Bbb");     myList.add("Bbbb");            myList.add("Bbbbb");                        myList.add("C");myList.add("Cc");myList.add("Ccc");            myList.add("D");myList.add("Dd");myList.add("Ddd");                        myList.add("E");myList.add("Ee");myList.add("Eee");            myList.add("F");myList.add("Ff");myList.add("G");                        myList.add("Gg");myList.add("H");myList.add("Hh");myList.add("Hhh");myList.add("I");                        myList.add("Ii");myList.add("Iii");            myList.add("J");myList.add("Jj");myList.add("K");myList.add("Kk");                        myList.add("L");myList.add("Ll");myList.add("M");myList.add("Mm");myList.add("N");            myList.add("Nn");                        myList.add("Nnn");            myList.add("O");myList.add("Oo");myList.add("Ooo");myList.add("P");                        myList.add("Ppp");    myList.add("Q");myList.add("Qq");myList.add("Qqq");            myList.add("R");                        myList.add("Rr");myList.add("S");myList.add("T");myList.add("U");myList.add("V");                        myList.add("W");myList.add("X");myList.add("Y");myList.add("Z");myList.add("Zz");                        //  bind data in adapter class                        MyListAdapter adapter  = new MyListAdapter(this, myList);                        // set  adapter in listview                        listView.setAdapter(adapter);            }             @Override            public boolean  onCreateOptionsMenu(Menu menu) {                        //  Inflate the menu; this adds items to the action bar if it is present.                        getMenuInflater().inflate(R.menu.main,  menu);                        return true;            }} 
```

6. Create an adapter class to bind data in a view and implements this class with SectionIndexer.

```
package com.example.listsortingbyname; import java.util.List; import android.app.AlertDialog;import android.content.Context;import android.content.DialogInterface;import android.graphics.Color;import android.graphics.drawable.Drawable;import android.os.CountDownTimer;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.View.OnLongClickListener;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.SectionIndexer;import android.widget.TextView;import android.widget.Toast; // Async class to fill data in my listview public class MyListAdapter extends BaseAdapter  implements SectionIndexer {             private  Context context;            LayoutInflater  inflater;            List<String>  myList;             public  MyListAdapter(Context _context, List<String> arr) {                        myList  = arr;                        context  = _context;                        inflater  = LayoutInflater.from(context);             }             // hold  view in class            private  class ViewHolder {                        TextView  tvTitle;                        ImageView  imgGroupIcon;             }             @Override            public  int getCount() {                        return  myList.size();            }             @Override            public  Object getItem(int arg0) {                        return  myList.get(arg0);            }             @Override            public  long getItemId(int arg0) {                        return  0;            }             @Override            public  View getView(final int position, View view, ViewGroup parent) {                        final  ViewHolder holder;                         if  (view == null) {                                    holder  = new ViewHolder();                                    view  = inflater.inflate(R.layout.listview_item, null);                                    // Locate the  TextViews in listview_item.xml                                    holder.tvTitle  = (TextView) view.findViewById(R.id.tvTitle);                                    holder.imgGroupIcon  = (ImageView) view.findViewById(R.id.myIcon);                                                                        view.setTag(holder);                        }  else {                                    holder  = (ViewHolder) view.getTag();                        }                         holder.tvTitle.setText(myList.get(position));                         return  view;            }         // return selected itrm position            @Override            public  int getPositionForSection(int section) {                         if  (section == 35) {                                    return  35;                        }                        for  (int i = 0; i < myList.size(); i++) {                                    String  l = myList.get(i);                                    char  firstChar = l.toUpperCase().charAt(0);                                    if (firstChar ==  section) {                                                return  i;                                    }                        }                         return  -1;            }             @Override            public  int getSectionForPosition(int arg0) {                        return  0;            }             @Override            public  Object[] getSections() {                        return  null;            }} 
```

Now run your application.

![Sorting list with side bar](https://www.mindstick.com/mindstickarticle/b6d4288d-fe2e-4439-8a8f-9ca08c959ee4/images/502580ad-afd5-4962-af97-ca9646d81923.png) ![Sorting list with side bar](https://www.mindstick.com/mindstickarticle/b6d4288d-fe2e-4439-8a8f-9ca08c959ee4/images/9edf64ad-b28d-4e47-acd8-a7f6d2ca3e70.png)

---

Original Source: https://www.mindstick.com/articles/1581/sorting-list-with-side-bar

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.