Tutorial Membuat Listview Sederhana Dengan Side Index Android

Pada tutorial Programming Android kali ini kita akan membuat aplikasi listview sederhana dengan side index. Pada aplikasi yang akan kita buat, daftar listview akan dilakukan pengindexan pada side sebelah kanan berdasarkan huruf yang berfungsi untuk memudahkan dalam pencarian daftar list. Untuk lebih jelasnya kita akan langsung praktek dengan membuat aplikasinya.

Buat project android seperti berikut:
Application Name                 : AndroidListView
Project Name                        : AndroidListView
Package Name                      : firman.salatigadev.androidlistview
Minimum Required SDK     : Andoid 2.2
Target SDK                            : Android 4.2
Yang lain biarkan default.
Buka activity_main.xml pada root direktori res/layout dan isi dengan coding seperti berikut:

activity_main.xml
<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_negara"
        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>

File diatas digunakan untuk mendefinisikan ListView dan LinearLayout untuk menampilkan side index.

Buat file baru side_index_item.xml pada direktori res/layout dan isi code berikut:

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

Buka file string.xml pada direktori res/values/strings.xml dan update code menjadi seperti berikut:

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

    <string name="app_name">AndroidListView</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>

Pada file MainActivity.java, mapIndex yang dibuat dengan kunci sebagai posisi index, dan akan menghasilkan map untuk memanggil method getIndexList().

private void getIndexList(String[] negara) {
        mapIndex = new LinkedHashMap<String, Integer>();
        for (int i = 0; i < negara.length; i++) {
            String ngr = negara[i];
            String index = ngr.substring(0, 1);
 
            if (mapIndex.get(index) == null)
                mapIndex.put(index, i);
        }
    }

displayIndex () menampilkan pengindex huruf di side sebelah kanan. Ketika list pada side index huruf yang dipilih, ini akan menampilkan daftar yang sesuai item.

negaraList.setSelection(mapIndex.get(selectedIndex.getText()));

Berikut code lengkapnya pada file class MainActivity.java di direktori src/firman/salatigadev/androidlistview/MainActivity.java.

MainActivity.java
package firman.salatigadev.androidlistview;

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 negaraList;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		String[] negara = getResources().getStringArray(R.array.daftar_negara);
		 
        Arrays.asList(negara);
 
        negaraList = (ListView) findViewById(R.id.list_negara);
        negaraList.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, negara));
 
        getIndexList(negara);
 
        displayIndex();        
	}
	
	private void getIndexList(String[] negara) {
        mapIndex = new LinkedHashMap<String, Integer>();
        for (int i = 0; i < negara.length; i++) {
            String ngr = negara[i];
            String index = ngr.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;
        negaraList.setSelection(mapIndex.get(selectedIndex.getText()));
    }

	@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 *