Gorilla Player: Finally a proper design tool for Xamarin.Forms

Today I would like to make a little introduction to Gorilla Player, a tool created by UXDivers, an Uruguay based company speciallized on UX tools for Xamarin.Forms. It´s good to see how Xamarin tech is growing,allowing other companies to use their technology to improve the experience and UXDivers is an example.

People were waiting for this for a long time and I think that will accelerate the adoption of Xamarin.Forms.

One of the mayor request on every speech or training I do about Xamarin.Forms, always raise the same question:

Is there a design tool for Xamarin.Forms or we have to compile and deploy everytime we do a little change in the XAML files?

People

Real App development times

Creating an app is a complex process and most of the time (about 60% in my case) it is invested on UI for different platforms, different OS and different devices.

Gorilla Player can help us to reduce this time drastically.

What is Gorilla Player?

It’s a realtime design tool for your Xamarin.Forms apps: “Wait, What?”

Yes sir, finally you can check your XAML changes in realtime and in multiple devices, lanscape and portait orientations, etc.

How Gorilla Player works?

It’s composed by Xamarin Studio Add-In, an Player app that has to be executed on each device or simulator, and a background host running in your machine.

If you haven’t requested the preview yet, you can do it through their site.

Once you intall Gorilla Player there’s an additional step to finish the setup which is install the player on the devices where do you want to check your design changes.

For that, you need to click on the Gorilla Icon in the top task bar of your Mac, and select Show Player-SDK-Samples Location:

This option will open Finder with the following folders structure:

Open the Player Solution with Xamarin Studio and run the Android or iOS apps in the devices to check:

How to provide data for pre-visualization?

You can check your views with static data, but you can also provide pre-visualization data for your views with Bindings.

For that Gorilla needs a SampleData.json file with the following structure:

 "CharacterTemplate.xaml": { 
             "Id":1, 
             "Name": "Thor", 
             "Thumbnail":"http://i.annihil.us/u/prod/marvel/i/mg/d/d0/5269657a74350.jpg", 
             "Description": "As the Norse God of thunder and lightning, Thor wields one of the greatest weapons ever made, the enchanted hammer Mjolnir. While others have described Thor as an over-muscled, oafish imbecile, he's quite smart and compassionate.  He's self-assured, and he would never, ever stop fighting for a worthwhile cause." 
         }

First thing is to indicate the name of the XAML file, in this case “CaharacterTemplate.xaml”. Then we need to provide the ViewModel associated to the view in json format.

Just with this little setup, we can preview our XAML file with Bindings. This is the XAML to be previewed:

 <?xml version="1.0" encoding="UTF-8"?>
 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     x:Class="XamFormsMarvel.Views.CharacterTemplate"
     xmlns:control="clr-namespace:XamFormsMarvel.Controls;assembly=XamFormsMarvel">
     <ContentView.Content>
         <StackLayout Spacing="0" Padding="0">
             <Grid Style="{DynamicResource CardStyle}">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="80"/>
                     <ColumnDefinition Width="*"/>
                     <ColumnDefinition Width="5"/>
                 </Grid.ColumnDefinitions>
                 <Image Source="{Binding Thumbnail}" Grid.Column="0" WidthRequest="60" HeightRequest="60"></Image>
                 <StackLayout Grid.Column="1" Spacing="0" Padding="0,5" Orientation="Vertical">
                     <Label Text="{Binding Name}" 
                         HorizontalOptions="FillAndExpand" 
                         VerticalOptions="FillAndExpand" 
                         VerticalTextAlignment="Start" 
                         HorizontalTextAlignment="Start"
                         Style="{DynamicResource NameStyle}"></Label>
                 </StackLayout>
             </Grid>
         </StackLayout>
     </ContentView.Content>
 </ContentView>

And this is the result in Gorilla Player:

These are the previews in Gorilla of the other pages used in this example:

For more information about Gorilla Player, have a look to this video to see it in action.

And that’s it. Design was never easy, but tools like these definitely will improve the experience.

You can find the code of the example used here in my Github account.

Gorilla Player Limitations

At the moment Gorilla Player is on preview and not everything is working 100%, for example Custom Renderers, but you can use their SDK to make them work as well, but this will be covered in another POST in the future (I hope).

Written by Ramón Esteban (@ramonesteban78), Xamarin Certified Mobile Developer.