Auto Complete Text View Widget Using Xamarin and Visual Studio

1. Overview

This article gives an introduction on how to create Auto Complete Text View Widget for an android application using Xamarin.

After reading this article you will be able to create Auto Complete Text View Widget that providers suggestion as soon as you start typing

For example:- In some circumstances you will need to select country and there will be a textbox in which you have to select country. When you start typing, let’s say you entered “IN” then it should give all the country name which starts from “IN” like India.

2. Prerequisites

1. Basic knowledge of C# and you must be interested in developing android application.
2. One android mobile to run the application.
3. And I am assuming that you have already installed Xamarin tool for visual studio and you have installed android SDK and API.

3. Steps to create an AutoComplete TextView Widget

Let’s start to create android application with visual studio and Xamarin, to create go to

File->New->Project. In the left list under Visual C# select android and then select Blank App (Android) as shown in below screenshot.

• Then give any appropriate project name, I’m giving AutoCompleteWidget as a project name after this click Ok to continue create project.

4. Project Structure

• When your project has been created, you will see project structure as shown in below screenshot.

• Create an XML file named listCountry.xml and save it inside the Resources\Layout\ folder
• And add the following xml code inside listCountry.xml file.

<?xml version="1.0" encoding="utf-8" ?>

<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="#000">

</TextView>

• As you can see layout folder under Resources, to create any layout for android apps.  Now open Main.axml file to see design and source part.
• To select country we need one textview(label) and one TextBox. You can create these control using drag and drop method or using source code. In this article I will use source code to create these controls.

Design

Source Code

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Enter Country"

        android:layout_marginRight="29.0dp"

        android:textColor="@android:color/white"

        android:layout_marginBottom="8.5dp"

        android:textSize="20dp" />

    <AutoCompleteTextView

        android:id="@+id/autoCompleteCountry"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="5dp" />

</LinearLayout>

• Now open MainActivity.cs file.

    [Activity(Label = "AutoCompleteWidget", MainLauncher = true, Icon = "@drawable/icon")]

    public class MainActivity : Activity

    {

        static string[] arrCountries = new string[] {

                    "Albania",

                    "Algeria",

                    "American Samoa",

                    "Andorra",

                    "India",

                    "Iceland",

                    "Irak",

                    "Iran"

                    };

        protected override void OnCreate(Bundle bundle)

        {

            base.OnCreate(bundle);

            // Set our view from the "main" layout resource

            SetContentView(Resource.Layout.Main);

           

          AutoCompleteTextView txtView = FindViewById<AutoCompleteTextView>       (Resource.Id.autoCompleteCountry);

            var arrAdapter = new ArrayAdapter<string>(this, Resource.Layout.listCountry, arrCountries);

            txtView.Adapter = arrAdapter;

        }

    }

•  arrCountries is the list of suggestions that will be provided in a drop-down list when the user types into the AutoCompleteTextView widget.
• That’s it we are done with coding now time to launch our application
• To run and test this application I will use my android phone  because android emulator runs very slow
• When you connect your android phone to your PC it will automatically detect your phone it will be shown as per below screenshot.

·         Note:-Make sure your phone is connected in USB debugging mode.

• Now run with F5 and this application will be installed in your mobile automatically.

• As you type, you should see something like this:

5. What do you think

hello readers I hope you liked this post to create an AutoCompleteTextView Widget android mobile application using Xamarin tool and visual studio. What do you think about it, let me know your concerns and queries, just write it down in comments and if you like it share it.