Tutorial Membuat Listview Dengan Fastscroll Android

Pada tutorial Programming Android kali ini kita akan membuat aplikasi Listview Dengan Fastscroll. Tidak seperti tutorial sebelumnya Tutorial Membuat Listview Sederhana Dengan Side Index Android yang membuat pengindexan pada listview. Kali ini aplikasi yang akan kita buat akan menampilkan fastscroll disamping kanan listview dan menampilkan index huruf yang akan memudahkan pencarian data listview secara cepat. Untuk lebih jelasnya kita akan langsung praktek dengan membuat aplikasinya.

Buat project android seperti berikut:
Application Name                : AndroidFastScroll
Project Name                       : AndroidFastScroll
Package Name                     : firman.salatigadev.androidfastscroll
Minimum Required SDK    : Andoid 2.2
Target SDK                          : Android 4.2
Yang lain biarkan default.
Buat file baru pada direktori res/values/colors.xml dan isikan code berikut:

colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="apptheme_color">#DA4A38</color>
</resources>

Pada direktori res/values/strings.xml tambahkan data di file string.xml, data yang disimpan pada file string.xml ini yang akan ditampilkan pada listview.

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

    <string name="app_name">AndroidFastScroll</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    
    <string-array name="daftar_negara">
        <item>Aljazair</item>
        <item>Arab Saudi</item>
        <item>Australia</item>
        <item>Amerika Serikat</item>
        <item>Afrika Selatan</item>
        <item>Bahrain</item>
        <item>Belanda</item>
        <item>Belgia</item>
        <item>Brasil</item>
        <item>Brunei</item>
        <item>Ceko</item>
        <item>Chili</item>
        <item>China</item>
        <item>Denmark</item>
        <item>Dominika</item>
        <item>Ekuador</item>
        <item>Elsavador</item>
        <item>Estonia</item>
        <item>Etiopia</item>
        <item>Filipina</item>
        <item>Finlandia</item>
        <item>Gabon</item>
        <item>Ghana</item>
        <item>Georgia</item>
        <item>Grenada</item>
        <item>Honduras</item>
        <item>Hongaria</item>
        <item>Indonesia</item>
        <item>Irak</item>
        <item>Irlandia</item>
        <item>Italia</item>
        <item>Jamaika</item>
        <item>Jerman</item>
        <item>Kamerun</item>
        <item>Kazakhstan</item>
        <item>Korea Selatan</item>
        <item>Latvia</item>
        <item>Luksemburg</item>
        <item>Maroko</item>
        <item>Mali</item>
        <item>Meksiko</item>
        <item>Nigeria</item>
        <item>Norwegia</item>
        <item>Paraguay</item>
        <item>Peru</item>
        <item>Prancis</item>
        <item>Pakistan</item>
        <item>Polandia</item>
        <item>Portugal</item>
        <item>Rumania</item>
        <item>Rusia</item>
        <item>Serbia</item>
        <item>Sloveia</item>
        <item>Spanyol</item>
        <item>Tunisia</item>
        <item>Turki</item>
        <item>Ukraina</item>
        <item>Uruguay</item>
        <item>Venezuela</item>
        <item>Vietnam</item>
        <item>Yaman</item>
        <item>Yordania</item>
        <item>Zimbabwe</item>
    </string-array>

</resources>

Buka activity_main.xml pada root direktori res/layout, file ini yang akan mendefinisikan id pada aplikasi listview dan isi dengan coding seperti berikut:

activity_main.xml
<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="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbarStyle="outsideOverlay" />

</RelativeLayout>

Buat file baru list_item.xml di res/layout, file ini digunakan untuk menampilkan item ListView. Isi dengan code berikut:

list_item.xml
<?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" />

Buka file styles.xml pada direktori res/values/styles.xml, file ini untuk mendefinisikan style attribut fastscroll.

styles.xml
<resources>
    <style name="AppBaseTheme" parent="android:Theme.Light">      
    </style>

    <!-- Application theme. -->
    <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>

Buat file baru fastscroll_thumb_holo.xml di direktori res/drawable/, file ini mendefinisikan selector untuk fastscroll ketika dalam keadaan default dan dalam keadaan fastscroll ditekan.

fastscroll_thumb_holo.xml
<?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>

Buat class baru ListAdapter.java pada package firman.salatigadev.androidfastscroll.adapter yang dibuat sebelumnya.

ListAdapter.java
package firman.salatigadev.androidfastscroll.adapter;

import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Locale;
import java.util.Set;
 
import android.content.Context;
import android.util.Log;
import android.widget.ArrayAdapter;
import android.widget.SectionIndexer;

import firman.salatigadev.androidfastscroll.R;

public class ListAdapter extends ArrayAdapter<String> implements SectionIndexer {
	
	HashMap<String, Integer> mapIndex;
    String[] sections;
    List<String> negara;
 
    public ListAdapter(Context context, List<String> listNegara) {
        super(context, R.layout.list_item, listNegara);
 
        this.negara = listNegara;
        mapIndex = new LinkedHashMap<String, Integer>();
 
        for (int x = 0; x < negara.size(); x++) {
            String ngr = negara.get(x);
            String ch = ngr.substring(0, 1);
            ch = ch.toUpperCase(Locale.US);
 
            // HashMap will prevent duplicates
            mapIndex.put(ch, x);
        }
 
        Set<String> sectionLetters = mapIndex.keySet();
 
        // create a list from the set to sort
        ArrayList<String> sectionList = new ArrayList<String>(sectionLetters);
 
        Log.d("sectionList", sectionList.toString());
        Collections.sort(sectionList);
 
        sections = new String[sectionList.size()];
 
        sectionList.toArray(sections);
    }
 
    public int getPositionForSection(int section) {
        Log.d("section", "" + section);
        return mapIndex.get(sections[section]);
    }
 
    public int getSectionForPosition(int position) {
        Log.d("position", "" + position);
        return 0;
    }
 
    public Object[] getSections() {
        return sections;
    }
}
  • getPositionForSection (int section) untuk mengembalikan posisi ke awal bagian list adapter
  • getSectionForPosition (int position) mengembalikan indeks dari bagian yang berhubungan dalam posisi yang diberikan
  • getSections () mengembalikan data array yang mewakili bagian dari listview

Sebagai contoh untuk getPositionForSection(section) dan getSectionForPosition(position)

Posisi Data getSectionForPosition(position)
0 Aljazair

0

1 Arab Saudi

0

2 Australia

0

3 Afrika Selatan

0

4 Belgia

1

5 Brasil

1

6 Brunei

1

7 Ceko

2

  • getPositionForSection(0) – returns 0
  • getPositionForSection(1) – returns 4
  • getPositionForSection(2) – returns 7

Terakhir pada file MainActivity.java di direktori src/firman/salatigadev/androidfastscroll/ isi code menjadi seperti berikut:

MainActivity.java
package firman.salatigadev.androidfastscroll;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import firman.salatigadev.androidfastscroll.adapter.ListAdapter;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends ListActivity {
	
	ListView negaraView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		negaraView = (ListView) findViewById(android.R.id.list);
        
		negaraView.setFastScrollEnabled(true);
        String[] negara = getResources().getStringArray(R.array.daftar_negara);
 
        List<String> listNegara = Arrays.asList(negara);
        Collections.sort(listNegara);
        setListAdapter(new ListAdapter(this, listNegara));
        
        negaraView.setOnItemClickListener(new OnItemClickListener() {
 
            public void onItemClick(AdapterView<?> parent, View arg1,
                    int position, long arg3) {
                Toast.makeText(getApplicationContext(),
                        "" + parent.getItemAtPosition(position),
                        Toast.LENGTH_LONG).show();
            }
        });
	}

	@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;
	}

}

Selesai, running aplikasi.

DOWNLOAD SOURCE CODE

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *