Android AutoCompleteTextView Example
Android Sample Codes

Android AutoCompleteTextView Example

Android AutocompleteTextView example program is one of the simplest program in android development. Android AutocompleteTextView is an editable text view that shows completion suggestions automatically when the user is typing first or first two letters in android apps.

In this tutorial we’ll implement the usage of  android AutoCompleteTextView. Mainly AutoCompleteTextView is used to show the suggestions when the user typing in an editable text field. A drop down menu will be showing the suggestions from which the user can select the desired item.

The list of suggestions is implemented using adapter and it lists the suggestions based on the number of characters entered by the user called threshold.

We can implement the list of suggestions automatically based on the threshold value set. For example when you type the first character of a word, it will lists the suggestions or when type first two character of a word, it will lists the suggestion. Based on the threshold we set (number of characters writing) it lists the suggestions.

This is the code for creating an Android AutoCompleteTextView.  

    <AutoCompleteTextView

        android:id="@+id/courselist"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/txtid"

        android:layout_marginTop="10dp"

        android:completionThreshold="1"/>

A threshold count of 1 depicts that to show the autocomplete drop-down list user need to type in at least one character. A threshold count of 2 depicts that to show the autocomplete drop-down list user need to type in at least two character. A threshold count of 3 depicts that to show the autocomplete drop-down list user need to type in at least three character and so on.

Android AutoCompleteTextView Example

As we already discussed an AutoCompleteTextView is a view that is similar to EditText. AutoCompleteTextView shows a list of completion suggestions automatically when the user is typing the characters in the editable text view.

When the user types the characters according to our need.it displays a lists of suggestions in the drop down menu. The user can choose an item from the drop down menu to select one of the suggestion.

Before we proceed make sure that you have installed android studio in your system. Download android studio from the site. Installation of JDK or later version is mandatory for successful installation of android studio.

This is a tutorial for implementing a list of courses from which user can select a course and the selected item will be displayed on the screen using AutoCompleteTextView.

AutoCompleteTextView Creation

Start a new project in Android Studio using an Empty Activity.  Just check here for the usage of Activiy in android.

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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"

    >

    <TextView

        android:id="@+id/txtid"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:text="Choose Your Course From The List"

        android:textAppearance="?android:attr/textAppearanceMedium"/>

    <AutoCompleteTextView

        android:id="@+id/courselist"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/txtid"

        android:layout_marginTop="10dp"

        android:completionThreshold="1"/>

    <TextView

        android:id="@+id/selecteditem"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/courselist"

        android:layout_marginTop="10dp"

        android:gravity="center"

        android:text="selected country will appear here"

        android:textSize="20sp"/>

</RelativeLayout>

 

In order to display the Array content in an AutoCompleteTextView  we need to implement Adapter. ArrayAdapter is used when we need list of items which is already stored in an Array.

MainActivity.java

package com.example.mca.autocompletesamplecode;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.AutoCompleteTextView;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener

{

    // get instances of AutoCompleteTextView and TextView

    AutoCompleteTextView  autoComplete;

    TextView displayitem;

    String courses[] = {

            "MCA",

            "Btech CSE",

            "Btech EEE",

            "Btech ECE",

            "Btech Civil",

            "Btech Production",

            "Btech Chemical",

            "Mtech CSE",

            "Mtech EEE",

            "Mtech ECE",

            "Mtech CSE"

    };

    @Override

    protected void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        autoComplete = (AutoCompleteTextView) indViewById(R.id.courselist);

        displayitem = (TextView) findViewById(R.id.selecteditem);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,courses);

// Refers the default layout android.R.layout.simple_list_item_1

        autoComplete.setAdapter(adapter);

        autoComplete.setOnItemClickListener(this);

    }

    @Override

    public void onItemClick(AdapterView<?> parent, View view, int position, long id)

    {

        //retrieve the user selected value

        String item = parent.getItemAtPosition(position).toString();

        // create Toast using user selection

        Toast.makeText(MainActivity.this, "Selected Item is: \t" + item, Toast.LENGTH_LONG).show();

        // set user selected value to the TextView

        displayitem.setText(item);

    }

}

The selected item is displayed in theTextView (displayitem.setText(item);) and it is also displayed using Toast class (Toast.makeText(MainActivity.this, “Selected Item is: \t” + item, Toast.LENGTH_LONG).show();).

AndroidManifest.xml

 <?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.mca.autocompletesamplecode">

    <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>

OUTPUT :

 

Android AutoCompleteTextView Example
Android AutoCompleteTextView Result

 

 

Leave a Reply

Your email address will not be published.