Create An Auto Suggest Box In Xamarin Android App Using Visual Studio 2015 Update 3

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps. (Ex. Windows phone, Android, iOS) in Xamarin platform, where the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Auto Suggest Box is called, if you type any word in the textbox. Type the first letter and automatically it will show the word (Ex: type "i" and it starts showing words that start with "i" such as India, Israel etc).

Prerequisites

Visual Studio 2015 Update 3

The steps, given below, need to be followed in order to create an Auto Suggest box in Xamarin Android app, using Visual Studio 2015 Update 3.

Step 1 - Click file--> select New--> select Project. After clicking the project, click open all the types of projects in Visual Studio
or click (Ctrl+Shift+N)

Step 2 - After opening the New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Give your Android app name (Ex:sample) and give the path of your project. Click OK.

Step 3 - Go to Solution Explorer. In Solution Explorer, have all the files and source in your project.

Select Resource-->Layout-->double click to open main.axml page. If you want to select the source, write XAML code.

If you want to design, choose the designer Window and you can design your app.

Step 4 - After opening main.axml, file will open the main page designer. In this page, you can design, as per the type you want.

You will delete the Default hello world button. Go to the source panel and you can see the button coding. You need to delete it.

After deleting XAML code, delete C# button action code. Go to the MainActivity.cs page. You need to delete the button code.

Step 5 - Go to the toolbox Window which has all the types of tools and controls.You will go to toolbox Window and scroll down.

You will see all the tools and controls.

You will drag and drop TextView and AutoCompleteTextView control in your main.axml page.

Step 6 - After dragging and dropping, TextView and AutoCompleteTextView will be show in your app.

Step 7 - Go to the properties Window and edit the text value(Ex: text=country).

Step 8 - Go to the Main.axml source tap and you will change the Id value or note the value.

Main.axml

<TextView android:text="Country" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView1" />
<AutoCompleteTextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/autoCompleteTextView1" />

Step 9 - Add one XML page and it's name is called list.xml

Go to Solution Explorer--> Resource-->Layout Right click Layout --> Add--> New item.

Step 10 - Select Visual c# --> select XML file--> give the name of XML file and click add.

Step 11 - Write TextView code. TextView shows the auto text values.
The code, given below, is required to write the list.xml file-

list.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16sp"
android:textColor="#fff">
</TextView>

Step 12 - Go to the MainActivity.cs page and write C# code, given below-

ManiActivity.cs

public class MainActivity: Activity
{
//declare string array CONTRIES
static string[] COUNTRIES = new string[] {
"Australia",
"Austria",
"Azerbaijan",
"Bahrain",
"Bangladesh",
"Barbados",
"Belarus",
"Belgium",
"Belize",
"Benin",
"Bermuda",
"Bhutan",
"Bolivia",
"Bulgaria",
"Burkina Faso",
"Burundi",
"Iceland",
"India",
"Indonesia",
"Iran",
"Iraq",
"Ireland",
"Israel",
"Italy",
"Jamaica",
"Japan",
"Jordan",
"Kazakhstan",
"Kenya",
"Kiribati",
"Kuwait",
"Kyrgyzstan",
"Laos",
"Latvia",
"Lebanon",
"Lesotho",
"Liberia",
"Libya",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macau",
"Madagascar",
"Malawi",
"Malaysia",
"Maldives",
"Mali",
"Malta",
"Marshall Islands",
};
// write AutoCompleteTextView code between thw OnCreate() method
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
AutoCompleteTextView textView = FindViewById < AutoCompleteTextView > (Resource.Id.autoCompleteTextView1);
var adapter = new ArrayAdapter < String > (this, Resource.Layout.list, COUNTRIES);
textView.Adapter = adapter;
}

Step 13 - If you have Android virtual device, you can run the virtual device. if you don't have it, run your Android phone.

Connect Android phone, via USB cable in your system or laptop. If you connect with Andriod mobile phone, it shows the message Allow USB debugging?

If you run the app in the mobile, always check allow from this computer. Click OK button.

Go to Visual Studio.

If you connect your Andriod phone, it shows the run menu (Ex:LENOVO A6020a40(Android 5.1-API 22)). It shows the phone in run option.

Go to "click the connected Android phone" and it will run in your Android phone.

Output

In this, the app runs, which may take sometime because the app is built in to your phone and is installed in your phone.
It will take some time.

After running your app in your phone, it shows the app with Auto Suggest Box.

Type "i" show the "i" starting values.

Summary - This was the process to create an Auto Suggest box in Xamarin Android app, using Visual Studio 2015 Update 3.