Xamarin

Why Xamarin?– When considering how to build iOS and Android applications, many people think that the native languages, Objective-C, Swift, and Java, are the only choice. However, over the past few years, an entirely new ecosystem of platforms for building mobile applications has emerged.

Xamarin is unique in this space. We can use Xamarin to build apps for various platforms. With this cross-platform solution a developer can create the one and only mobile app for several platforms, take iOS and Android, for instance, and spend less time and money for that.

One of the benefits of Xamarin development is that it makes an app feel native-like.

To build an app for multiple platforms the developer doesn’t need to apply different programming languages to suit each of the platforms. Using Xamarin for development requires only C#.

Due to the fact that Xamarin needs less coding and uses only one language, it decreases error and bug rate.

Features of Xamarin:

Complete Binding for the underlying SDKs – Xamarin contains bindings for nearly the entire underlying platform SDKs in both iOS and Android. Additionally, these bindings are strongly-typed, which means that they’re easy to navigate and use, and provide robust compile-time type checking and during development. This leads to fewer runtime errors and higher quality applications.
Objective-C, Java, C, and C++ Interop – Xamarin provides facilities for directly invoking Objective-C, Java, C, and C++ libraries, giving you the power to use a wide array of third party code that has already been created. This lets you take advantage of existing iOS and Android libraries written in Objective-C, Java, or C/C++. Additionally, Xamarin offers binding projects that allow you to easily bind native Objective-C and Java libraries using a declarative syntax.
Modern Language Constructs – Xamarin applications are written in C#, a modern language that includes significant improvements over Objective-C and Java such as Dynamic Language Features, Functional Constructs such as Lambdas, LINQ, Parallel Programming features, sophisticated Generics, and more.
Amazing Base Class Library (BCL)– Xamarin applications use the .NET BCL, a massive collection of classes that have comprehensive and streamlined features such as powerful XML, Database, Serialization, IO, String, and Networking support, just to name a few. Additionally, existing C# code can be compiled for use in applications, which provides access to thousands upon thousands of libraries that will let you do things that aren’t already covered in the BCL.
Modern Integrated Development Environment (IDE) – Xamarin uses Xamarin Studio on Mac OS X and Visual Studio on Windows. These are both modern IDE’s that include features such as code auto-completion, a sophisticated Project and Solution management system, a comprehensive project template library, integrated source control, and many others.
Mobile Cross-Platform Support – Xamarin offers sophisticated cross-platform support for the three major mobile platforms of iOS, Android, and Windows Phone. Applications can be written to share up to 90% of their code, and our Xamarin. The mobile library offers a unified API to access common resources across all three platforms. This can significantly reduce both development costs and time to market for mobile developers that target the three most popular mobile platforms.

Difference between Xamarin, PhoneGap and Titanium:

Advantages of PhoneGap:

Small and simple native API sets enable easy porting to different environments.
High reusability with HTML5, CSS, and JavaScript. Anything written as a webpage can be easily wrapped up as a native mobile application.
Supports all platforms and operating systems which include iOS, Android, Windows Phone 8, Blackberry, Firefox OS, and Ubuntu.
Developers who are accustomed to HTML/CSS/JavaScript, find it easy to start working with PhoneGap.

Drawbacks of PhoneGap:

Lower performance of apps as the original codes of the app remains that of a web app and launches via a web browser. This means the performance of PhoneGap apps doesn’t come close to native apps
Too many fragmented libraries and frameworks at a very basic level
User interface of the app varies depending on the quality of Web View rendered

Advantages Titanium:

Better performance due to native API usage, which also gives access to elements and features of iOS and Android
The look and feel of Titanium apps are better than apps built on other platforms as the UI is essentially native
With Javascript, it ensures quick and easy development

Drawbacks Titanium:

No support for third-party libraries
Difficulty in developing complex applications
Since it doesn’t use HTML5 and CSS, the animations and DOM elements are laggy and less responsive.

Advantages of Xamarin:

Xamarin has TestCloud which allows you to test your apps automatically
Provides 100% code reuse with Xamarin.Forms UI development using a shared code base and logic. This saves a lot of time and resources
Supports patterns like MVC and MVVM
Xamarin.Android supports Google Glass devices, Android Wear, and Firephone
The learning curve is relative. If your team knows C#, it is comparatively easy to get started with Xamarin.

As we know no technology is 100% perfect! Xamarin also has some drawbacks as follows:

It does not provide access to certain Android-specific UI controls.
Impacts load time as it has its own runtime
Does not support sharing of codes outside the Xamarin environment for native or HTML5 development

Layouts in Xamarin forms:

StackLayout

The StackLayout is the simplest form to organize controls in Xamarin.Forms. As its name says, we organize controls sequentially using a stack. To set the content of a StackLayout we use the Children property.

StackLayout has two orientation types, by default, StackLayout shows its children vertically, however, we can use the Orientation property to change the way children are displayed.

Simple example:

public class HorizontalLetters : ContentPage
{
	public HorizontalLetters ()
	{
		Padding = new Thickness (0, Device.OnPlatform (20, 0, 0));
		Content = new StackLayout () {					
			Orientation = StackOrientation.Horizontal,
			Children = {
				new Label() {Text="1", FontSize = 30},
				new Label() {Text="2", FontSize = 30},
				new Label() {Text="3", FontSize = 30},
				new Label() {Text="4", FontSize = 30},
				new Label() {Text="5", FontSize = 30}
			}
		};
	}
}

Output will be: 12345

AbsoluteLayout

It positions and sizes child elements proportional to its own size and position or by absolute values. Child views may be positioned and sized using proportional values or static values, and proportional and static values can be mixed. AbsoluteLayout used to create pixel-perfect UIs.

Because of the positioning model of AbsoluteLayout, the layout makes it relatively straightforward to position elements so that they are flush with any side of the layout, or centered. With proportional sizes and positions, elements in an AbsoluteLayout can scale automatically to any view size

Each child element describes its location and size with the AbsoluteLayout.LayoutBounds attribute. Use a comma-separated list to indicate the bounding rectangle (x, y, width, and height) values:

< AbsoluteLayout >
  < BoxView
          AbsoluteLayout.LayoutBounds ="90, 50, 75, 25"
          BackgroundColor ="{x:Static c:Hues.Sky}" />
</ AbsoluteLayout >

The parameters for the AbsoluteLayout.LayoutBounds attributes are as follows:

X: the horizontal position of the element
Y: the vertical position of the element
Width: the width of the element
Height: the height of the element

This snippet results in a 75-pixel wide, 25-pixel tall BoxView that is positioned 90-pixels left and 50-pixels down from the upper-left corner of its parent.

RelativeLayout

It is used to position and size views relative to the properties of the layout or sibling views. Unlike AbsoluteLayout, RelativeLayout does not have the concept of the moving anchor and does not have facilities for positioning elements relative to the bottom or right edges of the layout. RelativeLayout does support positioning elements outside of its own bounds. RelativeLayout is used to create UIs that scale to fit any screen size. Each element in the RelativeLayout can define a constraint, which is a rule that defines how the element relates to other items (parent, siblings).

There are several constraint types available:

RelativeLayout.YConstraint
RelativeLayout.XConstraint
RelativeLayout.WidthConstraint
RelativeLayout.HeightConstraint

A constraint can have the following values:

ElementName: the name of the element that the constraint is relative to
Type: whether the constraint is relative to the parent or another view
Property: which property on the relative element to use for the constraint
Factor: the multiplier for the constraint
Constant: an offset for the constraint

A simple example with Label:

< RelativeLayout
        BackgroundColor ="{x:Static c:Hues.Sky}" >
  <Label x:Name="MainLabel" Text="Example"
               BackgroundColor ="Black" FontSize="24"
      RelativeLayout.WidthConstraint =
    "{ConstraintExpression
      Type=RelativeToParent, Property=Width,
      Factor=0.9, Constant=0}"
      RelativeLayout.XConstraint =
    "{ConstraintExpression Type=RelativeToParent,
      Property=X, Constant=20}" />

Grid

Grid Layout supports arranging views into rows and columns. Rows and columns can be set to have proportional sizes or absolute sizes. The Grid layout should not be confused with traditional tables and is not intended to present tabular data. The grid does not have the concept of a row, column, or cell formatting. Unlike HTML tables, Grid is purely intended for laying out the content.

Simple Example:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="2" android:columnCount="2">
    <TextView android:text="Cell 0,0" />
    <TextView android:text="Cell 0,1" />
    <TextView android:text="Cell 1,0" />
    <TextView android:text="Cell 1,1" />
</GridLayout>

ScrollView

Scroll views controls are used to display and manipulate content that doesn’t fit within the screen. They allow the user to zoom in and out of the content. ScrollView is inherited from the Non-generic Layout class. That is the same reason why it does not support a generic way to add children.