How to customize a listview (scrolling)?

Question

Given an Activity that has an Adapter to fill a contact list:

If possible wanted to get the following result as in the image below:

When scrolling up and down, show the initial letter of the element listed on Adapter.
Note: my Adapter fills a lisView in which the data contained therein are already in ascending alphabetical order.

Answer 1

Solution with the help of @Wakim^^:

Here at this link below is the images for customization of the scroll bar(hosting for me on the mega) and shall be placed in the res/drawable:

Drawable - custom images

Step by step:

1. Custom color creation on the way res/values/Colors.xml:

   <color name="apptheme_color">#DA4A38</color>
   

2. You can add to the path res/values/strings.xml, a items will be shown later in the interface, for example:

   <string-array name="fruits_array">
       <item>Apples</item>
       <item>Apricots</item>
       <item>Avocado</item>
       <item>Annona</item>
       <item>Banana</item>  
       <item>Bilberry</item>
       <item>Blackberry</item>
   </string-array>
   

3. Layout by Activity activity_main.xml on the way res/layout:

   <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"
       android:padding="5dp"
       tools:context=".MainActivity" >
   
   <ListView
       android:id="@android:id/list"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:scrollbarStyle="outsideOverlay" />
   
   </RelativeLayout>
   

4. Layout of items list_item.xml on the way res/layout:

   <?xml version="1.0" encoding="utf-8"?>
   <TextView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/txt_title"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:paddingBottom="10dp"
       android:paddingLeft="15dp"
       android:paddingTop="10dp" />
   

5. Scrollbar style should be added in the path res/values/Styles.xml:

   <resources>
   
       <style name="AppBaseTheme" parent="android:Theme.Light">
       </style>
   
       <style name="AppTheme" parent="AppBaseTheme">
           <item name="android:fastScrollThumbDrawable">@drawable/fastscroll_thumb_holo</item>
           <item name="android:fastScrollOverlayPosition">atThumb</item>
           <item name="android:fastScrollTextColor">@color/apptheme_color</item>
           <item name="android:fastScrollTrackDrawable">@drawable/fastscroll_thumb_pressed_holo</item>
           <item name="android:fastScrollPreviewBackgroundRight">@drawable/bg_default_focused_holo_light</item>
       </style>
   
   </resources>
   

6. Defining the characteristics of the scroll bar when pressed fastscroll_thumb_holo.xml on the way res/drawable:

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
   
       <item android:drawable="@drawable/fastscroll_thumb_pressed_holo" android:state_pressed="true"/>
       <item android:drawable="@drawable/fastscroll_thumb_default_holo"/>
   
   </selector>
   

7. Creation of a Adapter:

   public class ListAdapter extends ArrayAdapter<String> implements SectionIndexer {
   
       HashMap<String, Integer> mapIndex;
       String[] sections;
       List<String> fruits;
   
       public ListAdapter(Context context, List<String> fruitList) {
           super(context, R.layout.list_item, fruitList);
           this.fruits = fruitList;
           mapIndex = new LinkedHashMap<String, Integer>();
           for (int x = 0; x < fruits.size(); x++) {
               String fruit = fruits.get(x);
               String ch = fruit.substring(0, 1);
               ch = ch.toUpperCase(Locale.US);
               mapIndex.put(ch, x);
            }
           Set<String> sectionLetters = mapIndex.keySet();
           ArrayList<String> sectionList = new ArrayList<String>(sectionLetters);
           Collections.sort(sectionList);
           sections = new String[sectionList.size()];
           sectionList.toArray(sections);
       }
   
       public int getPositionForSection(int section) {
           return mapIndex.get(sections[section]);
       }
   
       public int getSectionForPosition(int position) {
           return 0;
       }
   
       public Object[] getSections() {
           return sections;
       }
   }
   

8. Finally, the Mainactivity:

   public class MainActivity extends ListActivity {
   
       ListView fruitView;
   
       @Override
       public void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           fruitView = (ListView) findViewById(android.R.id.list);
           fruitView.setFastScrollEnabled(true);
           String[] fruits = getResources().getStringArray(R.array.fruits_array);
           List<String> fruitList = Arrays.asList(fruits);
           Collections.sort(fruitList);
           setListAdapter(new ListAdapter(this, fruitList));
        }
   }
   

Consult the site for example: Customization scroll bar