Xamarin Android: Create An Auto Complete Widget

Introduction:

In this article, we will talk about how to create a text entry widget that provides auto-complete suggestions using AutoCompleteTextView in Xamarin Android. So, let`s get started.

Steps:

1. To get started, open Visual Studio and select File, then Project option. It will open up a new project dialog box as shown below (F: 1),
   
   
   
   
2. Select the Blank App (Android) project template and enter the name of the project as AutoCompleteApp and click on OK button. After clicking on Ok button, a blank Xamarin Android application will be created. In this application, we will create an UI in which a user types a technology name, he will get the suggestions for it.
   
   
3. Let`s add a new XML file in Resources\Layout folder. To add XML file, right click on Resources\Layout folder and select Add, then New Item option as shown below (F:2)
   
   
   
   It will open a dialog. Select the XML File item template and give it a name ListItem.xml as shown below (F: 3).
   
   
   
   
4. Add the following code in our ListItem.xml file.
   
   1. <? xml version="1.0" encoding="utf-8" ?>
   2. <TextView xmlns:android="http://schemas.android.com/apk/res/android"
   3. android:layout_width="fill_parent"
   4. android:layout_height="fill_parent"
   5. android:padding="10dp"
   6. android:textSize="16sp">
   7. </TextView>
   The above TextView will be used for each item that appears in the list of suggestions. We need to set the build action for this XML file as an Android Resource. To set the build action for this XML file, right click on file and select Properties option. It will open up Properties Window as shown below (F: 4). Here, we can set the Build Action of our XML file to Android Resource.
   
   
   
   
5. Open the Main.axml file (F: 5),
   
   
   
   
6. Delete the default Hello World, Click Me! Button. Go to the source view of Main.axml by clicking on Source View tab as shown below (F: 6)
   
   
   
   
7. Add the following code in Main.axml file.
   
   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="Technology"
   8. android:textAppearance="?android:attr/textAppearanceMedium"
   9. android:layout_width="match_parent"
   10. android:layout_height="wrap_content"
   11. android:id="@+id/textView1"
   12. android:layout_margin="20dp" />
   13. <AutoCompleteTextView
   14. android:layout_width="match_parent"
   15. android:layout_height="wrap_content"
   16. android:id="@+id/autoCompleteTextView"
   17. android:layout_margin="20dp" />
   18. </LinearLayout>
   In our Main.axml file, we have added a TextView and an AutoCompleteTextView widget. (We can also drag and drop these controls from Toolbox window on Design View).
   
   
8. Now let`s go to MainActivity.cs file. Default content for MainActivity.cs file is as shown below.
   
   1. namespace AutoCompleteApp
   2. {
   3. [Activity(Label = "AutoCompleteApp", MainLauncher = true, Icon = "@drawable/icon")]
   4. public class MainActivity: Activity
   5. {
   6. int count = 1;
   7. protected override void OnCreate(Bundle bundle)
   8. {
   9. base.OnCreate(bundle);
   10. // Set our view from the "main" layout resource
   11. SetContentView(Resource.Layout.Main);
   12. // Get our button from the layout resource,
   13. // and attach an event to it
   14. Button button = FindViewById < Button > (Resource.Id.MyButton);
   15. button.Click += delegate
   16. {
   17. button.Text = string.Format("{0} clicks!", count++);
   18. };
   19. }
   20. }
   21. }
   Delete the button, button click event handler and count variable which is declared at the top.
   
   
9. Add the following code in our MainActivity.cs file.
   
   1. using Android.App;
   2. using Android.Widget;
   3. using Android.OS;
   4. namespace AutoCompleteApp
   5. {
   6. [Activity(Label = "Technologies", MainLauncher = true, Icon = "@drawable/icon")]
   7. public class MainActivity: Activity
   8. {
   9. protected override void OnCreate(Bundle bundle)
   10. {
   11. base.OnCreate(bundle);
   12. // Set our view from the "main" layout resource
   13. SetContentView(Resource.Layout.Main);
   14. string[] technologies =
   15. {
   16. "Android",
   17. "ASP.NET MVC",
   18. "ASP.NET Core",
   19. "Azure",
   20. "Angular JS",
   21. "Big Data",
   22. "Database",
   23. "HTML5",
   24. "Internet of Things",
   25. "Machine Learning",
   26. "SQL Server",
   27. "Xamarin"
   28. };
   29. var autoCompleteTextView = FindViewById < AutoCompleteTextView > (Resource.Id.autoCompleteTextView);
   30. var adapter = new ArrayAdapter < string > (this, Resource.Layout.ListItem, technologies);
   31. autoCompleteTextView.Adapter = adapter;
   32. }
   33. }
   34. }
   Now let`s go through the code.
   
   a. We have created a list of strings, called technologies, which will be used for providing the suggestions.
   
   b. We captured the reference to our AutoCompleteTextView widget.
   
   c. A new array adapter is created. This array adapter is initialized with our ListItem layout which we have created in step 3 along with the technologies string array which will be used for providing the suggestions.
   
   d. Last step is we need to set this adapter to our AutoCompleteTextView Adapter property.
   
   
10. Now run the application and when we type something, we should get some suggestions as shown below (F: 7)
    
    
    

Conclusion:

In this article, we talked about how to create a text entry widget that provides auto-complete suggestions using AutoCompleteTextView widget in Xamarin Android. I hope you enjoyed reading the article.