×
×

Spread the love

In this android AutoCompleteTextView, example tutorial you will learn what is autocompletetextview.We will see how to implement it in android studio with examples.

Android AutoCompleteTextView

Android AutoCompleteTextView is a TextView that can be editable which is similar to EditText.What makes it different is it displays a drop down with list of suggestions based on user input.The user can choose an item from the list or continue to type manually.

Check this android UI controls tutorial to know more about UI controls

Creating AutoCompleteTextView in Android

Creating AutoCompleteTextView in android can be done in two ways.One is to define it in XML(layout)file.The other way is creating an object of it in Java programatically.

Creating AutoCompleteTextView in XML(layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    android:id="@+id/layout"
    android:padding="20dp">


   <AutoCompleteTextView
       android:id="@+id/auto"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="search mobiles"/>

</LinearLayout>

Creating AutoCompleteTextView in JAVA(Programatically)

package androidlaouts.codesinsider.com.androidlayouts;

import android.graphics.Color;
import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.Gravity;
import android.view.View;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ToggleButton;

public class LayoutExample extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.android_ui);

        AutoCompleteTextView textView = new AutoCompleteTextView(this);
        LinearLayout layout = findViewById(R.id.layout);
        layout.addView(textView);
    }
}

To display the suggestions for AutoCompleteTextView, we need to set the value for threshold attribute.Threshold value is nothing but the number of charecters after which the suggestions should appear.
Eg : Threshold = 2 makes the AutoCompleteTextView display a list of suggestions only after the user types 2 charecters.

The list of suggestions for AutoCompleteTextView will be populated form data adapter.
Generally AutoCompleteTextView is used to display text values so we will use ArrayAdapter for populating the suggestions list.

Android ArrayAdapter

In android ArraAdapter is used to display single type of data backed by an array like list of names, list of numbers, books etc.

Code snippet for array adapter in JAVA

ArrayAdapter(context context, layout resource, array of data);

Getting value from AutoCompleteTextView

AutoCompleteTextView textView = new AutoCompleteTextView(this);
String text = textView.getText().toString();

Android AutoCompleteTextview Attributes

Since AutoCompleteTextView is subclass of EditText we can inherit all the properties of EditText to AutocompleteTextview.So all the attributes of EditText will work for AutoCompleteTextView.

Refer Android EditText Attributes section of this Android EditText example Tutorial.

Item Click Listener & Item SelectedListener

Whenever the user clicks an item from the dropdown list it triggers a click event and the OnItemClickListener() method on AutoCompleteTextView object listens the click event and executes the code inside onItemClick() method.

In case of an AutoCompleteTextView the OnItemSelectedListener() is similar to OnItemClickListener() since clicking and selecting almost does the same thing which is getting data of that selected item.

Code snippet for ItemClickListener

final AutoCompleteTextView textView = findViewById(R.id.auto);
textView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                //your logic here
        }
});

Code snippet for ItemSelectedListener

final AutoCompleteTextView textView = findViewById(R.id.auto);
textView.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<?> adapterView, View view, int postion, long l) {
                //your logic here
            }

        @Override
        public void onNothingSelected(AdapterView<?> adapterView) {

        }
});

Android AutocompleteTextView Example

Lets see an example of implementing AutocompleteTextview where we bind a list of courses to AutoCompleteTextView and displaing the course name that was clicked by the user in a Toast message.

First we have to declare AutoCompletetextView in XML so lets do it.
Creating AutoCompleteTextView in XML

   <AutoCompleteTextView
       android:id="@+id/auto"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="search courses"/>

Now that we have declared AutocompleteTextView in XML we have to use that in java to set data.

final AutoCompleteTextView textView = findViewById(R.id.auto);

We have to create an array of data which we want to display as suggestions.

Declaring an array of data in Activity(JAVA)

String [] tech = {"java", "android","html", "css", "ios", "nodejs", "angular", "python"};

Now we have to create an arrayAdapter and bind the string array to arrayAdapter.

ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1,tech);

Now set the adapter to AutoCompleteTextView object and set threshold

textView.setAdapter(adapter);
textView.setThreshold(1);

Implementing clickListener on AutoCompleteTextView object and displaying a toast message when the user clicks on any item from the suggestions.

textView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
            String text = textView.getText().toString();
            Toast.makeText(LayoutExample.this, text, Toast.LENGTH_SHORT).show();
        }
});

The final XML file will look like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    android:id="@+id/layout"
    android:padding="20dp">

   <AutoCompleteTextView
       android:id="@+id/auto"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="search courses"/>

</LinearLayout>

The final Activity(JAVA) file will look like this

package androidlaouts.codesinsider.com.androidlayouts;

import android.graphics.Color;
import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ToggleButton;

public class LayoutExample extends AppCompatActivity {

    String [] tech = {"java", "android","html", "css", "ios", "nodejs", "angular", "python"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.android_ui);

        final AutoCompleteTextView textView = findViewById(R.id.auto);
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1,tech);
        textView.setThreshold(1);
        textView.setAdapter(adapter);
        textView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                String text = textView.getText().toString();
                Toast.makeText(LayoutExample.this, text, Toast.LENGTH_SHORT).show();
                }
        });
    }
}

Output for the above code snippets

android autocomplete textview output

This bring an end to Android AutoCompleteTetView example tutorial.We will learn some other user interface control in next article.Have a great day!!

Do like and share if you find this post helpful.Thank you!!

Reference: Android Official Documentation.


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.