How to Mobile App Development with Xamarin Forms

Rashed Rana

Author:

Total Comments: 985

Total: 144 Posts

Home » Android Development » How to Mobile App Development with Xamarin Forms

This year the mobile app turns 10 years old. In this past decade, we have seen websites redesigned to scale and respond to a variety of mobile devices such as tablets and smartphones to provide a “like” mobile native app UI. There has been many frameworks developed such as Bootstrap, Foundation etc. to help aid designers and developers with the design of mobile responsive websites.

 

However, as the mobile app became more popular with the increase of sales on smartphones and tablets across the three main platforms, iOS, Android, and Windows this left existing design agencies, web designers and developers at a bit of a crossroads.  How to support the development of these mobile platforms whilst utilising the existing design and development skills of their team, without the need to invest time learning new programming languages like Java for Android, Objective-C for iOS and C# for Windows.

WHAT IS XAMARIN FORMS?

The answer to their problem was Xamarin Forms.  Xamarin Forms is a mobile application platform that comes bundled with Microsoft’s Visual Studio IDE available on both Windows and Mac. With Xamarin Forms, designers and developers could build native apps for iOS, Android and Windows from a single, shared C# codebase. Having spent time developing apps for clients with Xamarin Forms for the past 2 years I decided to create this article to provide web designers and web developers an insight into using Xamarin Forms to develop apps and some lessons learned during my time developing with it. With this article, I am going to assume you having a base level of a programming language or for designers a good understanding of HTML and CSS. OK, now that the formalities are out the way let us dive right in!

HOW XAMARIN FORMS WORKS

Xamarin Forms works by mapping the UI elements you create from your shared PCL (Portable Class Library) UI code to their corresponding native equivalent on Windows, Android and iOS. So this means that your applications are completely native! Each Xamarin Forms page is split into two parts. A XAML file to handle the Visual part of your UI and CODE BEHIND file to handle the behaviour of that page, such as buttons and displaying data.

This year the mobile app turns 10 years old. In this past decade, we have seen websites redesigned to scale and respond to a variety of mobile devices such as tablets and smartphones to provide a “like” mobile native app UI. There has been many frameworks developed such as Bootstrap, Foundation etc. to help aid designers and developers with the design of mobile responsive websites.

 

However, as the mobile app became more popular with the increase of sales on smartphones and tablets across the three main platforms, iOS, Android, and Windows this left existing design agencies, web designers and developers at a bit of a crossroads.  How to support the development of these mobile platforms whilst utilising the existing design and development skills of their team, without the need to invest time learning new programming languages like Java for Android, Objective-C for iOS and C# for Windows.

WHAT IS XAMARIN FORMS?

The answer to their problem was Xamarin Forms.  Xamarin Forms is a mobile application platform that comes bundled with Microsoft’s Visual Studio IDE available on both Windows and Mac. With Xamarin Forms, designers and developers could build native apps for iOS, Android and Windows from a single, shared C# codebase. Having spent time developing apps for clients with Xamarin Forms for the past 2 years I decided to create this article to provide web designers and web developers an insight into using Xamarin Forms to develop apps and some lessons learned during my time developing with it. With this article, I am going to assume you having a base level of a programming language or for designers a good understanding of HTML and CSS. OK, now that the formalities are out the way let us dive right in!

HOW XAMARIN FORMS WORKS

Xamarin Forms works by mapping the UI elements you create from your shared PCL (Portable Class Library) UI code to their corresponding native equivalent on Windows, Android and iOS. So this means that your applications are completely native! Each Xamarin Forms page is split into two parts. A XAML file to handle the Visual part of your UI and CODE BEHIND file to handle the behaviour of that page, such as buttons and displaying data.

USER INTERFACE…XAML OR C#?

 

Xamarin Forms provides you two options to author your application user interface.

XAML
Up first is XAML (eXtensible Application Markup Language).  This is an ideal method for front-end designers to get their feet wet with mobile UI development.  If you have any experience or knowledge of using XML, HTML, CSS etc. to create UI’s you will find familiarity using this markup especially with the aid of Visual Studios helpful intellisense.  Great news for any existing .NET developer used to developing desktop apps using WPF or Silverlight, you will be able to hit the ground running with little to no learning curve with more or less the same XAML markup you’re used to. Below is an example of a simple UI created using XAML.  As you can see all the elements are enclosed in HTML like tags and within each of these tags you have properties that you can set values with. For example if we take the “button” tag from the example below you will see a tag with a few properties and values such as “Text”, “TextColor”, “BackgroundColor”, any web designer with some experience of HTML and CSS will see the similarities in the markup and be able to get comfortable with XAML very quickly.

<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns=" http://xamarin.com/schemas/2014/forms"
xmlns:x=" http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainPage">
<TabbedPage.Children>
<ContentPage Title="Profile" Icon="Profile.png">
<StackLayout Spacing="20" Padding="20" VerticalOptions="Center">
<Entry Placeholder="Username" Text="{Binding Username}"/>
<Entry Placeholder="Password" Text="{Binding Password}" IsPassword="true"/>
<Button Text="Login" TextColor="White" BackgroundColor="#77D065" Command="{Binding LoginCommand}"/></StackLayout>
</ContentPage>
<ContentPage Title="Settings" Icon="Settings.png">
<!-- Settings -->
</ContentPage>
</TabbedPage.Children>
</TabbedPage>

C#
The second option is to create your UI in code. If you are a web developer, who knows C# or another object orientated programming language, or maybe are a web developer more used to backend programming then this may be the option you decide to take to create your mobile app user interface. For designers not used to programming markup the syntax may seem rather strange, but the takeaway here is BOTH the XAML markup above and the C# code below produce the exact same UI.

using Xamarin.Forms;
var profilePage = new ContentPage {
Title = "Profile",
Icon = "Profile.png",
Content = new StackLayout {
Spacing = 20, Padding = 50,
VerticalOptions = LayoutOptions.Center,
Children = {
new Entry { Placeholder = "Username" },
new Entry { Placeholder = "Password", IsPassword = true },
new Button {
Text = "Login",
TextColor = Color.White,
BackgroundColor = Color.FromHex("77D065") }}}};
var settingsPage = new ContentPage {
Title = "Settings",
Icon = "Settings.png",(...)};
var mainPage = new TabbedPage { Children = { profilePage, settingsPage } };

The image below shows the UI we have created from the mark up in XAML and C# and how it looks across the three platforms iOS, Android and Windows.

SO…WHICH IS BEST FOR UI?
From my experience coming from a front-end design background before becoming a full stack .NET developer I would say I certainly found creating the UI with XAML the preferred method as it gave you a hierarchical structure somewhat similar to HTML web pages I had created in the past. Once you learn the controls, layouts and associated properties it was very straightforward to take the design concepts you know from responsive web design and apply it to a native mobile app interface. Again, what UI option you take is purely down to what your current skill set is and what you are most comfortable with learning, however, for newcomers to Xamarin Forms I feel XAML would be your best option. So for the rest of this article all of the UI examples I’m going to show you will be using XAML mark-up.

Leave a Reply