Pertemuan 6, Membuat Auto Complete di Android dengan menggunakan Eclipse, 30 November 2014

Pada postingan kali ini kita akan belajar membuat teks auto complete pada pemrograman android. Apa yang dimaksud dengan teks auto complete? seperti pada sebuah search engine, misalkan google. pada saat anda mengetikan beberapa huruf atau kata pada mesin pencari google, maka secara otomatis google akan memunculkan rekomendasi kata-kata yang berawalan dari huruf atau kata yang anda ketikan sebelumnya. seperti itulah teks auto complete. pada project yang akan kita bangun disediakan sebuah inputan. pada saat anda mengetikan minimal 2 huruf, maka secara otomatis akan muncul rekomendasi kata-kata yang berawalan dari 2 huruf tadi.

Bagaimana Cara Membuat Teks Auto Complete Pada Pemrograman Android?

Langkah ke 1:

1. jalankan Eclipse atau IDE lain yang ingin anda gunakan

2. buat project baru dengan nama Text Auto Complete

Langkah ke 2:

Setelah project Text Auto Complete terbentuk, selanjutnya kita modifikasi file-file pada project tersebut dengan langkah-langkah sebagai berikut,

1. buka file xml yang terdapat pada folder res/layout (secara default nama filenya adalah activity_main.xml)

2. modifikasi file activity_main.xml menjadi seperti berikut.

<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="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/command" />
    <AutoCompleteTextView 
        android:id="@+id/autoComplete"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:completionThreshold="2"
        android:textColor="#aa0000"/>
</LinearLayout>

3. simpan perubahan
4. buka file strings.xml yang terdapat pada folder res/values, modifikasi file tersebut menjadi seperti berikut.

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

    <string name="app_name">Text AutoComplete</string>
    <string name="action_settings">Settings</string>
    <string name="command">Insert minimum 2 letters</string>
    
</resources>

5. simpan perubahan

6. buka file java yang terdapat pada folder src/{nama package} (secara default nama filenya MainActivity.java)

7. modifikasi file MainActivity.java menjadi seperti berikut.

package first.textautocomplete;

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

public class MainActivity extends Activity implements OnItemClickListener {

 private AutoCompleteTextView autoComplete;
 private String[] item = {"Bandung", "Tasikmalaya", "Sumedang", "Cirebon", "Cimahi",
   "Ciamis", "Kuningan", "Bogor", "Bekasi", "Tanggerang", "Banten", "Cikarang"};
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        autoComplete = (AutoCompleteTextView)findViewById(R.id.autoComplete);
        autoComplete.setOnItemClickListener(this);
        autoComplete.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, item));
    }

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

 @Override
 public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
  // TODO Auto-generated method stub
  Toast.makeText(this, autoComplete.getText(), Toast.LENGTH_SHORT).show();
  return;
 }
    
}

8. simpan perubahan dan jalankan program.

Lihat apakah hasilnya sama seperti gambar diatas?

agar lebih mudah untuk memahami program diatas sebaiknya anda fokus terhadap file activity_main.xml yang berperan sebagai layout aplikasi, dan file MainActivity.java yang berperan sebagai kontrol dari aplikasi. selamat mencoba.