There are a lot of auto-complete scenarios in the android app. For example, when you use a search engine, you input some characters in the search box then a list of search keywords will pop up. It is not difficult to achieve. This example will show you how to do this use android.widget.AutoCompleteTextView
component.
1. AutoComplete 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 three core files: activity_auto_complete_text_view.xml, AutoCompleteTextViewActivity.java, AndroidManifest.xml.
./ ├── app │ ├── build.gradle │ ├── proguard-rules.pro │ └── src │ ├── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ │ └── com │ │ │ └── dev2qa │ │ │ └── example │ │ │ ├── AutoCompleteTextViewActivity.java │ │ ├── res │ │ │ ├── layout │ │ │ │ ├── activity_auto_complete_text_view.xml
2. android.widget.AutoCompleteTextView Class Introduction.
- AutoCompleteTextView is a subclass of EditText.
- 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 the user inputs one character then AutoCompleteTextView will start to show matching words.
3. activity_auto_complete_text_view.xml
- 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 the 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.
- Find the control through the method findViewById.
- Prepare the data source. If the data in the data source matches user input, then the matched data will be displayed in the drop-down list.
- 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
- 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>