Step by Step creating Hello World Native Android App using Xamarin

Dhananjay Kumar / Wednesday, July 22, 2015

If you are a beginner with Xamarin, this post is here to help you get started. Step by step, we’re going to show you how to create a native Android app using Xamarin.

Xamarin allows us to create native Android and iOS apps using C#. In this post, we’ll assume you have downloaded and installed Xamarin, and we’re going to create the app in Xamarin Studio. Let’s see how it’s done:

Step 1: Create a New Project and App

To create an app, first we need to create a new solution. To do this, launch Xamarin Studio and from the menu select File->New->Solution (or alternatively press Ctrl+Shift+N) to create a new solution.

On the next window, you need to provide the app name and the identifier name. Let’s name the app MyFirstApp. Leave the target platforms and the theme to the default value and click on next as shown in the image below:

On the next window, you need to configure the project. Give a name to the project and the Visual Studio Solution name. You also need to provide the path for the project creation. In this example, I am leaving the default project name MyFirstApp which is same as the app name.

Before creating the project, you can also verify the project structure in the window, then click on the create button to create the project.

Step 2: Create UI of the App

Next we’re going to create the simplest app – one that adds adding two numbers. To do this, we need

1. Two text boxes to get the user input

2. One button to invoke the operation

3. One text view to display the summation of two numbers

To create the UI, open the Main.axml file. You can find Main.axml inside the Resources\Layoutfolder in the solution explorer.

On the Main.axml page we will create the view. You can drag and drop the controls on the view from the toolbox.

We need to drag and drop:

1. Two edit text boxes

2. One button

3. One Text View

After dragging and dropping the controls in the Properties, set the Id of the edit textboxes, buttons and the text view.

Once the properties of the controls are set you can see source of the view created as shown in the listing below.

<?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">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNum1"
        android:textColor="#fff11d1d" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNum2"
        android:textColor="#ffe81616" />
    <Button
        android:text="Add"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnAdd" />
    <TextView
        android:text="Result here"
        android:layout_width="match_parent"
        android:layout_height="39.6dp"
        android:id="@+id/txtResult"
        android:textColor="#ffeb0f0f" />
LinearLayout>

To view the source click on the source in the bottom of the Main.axml file.

Step 3: Write the code behind

By now we’ve created the project and the app’s UI. Now let us see how we can write the code behind to add two numbers. In Xamarin, we use C# to write code, so we’ll need to perform the followings tasks:

1. Add a click event to button

2. Read value of the textboxes

3. Show the result in the text view

Here we’ll write code behind in the MainActivity.csfile.

In the MainActivity.cs file we need to write the following code:

Button button = FindViewById<Button> (Resource.Id.btnAdd);

            button.Click += delegate {
                EditText number1 = FindViewById<EditText>(Resource.Id.txtNum1);
                EditText number2 = FindViewById<EditText>(Resource.Id.txtNum2);
                TextView res = FindViewById<TextView>(Resource.Id.txtResult);
                int result = Convert.ToInt32(number1.Text)+ Convert.ToInt32(number2.Text);
                res.Text = result.ToString();
            };

In the above code snippet, we’ve:

1. Created a reference to UI controls

2. Attached a click event to the button

3. Added user input numbers

4. Displayed the result in the TextView

After adding the code to add two numbers, MainActivity.cs will contain the codes as shown in the listing below:

using System;

using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace MyFirstApp
{
    [Activity (Label = "MyFirstApp", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {

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

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button button = FindViewById<Button> (Resource.Id.btnAdd);

            button.Click += delegate {
                EditText number1 = FindViewById<EditText>(Resource.Id.txtNum1);
                EditText number2 = FindViewById<EditText>(Resource.Id.txtNum2);
                TextView res = FindViewById<TextView>(Resource.Id.txtResult);
                int result = Convert.ToInt32(number1.Text)+ Convert.ToInt32(number2.Text);
                res.Text = result.ToString();
            };
        }
    }
}

Step 4: Building and running the App

Now let’s go ahead and build the application. To do this, select Build then BuildAll from the menu, or press the F8 key.

On the successful build, you should get the Build successful message as shown in the image above.

Now to run the application in the Android emulator, you need to select the device where you’re going to run the application. To choose the emulator, select the Emulator from the Select Device dropdown as shown in the image below.

On running the application, you may get a message that says “Running this project requires an Android device with API 16 or above.” Remember that we have selected the default emulator, but if you have created a virtual device or emulator or API level 16 or above, you will not get the below message.

Click on the Configure Target API to open the Project Options window. Here, select the Minimum Android version to API level 12.

After changing the API level, click on the play button again to deploy the application in the emulator. You should see the app running as shown in the image below:

Conclusion

So there you have it! In this post we took a step by step look at how to create your first app using Xamarin. In the further posts, we will cover more complex Xamarin topics, so stay tuned. Thanks for reading and happy coding!