Android AutoCompleteTextView Example

1:19 PM Fighttech 1 Comments

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 xmllayout 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 rawactivity_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 rawtutorial.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

Training Developer

Welcome to My Blog!

Follow Me

Android AutoCompleteTextView Example

1:19 PM Fighttech 1 Comments