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.

  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="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:minWidth="25px"  
  7.     android:minHeight="25px">  
  8.     <TextView  
  9.         android:text="Hello Readers....!!!"  
  10.         android:textAppearance="?android:attr/textAppearanceLarge"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:id="@+id/textView1" />  
  14. </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.

  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="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:minWidth="25px"  
  7.     android:minHeight="25px">  
  8.     <TextView  
  9.         android:text="Hello Readers....!!!"  
  10.         android:textAppearance="?android:attr/textAppearanceLarge"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:id="@+id/textView1" />  
  14.     <TextView  
  15.         android:text="Value 1:"  
  16.         android:textAppearance="?android:attr/textAppearanceLarge"  
  17.         android:layout_width="86.0dp"  
  18.         android:layout_height="wrap_content"  
  19.         android:id="@+id/value1" />  
  20.     <EditText  
  21.         android:layout_width="382.5dp"  
  22.         android:text=""  
  23.         android:layout_height="wrap_content"  
  24.         android:id="@+id/txtfirstno"  
  25.         android:inputType="number"  
  26.         android:layout_marginLeft="0.0dp" />  
  27.     <TextView  
  28.         android:gravity="center"  
  29.         android:text="+"  
  30.         android:textAppearance="?android:attr/textAppearanceLarge"  
  31.         android:layout_width="match_parent"  
  32.         android:layout_height="wrap_content"  
  33.         android:id="@+id/textView2"  
  34.         android:textSize="40dp" />  
  35.     <TextView  
  36.         android:text="Value 2:"  
  37.         android:textAppearance="?android:attr/textAppearanceLarge"  
  38.         android:layout_width="match_parent"  
  39.         android:layout_height="wrap_content"  
  40.         android:id="@+id/value2" />  
  41.     <EditText  
  42.         android:layout_width="match_parent"  
  43.         android:text=""  
  44.         android:layout_height="wrap_content"  
  45.         android:id="@+id/txtsecondno"  
  46.         android:inputType="number" />  
  47.     <Button  
  48.         android:text="="  
  49.         android:layout_width="match_parent"  
  50.         android:layout_height="wrap_content"  
  51.         android:id="@+id/btnequal"  
  52.         android:textSize="40dp" />  
  53.     <TextView  
  54.         android:text="Answer"  
  55.         android:textAppearance="?android:attr/textAppearanceLarge"  
  56.         android:layout_width="match_parent"  
  57.         android:layout_height="wrap_content"  
  58.         android:id="@+id/answer" />  
  59.     <EditText  
  60.         android:layout_width="match_parent"  
  61.         android:text=""  
  62.         android:layout_height="wrap_content"  
  63.         android:id="@+id/editanswer"  
  64.         android:inputType="number" />  
  65. </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.
  1. protected override void OnCreate(Bundle bundle)  
  2.         {  
  3.             base.OnCreate(bundle);  
  4.   
  5.             // Set our view from the "main" layout resource  
  6.             SetContentView (Resource.Layout.Main);  
  7.             Button equal = (Button)FindViewById(Resource.Id.btnequal);  
  8.             EditText firstno = (EditText)FindViewById(Resource.Id.txtfirstno);  
  9.             EditText secondno = (EditText)FindViewById(Resource.Id.txtsecondno);  
  10.             EditText result = (EditText)FindViewById(Resource.Id.editanswer);  
  11.   
  12.             double num1, num2, ans;  
  13.             equal.Click += (sender, e) =>  
  14.             {  
  15.                 if(firstno.Text!="" && secondno.Text!="")  
  16.                 {  
  17.                     num1 = double.Parse(firstno.Text.ToString());  
  18.                     num2 = double.Parse(secondno.Text.ToString());  
  19.                     ans = num1 + num2;  
  20.                     result.Text = ans.ToString();  
  21.                 }  
  22.                 else  
  23.                 {  
  24.                     result.Text = "0";  
  25.                 }  
  26.             };  
  27.         }  
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.


Similar Articles