Wednesday, June 29, 2016

Xamarin Tutorial -Xamarin Forms Designer

Hi Guys ,Today I'm going to show you something that every Xamarin developer will love,because time that i'm writing this post there is no inbuilt UI designer for Xamarin forms.But for Xamarin android and Xamarin IOS do have that UI designer,But a technology like Xamarin real benefit is use cross-platform approach rather than using native approach.
                                            Idea of Xamarin Forms having a shared code base for Android IOS and Windows then write few custom renders to get platform specific features.
                                                          According to my idea real pain of Xamarin forms is design a nice UI ,If we do a small change like color replacement we need to build it and deploy it in device to see the results.After going here and there in internet I found a medicine for that pain.And now I'm going to share that threat with you.

To make this we need few ingredients
  • Android or IOS Emulator/Device
  • Gorilla Player 
I'll show you how to do it in Android Emulator
  • First If you don't have Android Emulator you can download and install Android Emulator from   here  (This is the Fastest Android emulator I have tested and also Genymotion  is also better                 alternative which has large variety of devices unless it's don't have restriction in free version)
  • Next we need Gorilla player.You can download it from here,but before download and install it in your system it's better to Register on that site because later stages that credentials will require for login to that player  After complete of Gorilla installer you will have pop up like this
       After complete Gorilla installer you will see pop up like this


     Make sure to mark the check box for install samples and player
     Then enter login details that we registered previously
    Then you will see a screen like this


Then click on Opening Player.sln and you will get VS/XS project
Then run that project in your Emulator,and you will get App like this in your Emulator


Then open your Application and you will see some gorilla face on top right corner on your XAML page that mean your xaml page connect with your gorilla player



And if you going through xaml pages or if you change anything in that page you will see the UI view in your emulator

                                                 So Welcome to Gorilla  Family 


Troubleshooting

When you trying to run Player sometimes you will get error like this 
'Resource.Attribute' does not contain a definition for 'actionBarSize'
To fix this issue we can simple delete Xamarin folder located in
C:\Users\{User}\AppData\Local  And rebuild your application again

If it's not work you can change your JAVA version and see the results (you must restart your VS after change JAVA version and after changing JAVA version it's better if you can delete Xamarin folder and rebuild)

Ok If you have any question or feed back please post a comment bellow then Happy Hunting  until next time