Gorilla Player: A Tool to Craft Beautiful XAML UIs for Xamarin.Forms
This is a guest post contributed by Leonardo Rodríguez Viacava. Leo is co-founder and CTO of UXDivers, creators of Grial UIKit and Gorilla Player. UXDivers specializes in designing and coding engaging mobile experiences using Xamarin technologies.
Gorilla Player is a free XAML previewer for Xamarin.Forms designed to efficiently create multi-platform UIs. It supports previewing in multiple simulators and real devices simultaneously. Gorilla doesn’t impose constraints to your XAML, supporting custom controls, custom renderers and MVVM frameworks like Prism.
When we started UXDivers (in mid-2015), we were a small team of designers and developers on a mission: Take XAML UIs to the next level by bridging the gap between design and Xamarin.Forms development. We quickly realized that translating rich designs into XAML required fast feedback loops, but we didn’t have the right tooling. So, we built Gorilla Player to help us craft the beautiful XAML UI templates that make up Grial UIKit and the custom projects for our clients. Gorilla improved our development process so much that in 2016, we turned this internal tool into a free public tool help the Xamarin community.
As mentioned before, Gorilla Player imposes no limitations on the previewed files, runs on multiple real devices and simulators at once, and supports data bindings through JSON sample data. Thanks to Gorilla, the projects at UXDivers have three stages: (1) our designers work on the UX/UI using their favorite design tool, (2) once the customer is happy with the design, either the designer or the developer codes the UI in XAML with the help of Gorilla Player, (3) the developer writes the logic and finishes the app.
Gorilla makes crafting great mobile UIs an enjoyable, lightweight, and collaborative process for developers and designers.
Getting started with Gorilla
To get started, install the desktop application, available for Windows and macOS. The installer includes a Visual Studio add-in necessary to sync the XAML file you are editing with the previewing surface.
As an example, let’s preview the Conference Vision app created by David Ortinau for the Build 2018 Conference with Gorilla Player. This app was built entirely in Xamarin.Forms using cool community components, custom controls, effects, behaviors and CSS styling.
- Clone the repository.
- Add the
UXDivers.Gorilla.SDK.AutoConfigNuGet package to theConferenceVision.iOSproject. - Add
GORILLAas an additional symbol to theDebugconfiguration. This ensures the app starts in Preview Mode. - Add two files to the
ConferenceVisionproject: a.)DesignTimeData.jsoncontaining design time data, and b.)Gorilla.jsonto configure the custom navigation bar. - Run the app, connect to the server, and start previewing!
Designing with Gorilla
To show you why Gorilla is so important to us, let’s do a quick demo of how to develop custom projects at UXDivers. Let’s create an app to honor one of our favorite beverages: coffee.
Project Setup
When starting a new app, one of our developers typically creates a new project and adds dependencies like community controls, libraries, MVVM frameworks, and custom fonts. Once that’s ready, add Gorilla to start working on the user interface with our designers.
For this sample app, we will use the UXDivers.Effects and xamanimation NuGet packages. As seen in the video below, after creating the solution, you add both NuGet packages UXDivers.Effects and xamanimation to all projects, and the Gorilla AutoConfig package only to the platform-specific projects (iOS and Android).
Note: The Gorilla AutoConfig package is in Beta, so make sure to enable pre-release nugets to see this package available!
Note that since UXDivers.Effects and xamanimation are referenced only in XAML, you need to include a typeof to force their assemblies to load; otherwise, the XAML Loader will fail.
You want to be able to preview the XAML files, and still have the option to run the full app in debug and release mode. To make it easier to switch between Gorilla mode and Debug/Release, create a Gorilla solution configuration by making a copy of the Debug configuration and adding the GORILLA symbol there.
The app is now ready to deploy in Gorilla mode to all devices, and you are ready to start working on your XAMLs.
XAML Crafting
Gorilla allows you to use multiple devices simultaneously. At UXDivers, we always use at least one Android and one iOS device, but if you need to support tablets, multiple orientations or several languages you can add more devices. The video below shows you how to walk through building out our user interface with Gorilla Player. In this particular sample, we add images to the solution, add styles to the App.xaml, and create accessory views such as ProductCardTemplate to then use within the page.
As the video shows, Gorilla follows your workflow, previewing each screen you code without getting in your way.
Bindings
Gorilla lets you integrate data at any point in your process. The designer or developer can add the required bindings either at the beginning or later on, as in the example below. To do this, they add the DesignTimeData.json file to the project. This file associates a JSON object to each XAML file. Gorilla then sets that object as the BindingContext of the page or view, making it act as the design-time view model for that page or view.
To help you define the design-time data, Gorilla supports advanced features like JSON object references, global data, and loading data from other files.
Polishing
Tweak your XAML until you love it! Thanks to Gorilla’s immediate previewing, polishing your pages is fun. For our coffee order screen, we customized the TitleView property, added animations, and tested out a dark theme.
In this video, we use the Gorilla.json configuration file to instruct Gorilla to show the navigation bar for every page. You can also instruct Gorilla to display the navigation bar on specific pages, or even have it use a custom navigation page type available in your project.
Localization
Gorilla can also help you design localized apps. You can test your layouts in different languages simultaneously by choosing the specific language to preview on each device. Just configure Gorilla to make it aware of the languages your app supports. You can learn more about that process by reading the documentation.
Learn More
Gorilla Player enables you to rapidly iterate on your XAML user interfaces, imposes no restrictions on library or control usage, supports simultaneous previewing on multiple devices, and is completely free to use. To get started, download Gorilla Player from our website. To learn more about Gorilla, check out our wiki or forum.
All the animated videos shown in this post are available as videos in this playlist. The AutoConfig feature we used in this post is still in beta, and available in Gorilla 1.5+. If you have any trouble using it, please get in touch. We’d love to hear your feedback on Twitter @leorodri
Light
Dark
0 comments