Android AutoCompleteTextView

Android AutoCompleteTextView

AutocompleteTextView widget can be defined as below –

"Android AutoCompleteTextView is a editable text field, it displays a list of suggestions in a drop down menu from which user can select only one suggestion or value."

Some of the popular attributes of android AutoCompleteTextView widget are –

 

 

 

 

S. No. XML Attributes Description
1 android: id This is unique id of the space to uniquely identify the space.
2 android: height It specifies height of the Autocomplete TextView.
3 android: width It specifies width of the Autocomplete TextView.
4 android: textStyle It specifies style of the text. For example, bold, italic etc.
5 android: textSize It specifies size of the text.
6 android: alpha Sets alpha of the Autocomplete TextView.
7 android: background Sets Background of the Autocomplete TextView.
8 android: clickable Specifies whether view is clickable or not.
9 android: focusable Control whether view can take focus or not.
10 android: completionHint It defines the hint shown in the dropdown menu.
11 android: completionHintView It defines the hint view shown in the dropdown menu.
12 android: completionThreshold It defines the number of character that user must type before suggestion is displayed in drop down menu.
13 android: dropDownAnchor View to anchor the auto-complete dropdown to.
14 android: dropDownHeight Specifies the basic height of the dropdown.
15 android: dropDownHorizontalOffset It specifies the amount of pixel by which dropdown is to be offset horizontally.
16 android: dropDownSelector Selector in dropdown list.
17 android: dropDownWidth Specifies the basic width of the dropdown.

At first, we will create android application. Then, we will use AutocompleteTextView in this application.

Follow steps below to create new project. Please ignore the steps if you've already created a new application.

 

 

 

 

S. No. Steps
1 Open Android Studio.
2 Click on Start a new Android Studio Project Write application name as AutoCompleteTextView. Then, click next button.
3 Select minimum SDK you need. However, we have selected 14 as minimum SDK. Then, click next button
4 Then, select Empty Activity => click next => click finish.
5 If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit tutorial to Create a New Project to know steps in detail.

Now, we'll modify xml and java file to use autoCompleteTextview in the application.

Modify Values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
<string name="app_name">AutoCompleteTextView</string>
<string name="hint">Please type something...</string>
<string name="submit">Submit</string> 
<string name="entered_text">Entered text is:</string>

<string-array name="location_array">
<item>Dehradun</item>
<item>Ram Nagar</item>
<item>Mussoorie</item>
<item>Lansdowne</item>
<item>Kotdwar</item>
<item>Haridwar</item>
<item>Almora</item>
<item>Nainital</item>
</string-array>

</resources> 

Note that we've also defined an array to show suggestions in the AutoCompleteTextView.

 

 

 

 

Open res/layout/activity_main.xml file. Then, add below code into it.

<?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=".MainActivity">

<AutoCompleteTextView
android:id="@+id/autoCompleteTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_margin="20dp"
android:hint="@string/hint"/>

<Button
android:id="@+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/submit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/autoCompleteTextView"/>

</android.support.constraint.ConstraintLayout>

In activity_main.xml file, we've used AutoCompleteTextview and button. Now, we will use these AutoCompleteTextView and button in java file and perform some action on it.

Open src/main/java/com.ukacademe.autocompletetextview/MainActivity.java file. Then, add below code into it.

package com.ukacademe.autocompletetextview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        final AutoCompleteTextView textView = findViewById(R.id.autoCompleteTextView);
        // Get the string array
        String[] location = getResources().getStringArray(R.array.location_array);
        // Create the adapter and set it to the AutoCompleteTextView
        ArrayAdapter adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, location);
        textView.setAdapter(adapter);

        Button btnSubmit = findViewById(R.id.btnSubmit);
        if (btnSubmit != null) {
            btnSubmit.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String text = getString(R.string.entered_text) + " " + textView.getText();
                    Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
                }
            });
        }

    }
}

In MainActivity.java file, we have accessed autoCompleteTextview. Then, we set an adapter in it. Adapter contains a list of suggestions to show when the user type in the view. The suggestion selected from the dropdown list replaces text entered by the user in the AutoCompleteTextview.

Finally, we've set a click listener to the button that displays text entered by the user in the AutoCompleteTextview.

Since the file of AndroidManifest.xml is very important in any android application, we're also going to see the content inside this file.

Code inside src/main/AndroidManifest.xml file is as below –

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="com.ukacademe.autocompletetextview">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

When we run the program, we will get output as shown below.

UK Academe-AutoCompleteTextView-Output