Improve your Xamarin.Forms productivity with LiveXaml

If you’re a hardcore Xamarin.Forms developer, one of the challenges you might face is building a UI. The process of designing a page/view might be like this:

  1. Write the Xaml for your pages/views
  2. Compile and build the project, and create the packages.
  3. Deploy to emulator or the device
  4. Review the design on the emulator or the device
  5. In case of any changes required, you will have to go through the whole process again!

Usually each cycle of this process takes couple of minutes (depends on your machine’s specs and how big your project is) which is a complete waste of time and money!

Out of the box, Xamarin provides two solutions for this issue:

  1. Xamarin.Forms Previewer; which is good for a quick UI editing. But it has two main flaws. First, you can’t interact with the page (lets say you want to scroll down a list, thats not possible). Second, you can’t design for both platforms at the same time, either you pick iOS or Android.
  2. Xamarin Live Player. While the concept is amazing, but to be honest most of the time it doesnt work, and at the time of writing this its still in preview.

LiveXAML to the rescue!

You can read more about it from the official website LiveXAML,  but in a few words, its an extension you install on Visual Studio (Windows or Mac). And once you start debugging your application, the app will keep listening to the XAML changes and reflects them on the pages in the emulator or the device!

In this blog post we will go through setting up an environment to get LiveXaml to work on both iOS and Android at the same time.

Installation

LiveXAML has a great and simple video on the installation process, You can watch it here:

 

Setting up the environment

  1. Once you have LiveXAML installed, create a new Xamarin.Forms project (in my case I picked the PCL template)
  2. Set one of the projects as a startup project (I started with iOS)
  3. Once the app is deployed, right click on the other project and click on “Start Debugging Item” (In this example, I’m picking the Android project)
  4. Here you can see the app is running on both emulators, and ready for any Xaml updates!

 

I’ve recorded a demo video of LiveXAMLs, and how it works smoothly on both emulators!

Please reach me for any follow up question on Twitter @TareqAteik

Leave a Reply

Your email address will not be published. Required fields are marked *