Build Your First Android Application Using Xamarin Visual Studio 2015

Introduction

This article shows how we can develop Android applications, using Xamarin Visual Studio 2015 IDE. Previously, Android Studio and Eclipse supported Android Application development, whereas Android Studio provides more facilities than eclipse, so most Android app developers moved from eclipse to Android Studio. 

Nowadays, Web technologies all move towards mobile technologies. In today's market, only three American companies lead the mobile technology race. They are Google for Android supported OS, Apple for iOS and Microsoft for Windows OS. Before the launch of Xamarin, if we wanted to develop iOS apps and Android apps, we required two different IDEs, but now Xamarin Visual Studio provides facilities to develop iOS and Android apps on a common IDE. We can use cross platform Application development by using Xamarin Visual Studio & C#, which reduces both development costs and the time to market for  mobile developers who target the three most popular mobile platforms.

The steps are given below to create a "Hello world" Android Application, using Xamarin Visual Studio 2015.

Step 1

Create New Project from File-> New Project

We can develop Android apps for Wearables, OpenGL games, Single-View App using Visual studio 2015. I have selected "Blank App(Andriod)" template for this article.

Once the project is created, the folders given below can be found under the project.

Properties	Contains AndroidManifest.xml and AssemblyInfo.cs.
References	Reference Libraries for Android app development.
Components	It allows the Applications built on Xamarin to create rich user experiences and integrate with various third party Services with less work.
Asserts	You can add the files, which you want to deploy with your Application and you will access them using Android AssertManager
Resources	Images under drawables, layout descriptions under layout and string under value dictionaries can be included in your Application as resource files.
MainActivity.cs	This is the main class, as we find in other luggage.

Step 2

Add Layout to project

To design the Application layout, we need to add .axml file under Resources-> layout folder. When you create an app, using wizard; the "main.axml" is created by default. 

From the tool box, we can add various controls like button, Textbox, checkbox, Radio button etc. in our layout.

Here, I need to drag the “Text (Large)” control from the tool box to the layout Window in designer view. We can also add the control from source view.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="Hello Readers....!!!"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
</LinearLayout>

We are also able to change the properties of the control from the “property Window". 

Step 3

Set Content view to MainActivity.cs

To run this Main.axml layout, we need to set main layout in to MainActivity.cs as content view.

Step 4

Build and run an Application

Now, our Application is ready to build and run. We can build our Application from “Build Menu -> Build Solution”.

To run our Application in Android emulator, click on Play button (as shown in Figure given below) and you will see your Application running inside Android emulator.

Output

Example

Here, I take two EditText, one TextView and one button to perform additional operation of the two values given by the user. Thus, our Main.axml and layout looks, as shown below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="Hello Readers....!!!"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
    <TextView
        android:text="Value 1:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="86.0dp"
        android:layout_height="wrap_content"
        android:id="@+id/value1" />
    <EditText
        android:layout_width="382.5dp"
        android:text=""
        android:layout_height="wrap_content"
        android:id="@+id/txtfirstno"
        android:inputType="number"
        android:layout_marginLeft="0.0dp" />
    <TextView
        android:gravity="center"
        android:text="+"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:textSize="40dp" />
    <TextView
        android:text="Value 2:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/value2" />
    <EditText
        android:layout_width="match_parent"
        android:text=""
        android:layout_height="wrap_content"
        android:id="@+id/txtsecondno"
        android:inputType="number" />
    <Button
        android:text="="
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnequal"
        android:textSize="40dp" />
    <TextView
        android:text="Answer"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/answer" />
    <EditText
        android:layout_width="match_parent"
        android:text=""
        android:layout_height="wrap_content"
        android:id="@+id/editanswer"
        android:inputType="number" />
</LinearLayout>

Now, In MainActivity.cs, we need to set the variables for EditText and button after setting the content view and local variables in OnCreate() method to perform an additional operation, as shown below.

protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);
            Button equal = (Button)FindViewById(Resource.Id.btnequal);
            EditText firstno = (EditText)FindViewById(Resource.Id.txtfirstno);
            EditText secondno = (EditText)FindViewById(Resource.Id.txtsecondno);
            EditText result = (EditText)FindViewById(Resource.Id.editanswer);

            double num1, num2, ans;
            equal.Click += (sender, e) =>
            {
                if(firstno.Text!="" && secondno.Text!="")
                {
                    num1 = double.Parse(firstno.Text.ToString());
                    num2 = double.Parse(secondno.Text.ToString());
                    ans = num1 + num2;
                    result.Text = ans.ToString();
                }
                else
                {
                    result.Text = "0";
                }
            };
        }

Output

 

Summary

Xamarin Visual Studio 2015 supports cross platform mobile Application development features, so we can focus on three mobile platforms on a common IDE. In this article, we learned the flow of creating basic Android apps, using Xamarin Visual Studio 2015.