Android App with Xamarin on Mac

I think I don’t like to be limited and thus I keep exploring and learning new technologies; however, I made a conscious choice in college not to do Java (for whatever reason) and that kept me off Android for so long. But then, there came Xamarin! A cross platform mobile app development software.

Installation

Xamarin allows you to write code in C# and then build it for Android, iOS or Windows Phone. Visual Studio has it integrated, and now we have a Visual Studio for Mac. I grabbed a copy online and installed it to go exploring.

New Project

Launch Visual Studio and pick an Android app project:

Give your app a name and an organisation identifier, together they form the package name on Android Play Store. Complete the Wizard and you have a basic template ready!

IDE

Visual Studio IDE has a familiar interface. The solution will have one project – TipCalculator in this case.

In Android, Resources > layout has Main.axml. “axml” files are created by Xamarin and are equivalent to xml layout files in native Android apps. Layout means the UI.

The code behind file for this layout is MainActivity.cs. An Android app can be described as a set of activities, where each activity has a UI and some code-behind, and some extra files like images, data files, etc.

For example, an activity in this case is to calculate tip: we will design a UI for the user to input bill amount and calculate tip, and we will write code in the code behind to make it work. There can be multiple activities in a complex scenario and navigation from one UI to another while you interact with the app through widgets/controls.

The App

We need to create a UI first. Open Main.axml in designer/source editor and add an editText to receive input, a calculate button and a textView to display calculated Tip value.

We added an ‘ID’ to every control in the UI. This will be accessed in the code behind file to make it work. A corresponding ID is generated in Resource.designer.cs

Now some code in code behind file – MainActivity.cs

 using Android.App;
 using Android.Widget;
 using Android.OS;
 using System;
 namespace TipCalculator
 {
     [Activity(Label = "Tip Calculator", MainLauncher = true, Icon = "@mipmap/icon")]
     public class MainActivity : Activity
     {
         EditText inputBill;
         Button cmdCalculate;
         TextView outputTip;
         protected override void OnCreate(Bundle savedInstanceState)
         {
             base.OnCreate(savedInstanceState);
             // Set our view from the "main" layout resource
             SetContentView(Resource.Layout.Main);
             inputBill = FindViewById<EditText>(Resource.Id.edittext1);
             cmdCalculate = FindViewById<Button>(Resource.Id.button1);
             outputTip = FindViewById<TextView>(Resource.Id.textView3);
             cmdCalculate.Click += onCalculateClick;
         }
         void onCalculateClick(object sender, EventArgs e)
         {
             var bill = double.Parse(inputBill.Text);
             outputTip.Text = (bill * 0.05).ToString();
         }
     }
 } 

In this code, Label=”Tip Calculator” set the application title. MainLauncher=true is set to make this activity start on process launch.

Next, OnCreate() takes an argument of type Bundle. This is passed every time the activity window is destroyed and recreated, and that happens very often including the time we rotate. The previous state is saved in a bundle and calling the constructor with the bundle helps restore the cached state.

To instantiate a layout, we find the layout using Resource.Layout.Main and set it the current view. This is done by the ID that was created in Resource.designer.cs and maps to the right axml file. This builds the UI and shows it for the current activity.

We then search for ID for the controls of our interest on the UI. In our axml, we declared ID as:

android:id=“@+id/textView3“

This generates an integer ID for the name – textView3:

// aapt resource value: 0x7f0c0055public const int textView3 = 2131492949;

Set an event to button click and add logic to it.

cmdCalculate.Click += onCalculateClick;

Wow! First Android app. With basic knowledge of application development on Windows (.NET), this was quick!

Tip

The application can be deployed to an emulator and tested. If you get deployment error for x86:

Deploying package to 'emulator-5554'
The package does not support the device architecture (x86). You can change the supported architectures in the Android Build section of the Project Options.
Deployment failed. Architecture not supported.

Right click on Project > Options > Build > Android Build > Advanced tab and select x86.