Tuesday, January 24, 2017

Building cross-platform native mobile apps with Xamarin Forms

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


Comparisons:


Cross Platform
Hybrid

Native
Dev Cost
Reasonable
Cheap
Expensive
Dev Tool Cost
Cheap
Cheap
Free
Dev Time
Short
Short
Long
Portability
High
High
None
Performance
Near Native
Slow / Sluggish
Very Fast
Learning Curve
Great
Great
Good

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

201306211522.jpg




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:

- -


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.






13 comments:

  1. I like the way you explain why the errors are happening and how to fix them.

    ReplyDelete
    Replies
    1. Thanks i will have a series covering Xamarin.Forms development

      Delete

  2. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!

    SEO Melbourne

    ReplyDelete
  3. This article is very much helpful and i hope this will be an useful information for the needed one. Keep on updating these kinds of informative things...
    Mobile App Development Company

    ReplyDelete
  4. Very Interesting information shared than other blogs. Thanks for Sharing and Keep updating us. Xamarin development India

    ReplyDelete
  5. Awesome article I really glad to read this article it’s really nice Thanks.

    Cross-Platform Mobile Development

    ReplyDelete
  6. Great Post! you have done great job.Thanks for sharing it with us. Well done and keep posting Cross-Platform Native Mobile Apps With Xamarin.

    ReplyDelete
  7. You have share the great info. I like your post. Thanks for sharing the good points. I will recommend this info.
    web development company uk

    ReplyDelete
  8. Do you want to create a PhoneGap app? Do you want to build Android or iOS app? Then hire only expert PhoneGap app developers from Augurs.

    ReplyDelete

  9. Nice blog. Thanks for sharing such great information.Develop xamarin application Hire xamarin developer

    ReplyDelete