Auto Complete TextView in Android

Auto Complete TextView
The auto complete is the Combination of both the Textview and the EditText. When a text is being inputed in the edit text, it automatically appear in form of a textview which you can then click to make your typing faster. It is part of the widget class and can easily be access through the use of the import android.widget.AutoCompleteTextView class library. Here in this tutorial we shall figure how it work. By the end of this tutorial we shall understand some basic terminology use in java as well as in android
 you shall learn
1. How to use a String Array
2. The AutoComplete textView
3. Instance variable
4. An ArrayAdapter
Without waisting more of your time, here is the complete code of the AutoCompleteTextView


Main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_marginTop="200dp"
        android:layout_marginLeft="20dp"
        android:text="This is the Project on AutoCompleteTextView"
        android:textSize="30dp"
        android:textColor="#0000ff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <AutoCompleteTextView
        android:layout_marginLeft="20dp"
        android:layout_marginTop="100dp"
        android:id="@+id/testAutoComplete"
        android:layout_width="700dp"
 android:layout_height="wrap_content"/>

   
</LinearLayout>

MainActivity.java
import android.app.*;
import android.os.*;
import android.widget.*;



public class MainActivity extends Activity{


String[] months = new String[] {"January","February","March","April","May","June","July","August",



"September","October","November","December"};


//This is going to be the words that we appear as we are typing

@Override


protected void onCreate(Bundle savedInstanceState)


{


super.onCreate(savedInstanceState);


setContentView(R.layout.main);


final AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.testAutoComplete);


//The first thing to do in every android program is to find the Id of widget.
ArrayAdapter<String> monthArray = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, months);


/*The reason why we are using array adapter is because the words in which we are using has already been store in an array. Therefore array adapter help to hold those array element together*/


textView.setAdapter(monthArray);
}}











 Explanation
The  first thing was to create an instance variable of a String. This instance Variable act as an array. Tnerefore if you wish you can call it an instance variable of an array. The String is the words that will appear on our array adapter as we type.

 Then we declared our AutoCompleteTextView class by finding the id in the corresponding XML.
Remember our ArrayAdapter class. It help us to hold the value of the String array decleared  earlier. It contains many layout. In this tutorial we are using the simple list item 1 layout. You should be careful in choosing your layout because a wrong layout can lead to error in your application.
Then our final step is to set the ArrayAdapter





THE BIG STORY
For instance, in a big organisation where you have many workers and you want to find the profile of just one worker, as you type the name of the worker working there, his name appear in the AutoCompleteTextView as you click on his/her name, not only his/her name will appear on our AutoComplete text but also we can easily navigate to the profile of such worker. We see that knowing example one above can not solve such problem. Therefore we really need our auto complete text to go into action. This can only be done when our auto complete text listen to click listeners.

textView.setOnItemClickListener(new AdapterView.OnItemClickListener(){

With the help of our toast we can figure out if the autoComplete textview is listening or not. Below is the code of our Big Story

Main.Xml
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_marginTop="200dp"
        android:layout_marginLeft="20dp"
        android:text="This is the Project on AutoCompleteTextView"
        android:textSize="30dp"
        android:textColor="#0000ff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <AutoCompleteTextView
        android:layout_marginLeft="20dp"
        android:layout_marginTop="100dp"
        android:id="@+id/testAutoComplete"
        android:layout_width="700dp"
 android:layout_height="wrap_content"/>

  
</LinearLayout>


MainActivity.XML

 import android.app.*;
import android.os.*;
import android.view.*;
import android.widget.*;



public class MainActivity extends Activity{


String[] months = new String[] {"January","February","March","April","May","June","July","August",



"September","October","November","December"};


//This is going to be the words that we appear as we are typing

@Override


protected void onCreate(Bundle savedInstanceState)


{


super.onCreate(savedInstanceState);


setContentView(R.layout.main);


final AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.testAutoComplete);


//The first thing to do in every android program is to find the Id of widget.
ArrayAdapter<String> monthArray = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, months);


/*The reason why we are using array adapter is because the words in which we are using has already been store in an array. Therefore array adapter help to hold those array element together*/


textView.setAdapter(monthArray);

    textView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
            @Override
            public void onItemClick(AdapterView a, View v, int arg0, long arg1){
                int position = arg0;
                switch (position){
                    case 0:
                        Toast.makeText(getApplicationContext(),months[0],Toast.LENGTH_SHORT).show();
                        break;
                    case 1:
                        Toast.makeText(getApplicationContext(),months[1],Toast.LENGTH_SHORT).show();
                        break;
                    case 2:
                        Toast.makeText(getApplicationContext(),months[2],Toast.LENGTH_SHORT).show();
                        break;
                    case 3:
                        Toast.makeText(getApplicationContext(),months[3],Toast.LENGTH_SHORT).show();
                        break;
                }
            }      
        } );


}}



Through the use of using each respective id or index value we can get the position of each element as the AutoCompleteTextView listen for onClickListeners. Here, we use a switch statement which correspond to the position of the AdapterView and we know the rule to every switch statements which state that for every switch statement there is a case keyword. We let out case correspond to the position and therefore we can have access to each click in the AdapterView.










1 comment:

  1. The reason why you are seeing febuary when you click may or January when you click December is because the array adapter assume that each adapter has an index value from zero.

    Please correct your mistake.

    ReplyDelete