Membuat Aplikasi Android ListView Seperti Kamus Scroll Ke Posisi Tertentu, Dua ListView Berdampingan

Membuat Aplikasi Android ListView Seperti Kamus Scroll Ke Posisi Tertentu, Dua ListView Berdampingan, maksudnya kalau anda pernah lihat kamus ada index hurufnya di samping kanan ListView, kemudian jika index huruf misalnya huruf "P" diklik langsung scroll otomatis ke baris ListView yang memiliki awalan huruf "P" juga. Nah seperti itulah kira-kira, susah sekali membuat judul artikel ini ;p

Ada dua bagian yang cukup sulit pada Project ini, yaitu bagian membuat dua buah ListView berdampingan. Dan satunya membuat agar ListView bisa scroll otomatis ke posisi baris tertentu.

Nah caranya, buat Project baru. Ketikkan kode program berikut di MainActivity.java :

package com.amijaya.two_listview_scroll_to_position;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

// http://cariprogram.blogspot.com

// nuramijaya@gmail.com

public class MainActivity extends Activity {
 ListView lsthuruf;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  lsthuruf = (ListView)findViewById(R.id.lsthuruf);
  lsthuruf.setOnItemClickListener(new OnItemClickListener() {
   @Override
   public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
     long arg3) {
    // TODO Auto-generated method stub
    ListView lstisi = (ListView)findViewById(R.id.lstisi);
    String huruf =(String) (lsthuruf.getItemAtPosition(arg2));
    Toast.makeText(getApplicationContext(), huruf, Toast.LENGTH_LONG).show();
    //getListView().setSelection(21);// TODO Auto-generated method stub
    //getListView().setSelection(21);
    //getListView().smoothScrollToPosition(21);
    //Toast.makeText(getApplicationContext(), arrindex[arg2], Toast.LENGTH_LONG).show();
    if (huruf.equals("A") == true) { lstisi.smoothScrollToPosition(0); }
    if (huruf.equals("B") == true) { lstisi.smoothScrollToPosition(3); }
    if (huruf.equals("C") == true) { lstisi.smoothScrollToPosition(6); }
    if (huruf.equals("D") == true) { lstisi.smoothScrollToPosition(9); }
    if (huruf.equals("E") == true) { lstisi.smoothScrollToPosition(12); }
    if (huruf.equals("F") == true) { lstisi.smoothScrollToPosition(15); }
    if (huruf.equals("G") == true) { lstisi.smoothScrollToPosition(18); }
    if (huruf.equals("H") == true) { lstisi.smoothScrollToPosition(21); }
    if (huruf.equals("I") == true) { lstisi.smoothScrollToPosition(24); }
    if (huruf.equals("J") == true) { lstisi.smoothScrollToPosition(27); }
    if (huruf.equals("K") == true) { lstisi.smoothScrollToPosition(30); }
    if (huruf.equals("L") == true) { lstisi.smoothScrollToPosition(33); }
    if (huruf.equals("M") == true) { lstisi.smoothScrollToPosition(36); }
   }
  });
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

}

Kemudian tampilannya untuk membuat dua buah ListView berjajar sebelah-menyebelah di activity_main.xml buat seperti ini :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity" >

    <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <ListView
                android:id="@+id/lstisi"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:entries="@array/arrisi"/>
       </LinearLayout>

       <LinearLayout 
           android:layout_width="100dp"
           android:layout_weight="1"
           android:layout_height="match_parent"
           android:orientation="vertical" >

           <ListView
               android:id="@+id/lsthuruf"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
               android:layout_alignParentTop="true"
               android:layout_centerHorizontal="true"
               android:entries="@array/arrhuruf"/>
       </LinearLayout>
   
</LinearLayout>

Terakhir, AndroidManifest.xml kita biarkan seperti apa adanya, tidak perlu diubah :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.amijaya.two_listview_scroll_to_position"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.amijaya.two_listview_scroll_to_position.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Hasilnya :

Project selengkapnya download disini, langkah downloadnya seperti ini .

Semoga berguna.