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.






32 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
  10. Great detailed and explained post about xamarin forms. I am happy if the word is spread. Much obliged for the insight. It's very useful to read it.
    xamarin development services

    ReplyDelete
  11. Thanks for sharing this wonderful blog. It's really useful for me. Keep it up.
    Best Cross Platform Mobile Development

    ReplyDelete
  12. Nice Blog, Keep sharing your ideas and information. Excellent ! I am truly impressed that there is so much about this subject that has been revealed and you did it so nicely

    Thanks
    Anika Digital Media
    seo services
    web design development
    graphic design

    ReplyDelete
  13. Hi Winston Gubantes, you have shared a great knowledge with us about developing cross-platform apps with Xamarin Forms. I don't hesitate to appreciate free self help blogs like you.

    Looking for Cross-Platform app development companies , feel free to contact Devolve.

    ReplyDelete
  14. Thanks for sharing the useful blog about Building cross-platform native Mobile Applications with Xamarin Forms.

    Mobile App Developers in Coimbatore

    ReplyDelete
  15. This information you provided in the blog that was really unique I love it!!, Thanks for sharing such a great blog..Keep posting
    mobile app development company

    ReplyDelete
  16. Xamarin.Forms exposes a complete cross-platform UI toolkit for .NET developers.
    This is knowledgeable blog which shares about building cross-platform native mobile apps with Xamarin Forms.

    Contact Way2Smile (Trusted Mobile App Development Company in Chennai) for any queries or requirements in cross-platform development.

    ReplyDelete
  17. Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care.As always, we appreciate your confidence and trust in us.
    Mobile App Development Company in Dubai
    Android App Development Company in Dubai

    ReplyDelete
  18. I feel really happy to have seen your web-page and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    Business App Development Pune

    ReplyDelete
  19. We are a creative Digital Media Agency with experienced team. We provide digital Marketing services, Web Development services, app design services Services and Branding.

    ReplyDelete
  20. Nice post, very useful blogs with very useful information, thank you for sharing this post android app development india

    ReplyDelete
  21. Nice post, very useful blogs with very useful information, thank you for sharing this post
    mobile app development company in usa

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Thank you for sharing this Amazing informative Blog.If you Want to kill two birds with one stone? Cross-platform app development is the way to kills "diverse platforms with one app" need.

    ReplyDelete