RTL, l'effet miroir

Transcript

1. 1 RTL, l’effet miroir
2. 2 ~500 serveurs Paris / NY ~700 équipements (switchs, routeurs, etc.) 4,5 PB de besoin en stockage 1,5 to de logs par jour ~1B de requêtes / jour Deezer 500 employés répartis sur ~10 villes Deezer est disponible dans plus de 180+ pays 8,3 millions d’albums 53+ millions de titres 100 millions de playlists Connected Speakers Wearables Car Mobile (Android, iOS, Windows) TV Desktop
3. 3 @sarrouna23 Syrine Trabelsi Android Software Engineer @nascimpact Nicolas Le Breton Android Software Engineer Why RTL? RTL, Android app state of the Art Ways to improve the app in RTL Conclusion
4. 4 مﻟﺎﻋ ﺎﯾ ﺎﺑﺣرﻣ Deezer partnership with local label Rotana Reach 28 countries and 431M people Higher feeling of trustworthiness by natives
5. 5 Easy peasy Add RTL support in Manifest.xml Support minAPI 17 “Add RTL support where possible…” (refactor menu on Android Studio) android:supportsRtl="true"
6. 6 Easy peasy setMargin(left, top, right, bottom) + setMarginStart(start) and setMarginEnd(end) setPadding(left, top, right, bottom) --> setPaddingRelative(start, top, end, bottom) setGravity(Gravity.LEFT/RIGHT) --> setGravity(Gravity.START/END)
7. 7 Easy peasy: lol
8. 8 7 mistakes game
9. 9 State of the Art: LTR RTL Standard LTR First result Target
10. 10 State of the Art: Home screen LTR RTL Overlapping text & artwork Scroll direction does not match between the different carousels Scroll direction does not match arrow direction
11. 11 State of the Art: My Music screen Arrows pointing the wrong way (screen opens the other way) Icon in the wrong place LTR RTL
12. 12 State of the Art: FLOW screen Misplaced text Bevel in the wrong direction LTR RTL
13. 13 State of the Art: Search screen Overlapping text and icons Text too close to screen edge LTR RTL
14. 14 ? State of the Art: Player screen Playbar advancing the wrong way Icons pointing the wrong way LTR RTL
15. 15 Tools
16. 16 Android Studio Design Tools Add RTL support in ConstraintLayout Add RTL support in AppCompatTextView (match_parent / 0dp) android:layoutDirection="locale" android:textDirection="locale"
17. 17 Custom view / Drawable / Bitmap Avoid Left and Right variables use Start and End Convert legacy custom view to ConstraintLayout getLayoutDirection() resolveLayoutDirection() called by requestLayout()
18. 18 BidiFormatter Bidirectionnal Text Formatter The OS will try to detect and will reverse itself the text, the Bidi formatter prevents the OS this inversion. Available in the Support Library (api17) BidiFormatter.getInstance().unicodeWrap(item.getTitle())
19. 19 Mixed languages English artist name in arabic text Date in the wrong direction Numbers are wrongly right lefted
20. 20 Vectors Add RTL support in vector Avoid vectors with texts Not all vectors needs to be mirrored android:autoMirrored="true"
21. 21 Device / Emulator testing In developer options setting enable Force RTL layout direction /!\ Useful but not enough (number format)
22. 22 World Boss Tip Memorize the manipulations to change the language settings
23. 23 Conclusion Localization is not only adapting text, ui and icons Other points are to take into consideration : • Moderate your user content (explicit lyrics/covers) • Review your monetization model against local expectations and be prepared to modify it if necessary.
24. 24 Merci !
25. 25 State of the Art: internal bugs Lists mirroring : • RecyclerView (horizontal case) layoutManager.setReverseLayout(true); • ViewPager, HorizontalScrollView android:layoutDirection="locale “Arabic” numbers in the signup form Dates direction from 20/11/2018 to 2018/11/20 Pre-formatted server data Marquee direction ViewPager Viewpager no compatible Recycler view ok
26. 26 BIDI
27. 27 Après (résultat)
30. 30 Plan • startegy : chiffres, l’enjeu et pour qui + catalogue rotana? 1 ou 2 slides • du produit et l’adaptation pour le mena 1ere etape : l’etat des lieux pour tt les supports. • fonctionnement au sein de l’equipe Android Android : l’etat des lieux (screen avant) avec ce que offre de base l’android studio et l’os • les contraintes de la langue • Constraintlayout vs customviews • l’etat d’apres • fin ( contrainte de la culture penser a Explicit)
31. 31 Is there a need for RTL support? The main right to left script languages are: Arabic: Is an official language in 27 countries and is spoken by ~422M people Persian/Farsi: is an official language in In 3 countries and is spoken in Iran, Iraq, Afghanistan, Tajikistan, Uzbekistan, Russia, and Azerbaijan by ~110M people Urdu: Is an official language in India and Pakistan, and is spoken in 4 countries by ~81M people Kurdish (Sorani): Is an official language in Iraq and is spoken in Turkey, Iraq, iran, Armenia, Syria, Azerbaijan, and Georgia by ~30M people Azeri: is spoken in Azerbaijan, Turkey, Iran, Russia, Iraq, and Georgia by ~26M Hebrew: Official language of Israel and is spoken by ~9M people Dhivehi (Maldivian): spoken in the Maldives by ~340K people Total of ~678.34M people use right to left scripts around the world
32. 32 RTL support : Première étape Arabic: Is an official language in 27 countries and is spoken by ~422M people Hebrew: Official language of Israel and is spoken by ~9M people Total ~431M
33. 33 RTL Support Startegy ~431M d’utilisateurs potentiels Exclusivité sur le catalogue local Rotana s’adapter à la culture et la langue de l’utilisateur augmente son “engagement” par rapport a l’application
34. 34 Conclusion (pas que la langue, culture, économie)
35. 35 Key principles The user is reading from right to left, so, when ordering object or icons on the screen we need to place the item we want the user to see first on the right Functional buttons and icons should stay the same! Universal icons do not change, the play button points the same way and the progress line progresses the same way Text should be aligned to the right as a default (unless it is a design decision to align otherwize) Pay extra attention to punctuations, they tend to get mislocated upon translation