Grial 2.5 brings RTL to Xamarin.Forms!

A LITTLE BIT OF BACKGROUND:

At UXDivers we are obsessed with creating great experiences for our customers. That is why we’ve created Grial UI Kit and as a consequence Gorilla Player.

On Q1 of 2017 we released Grial UI Kit  2.0 and it was huge! Lots of customers loved the new version and we gained a lot of extra traction with new customers! Lots of them coming from Middle East.

Here are some questions we received on a daily basis:

  • Does Grial support RTL?
  • Can I make master detail menu on the right?
  • How can I change language?

OUR JOURNEY BEGINS

After LOTS of questions about the RTL topic and the increasing interest, we decided to extend Grial UI Kit family by adding Grial UI Kit + RTL, a new product which does exactly that: make Grial UI Kit RTL available!

UX AND DEVELOPMENT GOALS

Having the requirements so clearly specified helped us to move forward and start thinking how to achieve the best experience for the developers. Clearly we will need to support:

  1. Internationalization/Localization
  2. LTR <> RTL switch
  3. All the different UI controls should work on RTL too (Drawer/Menu, Navigation Bars, etc.).

Naturally, having to rewrite all of our 70+ pages and templates would be a big pain and moreover, our customers would have to do a lot of rework to support RTL on their current Grial apps.

RTL POC

After researching and brainstorming we created a RTL POC (Proof Of Concept). The goal here was to minify the impact of RTL, so it should be as transparent as possible for customers to use it on Grial.

The obvious result was that we needed a mirroring mechanism, which would be in charge of “horizontally flipping” all our layouts automagically in the context of a specific culture (huge thanks to Tawfik Nassar who came up with the initial bits!). We also needed to validate performance impact and different strategies to make it as smooth as possible.

A few days after struggling with Android and iOS challenges we finally made it! It was a HUGE accomplishment! Having all your templates and pages to react properly and seeing Grial in RTL was very very satisfying experience! Still, there were more challenges on our path!

CUSTOM RENDERERS

Next thing on the list was to make the UI controls to look properly on the RTL context.

One of the most challenging request was to make the drawer/menu (used on MasterDetail pages) to be displayed on the right side, but also it should animate, reposition on device rotation, etc. Also, bounded to that was the Navigation Bar which should also be flipped.

Our great Engineer Diego Rivero was very confident about this and after a few days he finally made it! SIMPLY AWESOME!! Now we were really excited to see Grial really as a native RTL app!

Making the remaining UI controls RTL enabled was not as hard but neither easy.

INTERNATIONALIZATION

The last requirement to make this story to finish with a app ending was to easily allow changing cultures and display the app in a different language.

Xamarin Forms provides support for RESX files which makes things a bit easier, but still we needed an extension to make even easier. We added our own extension to handle translations.

After moving all our data to English RESX files we made the translations to Arabic (big kudos and thanks again to Tawfik and Houssem Dellai!), then everything was in place for the big moment: Seeing Grial in LTR English and in RTL Arabic flawlessly!! EPIC!!!

DID WE SAY WE LIKE CHALLENGES?

As a part of our Xamarin.Forms offering, we provide custom UI design services. Soon During our RTL development journey, one of our customers from Qatar hired us to implement their app UI with Grial.

Not surprisingly, their main feature was RTL support, but, it was also necessary to change to LTR on runtime. Now…that was a challenge! 🙂

So we met with the team and started to think and research to see if that was even feasible. Once again, Diego came to the rescue with a solution!

After a few days more, the moment of truth came: we needed to test if all our previous work would also work switching cultures at runtime. The result: success!! Finally, Grial RTL was accomplished!!!

WHAT ARE YOU NOT TELLING ME?

OK, OK, we admit it, we had an as on our sleeve 😉 At UXDivers we have a great team of designers and engineers who interact very well with each other. That has been part of our secret sauce from the beginning.

In order to make progress we needed to test our layout strategies for RTL support very fast.

That is where Gorilla Player played a fundamental role, but, we needed a way to support RTL <> LTR live changes.

After a few tweaks on the tool, changing and previewing Grial layouts without compiling was made: SUPER AWESOME!!!

But, wait…what about the texts?? OK, new meeting with designers and engineers: the result? RESX files are now supported on Gorilla Player!! FANTASTIC!!

gorila-rtl-optimize

LAST WORDS

You had an overview of how we accomplished this huge challenge but also Keep in mind that when you are purchasing Grial and Grial RTL you are not only buying a few templates and nice architecture, you are also acquiring a whole workflow for developing Xamarin Forms apps faster and that allows to integrate designers on board.

What are you waiting for? Go and get your Grial RTL and start creating beautiful native apps for your culture with your teams!

Best,
Pablo Germano

 

Grial UI Kit + Gorilla Player out of the box

We’ve made this video to show you how easily you can setup and work with Gorilla Player on Grial UI Kit. Go build the next generation of Xamarin.Forms apps with Grial UI Kit and Gorilla Player.

Don’t know about Grial UI Kit for Xamarin.Forms? Check out this videos to have better insights of the most complete Xamarin.Forms UI kit.

Grial UI Kit Overview

 

Changing Colors

 

Checkout the complete feature list in www.grialkit.com

Grial UI Kit V 2.0.60 release

Artboard 3@2x

Yes! A new version of Grial UI Kit is out there. A lot of things have been added in this new version, a lot of bug fixes, a lot of improvements also…

But we think you are going to love this one: Starting in this version you can download Grial preconfigured to preview (without compiling it) using Gorilla Player.

This will allow you to go faster than ever building your Xamarin.Forms app UI. The Gorilla Ready solution comes with the Gorilla SDK integrated + the DesignTimeData.json with all the design time data required to preview Grial.

The Gorilla Ready solution is available as a new option of the Download dropdown in MyApps page on the Grial Admin. Please notice that it requires Gorilla Player 1.0.0.15to be installed in your computer and IDE.

Check out complete release notes here.

 

Gorilla Player is free

The most advanced, stable and reliable previewer for Xamarin Forms is out there! It’s been a while since our last release. We worked really hard to make Gorilla better. This is a major release and we announce we are officially out of BETA!

We wanted to thank all our users, who contributed to make this release with their feedback and help.

We improved the overall UX, making things easier and simpler and added new cool features.

Check the list of new features on Gorilla Player support site.

At UXDivers, we work hard using our own software (dogfooding). The popular Grial UIKit was entirely developed thanks to Gorilla Player. This means you will find Gorilla the best tool nowadays to improve your productivity while working with UIs over Xamarin Forms.

What are you waiting for? Download Gorilla Player 1.0 or read 1.0 Release Notes.

As always, please leave us your feedback in our Github support site.

Note: Before installing Gorilla 1.0 on Windows, please manually uninstall any previous version of Gorilla you might have.

 

Grial UI Kit 2.0 released!

The community de facto UIKit for Xamarin Forms is out with a new version!

Grial 2.0 ensures your UI will look beautiful and consistently across iOS and Android platforms.

With more than 70 pages XAML pages, Grial UI Kit covers the most typical mobile UI patterns, 1500+ icons, fully customisable theme, animations and all UI elements Grial gives the Xamarin developers the best solution to start over Xamarin Forms with the right foot.

Here are the main features for this version:

Improved setup! This version comes with access to Grial Admin where users can configure their copy of Grial with their namespaces, assembly name, etc., making the setup of your new project absolutely easy and fast!

Responsive Helpers Get full control of how UI elements flow on your screen, no matter the device, orientation or platform.

New UI control Ratings, TabControl, Repeaters, etc. A whole new set of controls to expand your app UI/UX.

What are you waiting for? Get Grial UI Kit now and speed up your Xamarin.Forms development.

Get Grial UI Kit now