Introduction to Xamarin.Forms for Android Developers (Part 1)
Introduction to Xamarin.Forms for Android Developers (Part 1)
This tutorial will help you learn how to develop Xamarin.Forms apps for beginners.
Join the DZone community and get the full member experience.
Join For FreeWhat 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.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}