Eclipse Autocomplete Text Field (EATF)

Now we learn how to create autocomplete text. The scenario, an edittext is provided as input. When you type at least 3 letters, recommendations for words starting from the 3 letters will automatically appear. For more details, see Figure 5.1.

Figure 5.1

1. Run Enclipse, create a new project, fill in the parameters as follows.

|     Project name        |     AutocompleteSederhana     |
|-------------------------|-------------------------------|
|     Build Target        |     Android 2.2               |
|     Application name    |     Belajar   Autocomplete    |
|     Package name        |     com.auto.comp             |
|     Create Activity     |     AutocompleteSederhana     |
|     Min SDK version     |     8                         |

2. Add the following 5 lines of code to String.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <string name="hello">Hello World, autoComplete!</string>
     <string name="app_name">Membuat Teks AutoComplete</string>
     <string name="perintah">Masukkan minimal 3 huruf</string>
</resources>

3. Then type the following script in main.xml

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <TextView android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textView1"
    android:text="@string/perintah"></TextView>
  <AutoCompleteTextView android:id="@+id/edit"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:completionThreshold="3" />
  <TextView android:layout_width="fill_parent"
    android:text="TextView"
    android:layout_height="wrap_content"
    android:id="@+id/hasil"></TextView>
</LinearLayout>

4. Type the AutocompleteSimple.java script as follows.

package com.auto.comp; 2:
import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView; 9: import android.widget.TextView;
public class AutocompleteSederhana extends Activity implements TextWatcher {
  /** Called when the activity is first created. */
  TextView hasil;
  AutoCompleteTextView edit;
  String[] item = { "Merbabu", "Merapi", "Lawu", "Rinjani",
     "Sumbing","Sindoro", "Krakatau", "Selat Sunda", "Selat Bali",
  "Selat Malaka","Kalimantan", "Sulawesi", "Jawa" }; 18:
  @Override
  public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState); 22:  setContentView(R.layout.main);
  hasil = (TextView) findViewById(R.id.hasil);
  edit = (AutoCompleteTextView) findViewById(R.id.edit);
  edit.addTextChangedListener(this);
  edit.setAdapter(new ArrayAdapter<String>(this,
       android.R.layout.simple_dropdown_item_1line, item));
  }

     public void onTextChanged(CharSequence s, int start, int
     before, int count) {
     hasil.setText(edit.getText());
  }

  public void beforeTextChanged(CharSequence s, int start, int
     count, int after) {
    // not used
  }

  public void afterTextChanged(Editable s) {
    // not used
  }
}

If the script is messy, do Format (source > format). Do RUN and see the result

Program Explanation

First, look at Main.xml, especially lines 9-10, which is the part that creates the autocomplete widget. This widget has several attributes, one example of which is line 12. The attribute in line 12 has a value of 3, which functions to limit the minimum number of letters that will be entered later. Thus, a user must enter at least 3 letters first before the recommended words appear.

Now we focus on the Simple Autocomplete activity. I divided it into three blocks

1. Line 13-17: declaration of textview, string and autocompletetextView objects
2. Line 24-28: synchronize the object to the widget in the xml layout based on the id, while attaching the method to the edit object. 
3. Lines 31-43: TextWatcher method implementation

First, take a look at line 14, the „edit‟ object is derived from the AutoCompleteTextView class. This object is a textview that can be edited and then a list of recommended words appears automatically while the typing process is taking place. The list of recommended words is displayed in a drop down menu that can be clicked by the user.

Line 26, activates the „edit‟ object so that it can catch the signal when the user enters a letter. This signal is then responded to by the methods in lines 31-43, namely

• afterTextChanged() This method is called after the edittext has been changed.
• beforeTextChanged() This method is called before the edittext is changed. 
• onTextChanged() This method is called when the text in the edittext is being changed.

Line 28, attaches the array data named "item" to the "edit" object. This section causes the words stored in the item variable to appear automatically when the user enters letters. Line 33 plays a role in duplicating the data, namely any letters entered into the "edit" object will also appear in the "result" object.