Building cross-platform native mobile apps with Xamarin Forms

Posted by at 28-05-2018 17:36:11 in Article

 Hi guys, This is the first time i cover Xamarin.Forms here in my blog and my first written topic since year 2014. Very timely since we will have our "Love2Code" event coming this February 14 2017 sponsored by Microsoft. This topic will cover the basic fundamentals of of Cross-Platform mobile development using Xamarin.Forms and why is it worth to learn. We will be using Visual Studio 2015 as of this time since VS 2017 are still on release candidate. Image result for xamarin 
 Oh right, 2016 was a great year for Xamarin and Xamarin.Forms devs emerging as the winner of the Microsoft's acquisition of the Xamarin and have included it on Visual Studio editions (e.g. Community Editions) and for some reasons they have "open sourced" the Xamarin.Forms source code (Yes you read it right its open sourced) on GitHub you can skim it here. Before diving into cross-platform development with Xamarin.Forms, This are the things we need to consider.
  1. Is it cost-saving?
  2. Faster time to market
  3. User experience
  4. Potential user reach
  5. Learning Curve
Cost Saving
There were lot of cheapest options you can choose from take for example the Cordova and ReactNative. Maybe the cheapest of them all, and which is also open sourced, You can utilized existing skills of the team. But as you tailor some functionality (e.g. Platform specific and complex UI transitions) it will become more expensive. With Xamarin.forms you can also utilize your existing .NET team and most of all you can always fall back to native if it needs to. You can share libraries across all platform through portable class library (PCL) project on up to 80 to 90 percent.
Faster Time to Market
Cordova the clear winner here (Only when the app doesn't have complex requirement) and and some Competitor maybe also good but you cannot easily fall back to native approach. But for an enterprise-level app which have a good cloud integrations and tools the Xamarin is a clear winner here.
User Experience
Nothing beats a Native approach  when it comes to a better user experience, competitively Xamarin come near as close to native performance (users cannot take notice of it) it feels like native because its native (sound confusing but it is). Cordova fall as the lowest of them all, you can feel the slowness and some gestures doesn't work properly. When developing a five star apps we can always set the bar high the factor in choosing our platform of development.
Potential User Reach
Native approach fall behind on this matter, Now you want to reach all platforms as much as possible you need Cross-Platform approach like Xamarin.Forms.
Learning Curve
This is equally important with User Experience in my opinion especially when your working with a team. This is where the .NET team is dominant especially for wpf/silverlight xaml developers you can always utilize them using the same tools, libraries and principle in mobile development. Long term is always a big factor and Xamarin roadmap is taken into a higher level, please take a glimpse here
Cross Platform
Dev Cost
Dev Tool Cost
Dev Time
Near Native
Slow / Sluggish
Very Fast
Learning Curve
Getting Started with Xamarin.Forms Xamarin are now shipped with all Visual Studio Editions, Installation are very straightforward, However you may encounter a couple of issues during or after installation. Common problems like missing features and SDK problems. Latest Visual Studio updates are now capable of installing missing features.  Make sure to checked the following feature during installation. Image result for Visual Studio install missing feature 
  Frequently Encountered Issues and How to fix them 1.) Resource.Designer.cs issue, usually occur with merging issue or deleted resource assets, this can be fixed by deleting Resource.Designer.cs in project then  rebuild the Droid project then re-include Resource.Designer.cs file. DefaultNamespace2.png 
 2.) Could not find android.jar for API level XX, This happen when we upgrade our Xamarin.Forms nuget libraries on our Droid Project which has dependencies with higher version of SDK. Upgrading android SDK will resolve this issue under Tools> Android> Android SDK Manager. VcdXd.png 
 3.) m2Repository Error, This is caused by interrupted first time build of a Droid project in a newly installed VS/Xamarin (Usually it downloads Xamarin SDK), deleting all zip files under C:\Users\[UserName]\AppData\Local\Xamarin\zips will fix this problem. iN2os.png 
 4.) Application could not be started, Ensure that the application has been installed to the target device and has a launchable activity (MainLauncher = true). Solution: On your Android device delete the old version of the app on application manager
  Creating our First Xamarin.Forms Project Create a Blank Xaml App (Xamarin.Forms  Portable) under Cross-Platform Category and name "MyApp" or name whatever you want.  
 The template will create atleast 5 or 6 Project, It will create 1 portable project referenced to all platform specific project. Select Droid project as startup when you want to run the project in android emulator or device. Visual Studio comes with Visual Studio Android emulator make sure you have enabled Hyper-V feature.  
 Right click on the Droid project and select "Set as startup project", Then select the emulator of choice to Run the Droid project. If you encounter an issue please refer to "Frequently Encountered Issue and How to fix it. Then you should see something like this after you run the project: Viola
  Spice up your Page Lets add some spin on the project by adding basic controls and layouts inside a ContentPage. The first thing we do is to add a Grid Layout without columns and rows. It should look something like this: -
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=""
<Image Source="background.png" Aspect="AspectFill"></Image>
<StackLayout Margin="30,60, 30, 30" HorizontalOptions="FillAndExpand">
<Label Text="iApp" HorizontalTextAlignment="Center"
FontAttributes="Bold" FontSize="60"></Label>
<StackLayout VerticalOptions="End">
<Button Text="App Walkthrough"
view raw page.xaml hosted with ❤ by GitHub
Before executing your project download the background image from here and name it background.png. And save in each platforms assets. For Android:
 While for iOS project can be found on Resources folder, Windows Phone and UWP can be found on Assets. Now execute your project.

Wrap Up

Our first Xamarin.Forms app works well, Next topic we will discuss more about Controls and Layouts as we progress we will move to more advance topic.
Original Author: 

Tags: Building cross-platform native mobile apps with Xamarin Forms

Login to comment.

Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.