How to customize a listView (scrolling)?

1

Given an Activity that has an adapter to populate a list of contacts:

IfpossibleIwantedtogetthefollowingresultasintheimagebelow:

  

When scrolling up and down, display the initial letter of the element   listed in the adapter.
Note: my adapter populates a lisView where the   data are already in ascending alphabetical order.

    
asked by anonymous 24.10.2014 / 18:14

1 answer

2

Solution with the help of @Wakim ^^:

Here you can find the images for customizing the scroll bar ( hosts by me in the mega ) and should be placed on the path res / drawable :

Drawable - custom images

Walkthrough:

  • Creating the custom color in the res / values / colors.xml path:

    <color name="apptheme_color">#DA4A38</color>
    
  • You can add to the res / values / strings.xml path, the items will be shown later in the interface, such as:

    <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>
    
  • Layout of activity activity_main.xml in the res / layout path:

    <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>
    
  • Layout of the list_item.xml items in the res / layout path:

    <?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" />
    
  • 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>
    
  • Setting scrollbar features when pressed fastscroll_thumb_holo.xml on the res / drawable path:

    <?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>
    
  • Creating an 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;
        }
    }
    
  • 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));
         }
    }
    
  •   

    Refer to the site for example: Customizing scrollbar

        
    25.10.2014 / 17:40