Auto Complete Text View in Xamarin

This article explains how to use an AutoCompleteTextView Control in an Android application in Xamarin / Mono for Android.

AutoCompleteTextView is an Editable TextView for displaying suggestions when the user starts typing in the control. The Suggestions are displayed in a drop down menu and when the user selects the item from the drop down list, the selected text is displayed in a TextView. Before starting, I suggest you read my previous articles in this series.
Let's Start.
Method 1

Using Default Android Resources.

1.
Create a New Android Application.

 
 
2. Drop a TextView, AutoCompleteTextView (with id="@+id/autoComplete1") and a Button control (with id="@+id/btn_Submit" and text="Submit") onto the Layout, Main.xaml.

 

The following is the Main.xaml source code:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent">  
  6.     <TextView  
  7.         android:text="Enter Name"  
  8.         android:textAppearance="?android:attr/textAppearanceMedium"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:id="@+id/textView1"  
  12.         android:padding="5dp" />  
  13.     <AutoCompleteTextView  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:id="@+id/autoComplete1" />  
  17.     <Button  
  18.         android:text="Submit"  
  19.         android:layout_width="fill_parent"  
  20.         android:layout_height="wrap_content"  
  21.         android:id="@+id/btn_Submit" />  
  22. </LinearLayout>  
In Activity1.cs, create a String Array (named names) for displaying the AutoComplete Suggestion and an ArrayAdapter for filling in the View, AutoCompleteTextView, with the list of names (Array). We have also created a btn_Submit.Click event. On clicking the btn_Submit it will display the text present in autoComplete1 (AutoCompleteTextView) in a Toast message and if AutoCompleteTextView is empty then Display a Toast Message (in other words Please Enter Name!).

The following is the activity1.cs code:
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4.   
  5. namespace AutoCompleteTextViewExample  
  6. {  
  7.     [Activity(Label = "AutoCompleteTextViewExample", MainLauncher = true, Icon = "@drawable/icon")]  
  8.     public class Activity1 : Activity  
  9.     {  
  10.         //Creating Instance of AutoCompleteTextView and Button  
  11.         AutoCompleteTextView autoComplete1;  
  12.         Button btn_Submit;  
  13.         protected override void OnCreate(Bundle bundle)  
  14.         {  
  15.             base.OnCreate(bundle);  
  16.             //setting the view for the Activity  
  17.             SetContentView(Resource.Layout.Main);  
  18.             //Get autoComplete1 AutoCompleteTextView and btn_Hello Button control from the Main.xaml Layout.  
  19.             autoComplete1 = FindViewById<AutoCompleteTextView>(Resource.Id.autoComplete1);  
  20.             btn_Submit = FindViewById<Button>(Resource.Id.btn_Submit);  
  21.   
  22.             //string array used for displayling AutoComplete Suggestion   
  23.             var names = new string[] {"Anoop","Arjit","Akshay","Ankit","Rakesh"};  
  24.             //Use ArrayAdapter for filling the View in other words AutoCompleteTextView with the list of names(Array).  
  25.             //Use SimpleSpinnerItem(Predefined layout in Android Resources) for displaying the dropdown list  
  26.             ArrayAdapter adapter = new ArrayAdapter<string>(this,Android.Resource.Layout.SimpleSpinnerItem,names);  
  27.             autoComplete1.Adapter = adapter;  
  28.   
  29.             btn_Submit.Click += btn_Submit_Click;  
  30.         }  
  31.         //btn_Submit Click Event  
  32.         void btn_Submit_Click(object sender, System.EventArgs e)  
  33.         {  
  34.             //Checking if autoComplete1.Text is not empty  
  35.             if (autoComplete1.Text != "")  
  36.             {  
  37.                 Toast.MakeText(this"Name Entered =" + autoComplete1.Text, ToastLength.Short).Show();  
  38.             }  
  39.             else  
  40.             {  
  41.                 Toast.MakeText(this"Please Enter Name!", ToastLength.Short).Show();  
  42.             }  
  43.         }  
  44.     }  
  45. }  
Preview: 
 
 
Method 2

Using Custom Resources.

In the preceding example, we used SimpleSpinnerItem for displaying the list in AutoCompleteTextView but we can also create Custom Resouces for displaying the Auto Suggested list. Let's add a new layout(named ListName.xaml) and drop a TextView Control onto it. Adjust textColor, textSize, padding and so on depending on your needs.

The following is the ListName.xaml code:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TextView xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:text="Text"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="wrap_content"  
  6.     android:id="@+id/textView1"  
  7.     android:padding="5dp"  
  8.     android:textSize="20dp"  
  9.     android:textColor="@android:color/black" />  
Go to Activity1.cs and in ArrayAdapter, use the Custom Layout Resource that we created. The other code remains the same. 
  1. ArrayAdapter adapter = new ArrayAdapter<string>(this, Resource.Layout.ListName, names);  
Preview: 

 

I hope you like this. Thanks.