A LITTLE BIT OF BACKGROUND:
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:
- LTR <> RTL switch
- 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.
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!
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.
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!!
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!