Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introduction to Xamarin.Forms for Android Developers (Part 1)

DZone's Guide to

Introduction to Xamarin.Forms for Android Developers (Part 1)

This tutorial will help you learn how to develop Xamarin.Forms apps for beginners.

· Mobile Zone ·
Free Resource

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:

Image title

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:

Image title

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

Image title

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

Image title

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:

Image title

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

Image title

Running the HelloWorld application by selecting the Genymotion virtual device:

Image title

The result will look like this:

Image title

Stop running by clicking the Stop Debugging:

Image title

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:

Image title

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.

Topics:
mobile ,mobile app development ,xamarin.forms ,cross platform development ,tutorial ,android

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}