Android AutoCompleteTextView Example

There are a lot of auto complete scenarios in android app. For example when you use a search engine, you input some characters in search box then a list of search keyword will popup. It is not difficult to achieve. This example will show you how to do this use android.widget.AutoCompleteTextView component.

1. Auto Complete Example Screen Effect And Project File Structure.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/UEjnv9q4Hzw

This example includes below three core files : activity_auto_complete_text_view.xml, AutoCompleteTextViewActivity.java, AndroidManifest.xml.

2. android.widget.AutoCompleteTextView Class Introduction.

1. AutoCompleteTextView is a sub class of EditText.
2. android:completionThreshold: This property is used to set the controls to begin automatic matching when the number of characters is entered.
   In our example, this value is 1 which means when user input one character then AutoCompleteTextView will start to show matching words.

3. activity_auto_complete_text_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.dev2qa.example.AutoCompleteTextViewActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp">

        <AutoCompleteTextView
            android:id="@+id/autoCompleteTextViewCar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:completionThreshold="1"
            android:text="@string/auto_complete_text_view_car"
            android:dropDownWidth="wrap_content"/>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

The string auto_complete_text_view_car is defined in app / res / values / strings.xml file.

<resources>

    <string name="auto_complete_text_view_car">Input Favorite Car Name</string>

</resources>

4. AutoCompleteTextViewActivity.java

The use of AutoCompleteTextView in Activity is divided into three steps:

1. Find the control through findViewById.
2. Prepare the data source. If the data in the data source match user input, then the matched data will be displayed in the drop-down list.
3. Setting up the adapter, the adapter is used to connect the data to the control.

package com.dev2qa.example;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class AutoCompleteTextViewActivity extends AppCompatActivity {

    // This String array is the data source used to match user input in AutoCompleteTextView drop down list.
    String carArr[] = {"Ford" , "Audi" , "Benz", "BMW", "Volvo", "Toyota", "Honda", "Hyndai"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_auto_complete_text_view);

        // Find the AutoCompleteTextView object.
        AutoCompleteTextView autoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextViewCar);

        // Create a new data adapter object.
        ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, carArr);

        // Connect the data source with AutoCompleteTextView through adapter.
        autoCompleteTextView.setAdapter(arrayAdapter);

        // Register a OnTouchListener to autoCompleteTextView.
        autoCompleteTextView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if(view instanceof AutoCompleteTextView)
                {
                    AutoCompleteTextView parentView = (AutoCompleteTextView)view;

                    // Get user input text in AutoCompleteTextView.
                    String userInputText = parentView.getText().toString();

                    // Get default text in AutoCompleteTextView.
                    String defaultInputText = getResources().getString(R.string.auto_complete_text_view_car);

                    // If match then clear.
                    if(defaultInputText.equalsIgnoreCase(userInputText))
                    {
                        parentView.getText().clear();
                    }
                }
                // Return false to let android os continue process user input.
                return false;
            }
        });
    }
}

5. AndroidManifest.xml

<activity android:name=".AutoCompleteTextViewActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>