CARA MEMBUAT APLIKASI SEARCH DI ECLIPSE
Assalamulaikum.Wr.Wb
Pada kesempatan kali ini saya akan berbagi bagaimana cara membuat search di android . Untuk membuat search kita membutuhkan 2 file xml. Yang pertama adalah
list_item_filter.xml dan activity_filter.xml.
list_item_filter digunakan untuk menampung data per item sedangkan
activity_filter dipakai untuk menampung list_item_filter dan EditText pencarian. Berikut ini adalah langkah - langkahnya :
1. Buka Aplikasi Eclipse anda
Catatan : Bagi anda yang belum mempunyai software eclipse anda bisa mendownloadnya DISINI
2. Kemudian anda klik File -> New -> Android Application Project
3. Setelah di klik maka akan muncul form seperti di bawah ini
4. Setelah itu isi nama file yang anda ingin buat di kolom Application Name kemudian klik Next
5. Setelah itu anda ceklis pada kolom Create custom launcher icon , Create Activity , dan Create Project in Workspace seperti gambar di bawah ini
6. Setelah itu maka akan muncul form baru yang berisi Configure Launcher Icon kemudian anda klik Next
7. Setelah itu anda ceklik kolom Create Activity seperti gambar di bawah ini
8. Setelah itu maka akan mucul form seperti gambar di bawah ini kemudian klik Finish
9. Buat file layout dengan nama "activity_filter_list.xml" pada folder res>layout.Berikut ini adalah source codenya .
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Editext for Search -->
<EditText android:id="@+id/inputSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search Country.."
/>
<!-- List View -->
<ListView
android:id="@+id/list_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
10. Untuk
list_item_filter.xml berikut ini adalah source kodenya.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Single ListItem -->
<!-- negara list -->
<TextView android:id="@+id/negara_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:textSize="16dip"
android:textStyle="bold"/>
</LinearLayout>
11. Kemudian untuk FilterListActivity.java berikut ini adalah source kodenya.
package com.example.search;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
public class FilterListActivity extends Activity {
// List view
private ListView lv;
// Listview Adapter
ArrayAdapter<String> adapter;
// Search EditText
EditText inputSearch;
// ArrayList for Listview
ArrayList<HashMap<String, String>> negaraList;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_filter_list);
// Data Array yang akan ditampilkan di list
String negara[] = {"Indonesia","Malaysia","Brunei","Filipina",
"Thailand","Myanmar","Singapura","Vietnam",
"Kamboja","Laos" };
// ambil list_view dan inputsearchnya di xml
lv = (ListView) findViewById(R.id.list_view);
inputSearch = (EditText) findViewById(R.id.inputSearch);
// proses menambahkan array kedalam listview
adapter = new ArrayAdapter<String>(this, R.layout.list_item_filter,
R.id.negara_name, negara);
lv.setAdapter(adapter);
/**
* Kode dibawah ini dipakai untuk memfilter/pencarian realtime
* */
inputSearch.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence cs, int arg1, int arg2,
int arg3) {
FilterListActivity.this.adapter.getFilter().filter(cs);
}
@Override
public void beforeTextChanged(CharSequence arg0, int arg1,
int arg2, int arg3) {
}
@Override
public void afterTextChanged(Editable arg0) {
// TODO Auto-generated method stub
}
});
}
}
12. Maka hasilnya seperti gambar di bawah ini
Selamat mencoba ... (^_^)
幸運を... (^_^)
EmoticonEmoticon