Tutorial Mebuat LIstview Sederhana Dengan Side Index Android

Tutorial Membuat Listview Sederhana Dengan Side Index Android

BY ADMIN · JUNE 3, 2015

Pada tutorial 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 direktorisrc/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.

Trimakasih jangan lupa coment dan share ...