Android AutoCompleteTextView Example

     

AutoCompleteTextView

AutoCompleteTextView is an editable text view that automatically shows completion suggestions while the user is typing. The suggestion list will appear in a drop down menu, allowing the user to choose one of the options and place it in the text box. This useful feature can make your application a lot more user friendly and easy to use. 

1.Adding AutoCompleteTextView to a layout file

          Our first step is to add an AutoCompleteTextView element to the application layout file. To do that go to the res/layout directory and add the following code to the xml layout file:

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	android:orientation="vertical"
	tools:context=".MainActivity" >
	<TextView
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="Select your favourite actor:"/>
	<AutoCompleteTextView
	android:id="@+id/autoText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"/>
	<TextView
	android:id="@+id/dinamicText"
	android:textSize="40sp"
	android:textStyle="italic"
	android:textColor="#FF8000"
	android:gravity="center"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text=""/>
	</LinearLayout>

view raw activity_main.xml hosted with ❤ by GitHub

           As you can see our AutoCompleteTextView element appears on lines 17-20, where we are giving it an id and defining its width and height. I have also added two TextView elements, one of them is used to let a user know what he or she is expected to type in to the edit text box (feel free to get rid of it if you don't need it). I will use the second TextView to show you how you can extract and use users selection.

2. Modifying application activity 

          
            Now we need to initialize our AutoCompleteTextView element in the activity file and fill it with the suggestion that we want  to appear. Go to the src/packagename directory and paste the following code to the MainActivity.java file:

	package autocompletetextview.tktutorials.com;
	import android.app.Activity;
	import android.content.Context;
	import android.os.Bundle;
	import android.view.TextureView;
	import android.view.View;
	import android.widget.AdapterView;
	import android.widget.ArrayAdapter;
	import android.widget.AutoCompleteTextView;
	import android.widget.AdapterView.OnItemClickListener;
	import android.widget.TextView;
	import android.widget.Toast;
	public class MainActivity extends Activity {
	private final Context context = this;
	private AutoCompleteTextView favActor;
	private TextView printedText;
	private String selectedActor;
	private ArrayAdapter<String> actorAdapter;
	private static final String[] ACTORS = new String[] {
	"Brad Pitt", "Leonardo DiCaprio", "Johnny Depp", "Morgan Freeman",
	"Hugh Lawrie", "Will Ferrel"};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	printedText = (TextView) findViewById(R.id.dinamicText);
	favActor = (AutoCompleteTextView)findViewById(R.id.autoText);
	loadData();
	favActor.setOnItemClickListener(new OnItemClickListener() {
	@Override
	public void onItemClick(AdapterView<?> parent, View view,
	int position, long id) {
	selectedActor = (String) parent.getItemAtPosition(position);
	printedText.setText(selectedActor);
	}
	});
	}
	private void loadData() {
	actorAdapter = new ArrayAdapter<String>(this,
	android.R.layout.simple_dropdown_item_1line, ACTORS);
	favActor.setAdapter(actorAdapter);
	favActor.setThreshold(1);
	}
	}

view raw tutorial.java hosted with ❤ by GitHub

Code Explanation:

22-24 - a string array is created and filled with the values that later will be used as suggestions in our AutoCompleteTextView element;

31 - initialization of the AutoCompleteTextView;

33 - setOnItemClickListener public method is used to set a listener that will be notified when an item in the drop down list is clicked by a user;

39 - we set the value of the TextView to the one selected by a user;

44 - 49 in the loadData() method we use a data adapter to obtain the list of suggestions from our String array;  setThreshold public method id used to specify the minimum amount of characters that user has to type before the drop down list of suggestions is shown.

Source Code

References:
http://developer.android.com/reference/android/widget/AutoCompleteTextView.html
http://developer.android.com/reference/android/widget/ArrayAdapter.html