What Is Xamarin.Forms?

Xamarin.Forms is a cross-platform natively backed UI toolkit abstraction that allows developers to easily create user interfaces that can be shared across Android, iOS, Windows, and Windows Phone.

Tools and Installation

To create a Xamarin.Forms application, we need to download and install Visual Studio (newest version). I am using Visual Studio Community 2017. In the installing process, we must install Xamarin.Forms by selecting Mobile Development in .NET in the Visual Studio Installer:

To test a Xamarin.Forms application, we can use AVDs (Android Virtual Devices) that are available in Visual Studio but they run very slow. I have been using Genymotion and I would recommend using it. 

The First Application

To create a Xamarin.Forms, we must:

• Select File > New > Project

• Select Installed > Visual C# > Cross-Platform > Mobile App (Xamarin.Forms)

• Fill in Name and selecting Location as follows:

• Click OK. In the next dialog, we need only to select the Android platform and click OK:

And now, the Solution Explorer window will look like this:

When creating a Xamarin.Forms application, we will work lots with three files: App.xaml, MainPage.xaml, and MainActivity.cs. We can look at the content of three of these files:

App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloWorld.App">
       <Application.Resources>
              <!-- Application resource dictionary -->
       </Application.Resources>
</Application>

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:HelloWorld"
             x:Class="HelloWorld.MainPage">
       <Label Text="Welcome to Xamarin.Forms!"
           VerticalOptions="Center"
           HorizontalOptions="Center" />
</ContentPage>

MainActivity.cs

using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
namespace HelloWorld.Droid
{
    [Activity(Label = "HelloWorld", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
            base.OnCreate(bundle);
            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }
    }
}

Before running the HelloWorld application, we need to open the Genymotion:

Selecting a virtual device and click the Start button. A Genymotion virtual device is ready:

Running the HelloWorld application by selecting the Genymotion virtual device:

The result will look like this:

Stop running by clicking the Stop Debugging:

Open the MainPage.xaml file again, change the content of Text attribute of Label as follows:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:HelloWorld"
             x:Class="HelloWorld.MainPage">
       <Label Text="Hello World! I am Ngoc Minh."
           VerticalOptions="Center"
           HorizontalOptions="Center" />
</ContentPage>

Running the HelloWorld app again:

Conclusion

In this article, I have introduced about Xamarin.Forms and tools for creating and testing a Xamarin.Forms. I my next articles, we will discover more about Xamarin.Forms for Android developers.