2

I am working on a mobile application which need to support rtl languages as well.

I got confused how I should render this menu I have in mobile application. It's a normal menu with Icon, Label and Action / Disclosure Indicator at right. I am not sure What should be order for rendering it for rtl languages.

Please suggest.

enter image description here

Improve this question

1 Answer 1

Reset to default
4

As per Material Guidelines on bidirectionality it should look something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The guiding principle for RTL interfaces is that time moves from right to left. Forward points to the left, backwards points to the right.

You should also notice that if you have representation of text on your icons that representation has to be mirrored as well.

Text is right-aligned in RTL. If there is a paragraph indent at the beginning of a paragraph, an unfinished line at the end of the paragraph, or a ragged right side, the icons need to be mirrored.

Improve this answer
1
  • Definitely its good solutions and ideal to implement. In actual implementation we have kept the navigation animation from left to right (in direction of arrow in the image) for both RTL and LTR. Now we need to consider for navigation animation, menu location which we kept same for both LTR and RTL. and were implementing RTL support for views only :)
    – Vishal Kardode
    Aug 21, 2015 at 3:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.