This article is first sent from the public account: Chengxiang Moying (ID:cxmyDev), welcome to follow.

A sequence.

More and more companies App, are beginning to gold overseas, looking for more opportunities. However, overseas markets vary widely, both in terms of market and user habits.

When you contact an overseas App, in addition to the need to understand the entire ecosystem of overseas Google Service, you also need to do a good job in adapting different languages. The most common method of language adaptation is to configure different language resources (strings.xml) according to different system language Settings, among which a special one is the Arabic RTL layout, which not only changes the language, but also changes the UI layout and usage habits.

Our common habits, called LTR, which stands for our reading and writing habits, extend from Left To Right. On the contrary, RTL (right-to-left) reads and uses languages from Right To Left. Common languages used in RTL include Arabic and Hebrew.

Today, let’s talk about a mature Android App, want to do RTL adaptation, need to pay attention to what, want to adapt RTL task list.

If you are maintaining an App that has international requirements, this problem will have to be faced sooner or later.

Android supports RTL

2.1 What is RTL?

As mentioned earlier, RTL stands for right-to-left, the habit of reading and writing, and extends from Right to left. In contrast to our own usage habits, they are LTR, that is, from left to right.

RTL can be simply understood as the mirror image of LTR. When it comes to adapting RTL, in addition to the translation language itself, it is also necessary to achieve the UI layout, which is mirrored from the central axis.

Although RTL is not in line with the usage habits of our people, there are still some people around the world who keep the habit of RTL, such as Arabic and Hebrew.

For Android, Android 4.1 has added bidirectional text priority support to TextView and EditView from the start, allowing text content to be displayed and switched from left to right (LTR) to right to left (RTL). Starting with Android 4.2, fully native support for RTL mirrored layouts has been added.

In Android 4.2 (Api Level 17) and later, layout mirroring on the UI is supported natively. On these versions, as soon as the user switches to “RTL language”, the UI will directly switch between left and right image first, and if your App supports RTL image layout, it will automatically switch the layout direction.

2.2 How does App support RTL mirroring

As mentioned earlier, LTR to RTL switching is not controlled by the developer, but is usually controlled by the system language.

When the system language is switched to “RTL family language”, you also need your App to support RTL image layout.

There’s only one attribute you need to configure for support, a list element in the Androidmanifest.xml configuration file. You need to configure the element Android :supportsRtl=”true” under the < Applictaion > tag.

When the system language is switched, your App will also switch the UI layout to the mirrored effect.

In addition to enabling the supportsRtl attribute, some layout attributes are required.

Simply put, replace all xxxLeft/xxxRight required by the layout with xxxStart/xxxEnd.

For example, the Padding and Margin that we use all have attributes like paddingLeft and layout_marginRight, which need to be “replaced” with paddingStart and layout_marginEnd. There are also gravity, drawableLeft, and other properties that need to be “replaced”. In principle, all Left/Right should be changed to Start/End.

These attributes are already listed for us in the official documentation.

Android App supports RTL mirroring in two steps:

  1. App to increaseandroid:supports="true"Properties.
  2. Adjust UI layout properties fromleft/right 到 start/endSwitching.

Should we use left/right or start/end in everyday coding? Or do you need both?

Note that the UI layout attribute replacement I mentioned earlier is in quotes. Whether you need to use start/end to completely replace left/right depends on your App’s current minSdkVersion value.

As mentioned earlier, Android’s native support for RTL was only available in Android 4.2, which means that if your App’s minSdkVersion is greater than or equal to 4.2, you just need to use the start/end attribute. However, if you want to support device users below 4.2, you need to keep both left/right and start/end.

On systems lower than 4.2, the supportsRtl and start/end attributes are not recognized, so there is no impact. However, it is necessary to pay attention to the coding habits of the subsequent development of new pages after the completion of adaptation.

2.3 AS Helps adjust layout attributes

If you are currently adapting to a mature project where the layout is still used with left/right attributes, it can be a lot of work to manually adjust all the page layout files.

Fortunately, AS provides support for automation.

You can enable automatic RTL adjustments by going to Refactor → Add RTL Support Where Possible.

It will automatically replace all left/right attributes in the project with start/end attributes. If you want to adapt to Android devices below 4.2, you need to keep both attributes. Check Relpace Left/Right Properties with Start/End Properties.

Early AS automatically support RTL layout, the efficiency will have some problems, if the layout of the conversion is too much, may be stuck, but the new AS has been optimized a lot, the conversion efficiency is acceptable.

After all, this is an automatic replacement. After the replacement, we still need to test each page to see the effect. Sometimes we also need to do some fine tuning work. For example, when an AS automatically replaces an RTL layout, if the include tag is used, the direction attribute used will not be replaced.

Although automation facilitates our mechanical repetition, it must also involve human intervention to meet expectations.

3. RTL details adjustment

In order to make this kind of global change, there must be some details that need to be tweaked. Here are some details tweaking techniques that will be used in RTL layout.

3.1 Use global style to modify attributes in batches

In adapting to RTL, it is inevitable that some properties must be set. For example, EditView needs to set the following properties.

android:textAlignment="viewStart"
android:gravity="start"
android:textDirection="locale"
Copy the code

We can set these properties to EditText globally in style.xml.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">... <item name="editTextStyle">@style/EditTextStyle.Alignment</item>
       ...
</style>

<style name="EditTextStyle.Alignment" parent="@android:style/Widget.EditText">
        <item name="android:textAlignment">viewStart</item>
        <item name="android:gravity">start</item>
        <item name="android:textDirection">locale</item>
</style>
Copy the code

TextView also needs to set the Android :textDirection property, which can be set globally in the same way as Style.

3.2 Resource Adaptation for RTL

In addition to Layout adaptation, there are also some resource adaptation, resource adaptation mainly refers to two content: Drawable (MIPMap) and Layout resources.

Let’s talk about the Drawable fit. For example, use different ICONS in different layouts.

When adjusting the layout to RTL, note that the icon returning “←” should also be replaced with “→”.

Using the same qualifier Android uses for resources, you can create a drawable- LDRTL directory and place the flipped icon in that directory. If you need to qualify the DPI, you can append it to the directory name.

Res/drawable/a.png drawable-ldrtl/ a.png // RTL drawable/a.png drawable-xhdpi/ b.png drawable-ldrtl-xhdpi/ B.png // Drawable -xhdpi/b.png RTL iconCopy the code

The RTL Layout effect is suitable for Layout. Some special pages, light mirroring may not be enough, but also need to do some targeted UI adjustments, the simplest way is to do two sets of layout, each other.

Since Drawable can use resource qualifiers to set ICONS for RTL layouts, layouts can too.

For layout files, you can append the qualifier layout-ldrtl/ to the directory. If you want to adapt the layout to a language, you can also add the qualifier to the language. For example, you can use Layout-ar/for Arabic.

Res/layout/ main.xml // Default layout layout-ar/ main.xml // Arabic layout layout-ldrtl/ main.xml // RTL layoutCopy the code

IO/Design/USAB… for RTL UI layout specification, there is a specification document under Material Design (Material. IO/Design/USAB…

3.3 Code check RTL?

Some control properties, is dynamically adjusted through the code, that in the process of use, you need to judge the current environment in the code, is RTL or LTF, can determine the subsequent property Settings.

Obtain the locale of the Configuration to determine the current environment. For compatibility, a similar method is provided under TextUtilsCompat.

public boolean isRtl(a) {
	return TextUtilsCompat.getLayoutDirectionFromLocale(
		getContext().getResources().getConfiguration().locale) == 		ViewCompat.LAYOUT_DIRECTION_RTL;
}
Copy the code

The isRtl() method can be used directly to determine the result and perform subsequent operations.

3.4 Not all controls support RTL

Although RTL orientation layout is supported natively since Android 4.2, there are some controls that are not supported, such as ViewPager, which does not support RTL orientation.

In fact, there is no good way, either to discuss with the product tolerance of this place, or to find some other solutions.

RtlViewPager is an open source library available on Github (github.com/diego-gomez… Available for use. Its principle is the data in reverse order rearrangement, nothing to say, source code is not much, interested in their own look.

4. How to estimate the period for RTL adaptation?

Let’s talk about estimating development cycles when adapting TO RTL.

In addition to the App itself at the beginning of design and development, is designed for the Middle East tyrants, in most cases, we need to adapt RTL mirror layout on a mature App for various external reasons. For example, the market verifies that there are a large number of paying customers for “RTL languages”, or the product manager believes that there are potential customers for “RTL languages”.

The timing of RTL adaptation is entirely determined by external factors. But when it comes to adaptation, one of the most intuitive practical questions that we, as developers, face is, what do we need to do to adapt RTL? How long will this task take to complete? Who needs to work with and what tasks can be done in parallel?

It’s hard to accurately estimate the RTl-ification of an App, because most of the work comes from adaptation, and when it comes to adaptation, the work can be either large or small. The heavy use of third-party controls in an App is more workload than using only native controls. Product managers and designers who allow some page adaptations to be different will also have more work to do than a more demanding restoration.

These before the completion of adaptation, who also do not know how the effect, since there is no good method, then try it, only need three steps, you can take a clear mirror flip effect, to estimate the difficulty of adaptation.

  1. Set up theandroid:supportsRtl="true"To enable the App to support RTL.
  2. AS automatically converts layout attributes and supports RTL layout effects.
  3. Turn on “Force use right-to-left layout orientation” in developer options to force RTL layout.

You’re basically looking at an 80% RTL App. All that’s left is to go through the page and see if there are any controls that don’t support RTL, any drawables that need to be replaced, and any layout that needs tweaks. Then targeted adjustment can be.

Some controls do not support RTL will be more trouble, have the source code to change the source code, no source code to see if there is no place to Hook solution.

The list of what needs to be done is fixed. With clear tasks, it’s easy to estimate the development cycle.

Here’s a list of tasks for RTL adaptation:

  1. App supports RTL, AS automatically converts layout attributes to RTL, and forces RTL layout direction from developer options.
  2. Check the page by page, check out the Drawable resources that need to be flipped, package them and give them to the designer, then reverse and replace them.
  3. Check the layout after the flip and determine with the designer how the UI needs to be adapted.
  4. Find does not support RTL control, can be analyzed from the source point of view, can change the source code to change the source code, can not change the source code to try Hook solution or find alternative solutions.
  5. Translate strings. XML, the language resource of RTL, and put it into the corresponding resource directory. For example, if The Arabic language needs to be put into /values-ar/strings. XML, switch the system language to Arabic, and check the matching degree of text and controls on all pages.
  6. Overall acceptance, fine tuning effect.

Those that need to cooperate with products, design and translation can be prepared in advance to parallelize tasks. Of course, in the process of adaptation, there are some practical problems, you need to encounter problems to solve the problem.

Five. Summary moment

This article discusses how to adapt RTL image effect in a mature App, and how to quickly adapt. Finally, a list of adaptation, need to adjust the attention of the list, I hope to help you.

This article is here, if help, message, forward, point good-looking is the biggest support, thank you!

reference:

Material. IO/design/usab…

Android-developers.googleblog.com/2013/03/nat…

Developer.android.com/training/ba…

“Growth”, will get carefully prepared learning materials.