Making a Right-to-Left Layout for Unity’s UI

Image for post
Image for post

Update Feb 2020

Since there was quite a bit of interest in this, I put it on the Unity asset store for FREE: http://u3d.as/1J1c

The Story

Unity is a great for game development. Most of the typical features you need for your games are included either natively or through the asset store. Occasionally however you hit that dark corner that nobody went before. That happened to me in a game I have been working on recently.

I needed a Right-To-Left (RTL) layout so that my UI would be kind of mirrored depending on the language (see picture below). A pretty common problem if you ever work with RTL languages such as Arabic, Persian, Hebrew, etc. Unity’s HorizontalLayoutGroup only supports laying out its children from left to right.

Image for post
Image for post
Left-to-Right layout (Left) vs Right-to-Left layout (Right)

Initially I tried to work around the problem by reversing the order of children of the parent element. This solution kind of worked but modifying the object tree in the editor and at runtime just for a layout was excessive and messy.

So I set out to solve the problem right and write an RTL HorizontalLayoutGroup…

The Unity documentation for UI layout is minimal and only covers how to use the built-in ones. Not much on how to implement a new layout for your UI elements. Luckily I ran into the Unity UI code on bitbucket and made the changes I needed.

The changes weren’t that involved. Mostly copy-pasting the original code. I was unable to cleanly reuse their code using inheritance because the methods in the base classes of HorizontalLayoutGroup are not marked protected and/or virtual.

Here is how it looks like:

Image for post
Image for post

I’m not going to go into details of implementation. The project is however open source and available on github. Feel free to use it in your project or take a look at the code and change it further.

Happy coding!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store