Android AutoCompleteTextView Tutorial With Example

Hello Readers! In this post, we are going to learn about how to use android autocompleteTextView widget in any android application. We will also go through different attributes of autocompleteTextView widget that can be used to customise it.

Output

Tutorialwing Android Autocompletetextview Output Autocompletetextview widget tutorial with example

Tutorialwing Android Autocompletetextview Output

Getting Started

AutocompleteTextView widget can be defined as below –

AutocompleteTextView is an editable textview that shows completion suggestions while the user is typing in it. The suggestions are displayed as list in the dropdown menu. When user selects any suggestion, it replaces the entered text in autoCompleteTextView.

Attributes of Android AutocompleteTextview Widget

Some of the popular attributes of android AutoCompleteTextView widget are –

Sr. XML Attributes Description
1 android:completionHint It defines the hint shown in the dropdown menu
2 android:completionHintView It defines the hint view shown in the dropdown menu
3 android:completionThreshold It defines the number of character that user must type before suggestion is displayed in drop down menu
4 android:dropDownAnchor View to anchor the auto-complete dropdown to
5 android:dropDownHeight Specifies the basic height of the dropdown
6 android:dropDownHorizontalOffset It specifies the amount of pixel by which dropdown is to be offset horizontally
7 android:dropDownSelector Selector in dropdown list
8 android:dropDownWidth Specifies the basic width of the dropdown

Some of the popular attributes of android AutoCompleteTextView inherited from TextView are –

Sr. XML Attributes Description
1 android:height It specifies height of the view
2 android:width It specifies width of the view
3 android:textStyle It specifies style of the text. For example, bold, italic or bolditalic etc.
4 android:textSize It specifies size of the text

Some of the popular attributes of autoCompleteTextView inherited from View are –

Sr. XML Attributes Description
1 android:alpha Sets alpha of the view
2 android:background Sets Background of the view
3 android:clickable Specifies whether view is clickable or not
4 android:focusable Control whether view can take focus or not



Example of Android AutCompleteTextView Widget

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

1. Creating New Project

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

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as AutoCompleteTextview. Then, click next button.
3. Select minimum SDK you need. However, we have selected 17 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 post to create a new project to know steps in detail.

Now, we will modify xml and java file to use autoCompleteTextview widget in the application.

2. 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:</string>

	<string-array name="countries_array">
		<item>India</item>
		<item>Albania</item>
		<item>Algeria</item>
		<item>American Samoa</item>
		<item>Andorra</item>
		<item>Angola</item>
		<item>Anguilla</item>
		<item>Antarctica</item>
	</string-array>

</resources>

Note that we have also defined an array to show suggestions in the autoCompleteTextview.

3. Use AutoCompleteTextview Widget in xml file

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

<?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:gravity="center"
	android:orientation="vertical">

	<AutoCompleteTextView
		android:id="@+id/autoCompleteTextView"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_margin="20dp"
		android:hint="@string/hint"/>

	<Button
		android:id="@+id/button"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/submit"/>

</LinearLayout>

In activity_main.xml file, we have used autoCompleteTextview and button widgets. Now, we will access these widgets in java file and perform some action on it.

4. Access AutoCompleteTextview Widget in java file

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

package com.tutorialwing.autocompletetextview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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[] countries = getResources().getStringArray(R.array.countries_array);
		// Create the adapter and set it to the AutoCompleteTextView
		ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, countries);
		textView.setAdapter(adapter);

		Button button = findViewById(R.id.button);
		if (button != null) {
			button.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 the list of suggestions to show while user is typing in the view. The selected suggestion from the dropdown list replaces text entered by the user in the autoCompleteTextview.

Finally, we have set a click listener to the button that displays text entered by the user in the autoCompleteTextview.

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

AndroidManifest.xml

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

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

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

That’s end of tutorial on Android AutoCompleteTextview widget.

Leave a Reply