Part 5: Mirror With Intent: Building Right-to-Left Ready Screens in Jetpack Compose

Part 5: Mirror With Intent: Building Right-to-Left Ready Screens in Jetpack Compose

Compose mirrors most layouts for free when you indicate the start and end of a layout, rather than hardcoding left and right. This includes most directional icons, play buttons, checkmarks, and clocks, but not phone numbers or English product names inside Arabic sentences. Gesture math, slide animations, and custom Canvas drawing don't mirror automatically and need additional attention.

When building for RTL layouts, it's crucial to test them thoroughly. You can use a forced-RTL preview and the ar-XB pseudolocale for quick testing. After testing, lock the result using layout assertions and reviewed LTR/RTL screenshot baselines.

A common issue with RTL layouts is the back arrow icon. By default, it points left, which can be confusing for RTL users as it suggests moving forward within the screen. The solution is to use the AutoMirrored icon set, which automatically flips the icon in RTL layouts. The deprecated Filled.ArrowBack icon should be avoided, as it has been deprecated in favor of the AutoMirrored set.

Compose handles layout direction through the LocalLayoutDirection, which is derived from the device configuration. When the locale is Arabic or Hebrew, the layout direction is set to LayoutDirection.Rtl. All direction-aware APIs in Compose respect this direction, so you don't need to write additional code for RTL layouts.

To build RTL-ready screens in Compose, start by using the start/end API for layout direction. Avoid using hard-coded left/right APIs, as they may not work as expected in RTL layouts. Modifier.offset(x = …) mirrors content, moving it right in LTR and left in RTL, which is usually desirable for certain cases like nudging a badge toward the edge of an icon. However, use absoluteOffset and add comments when the offset is genuinely physical, such as aligning with a fixed piece of artwork.

Reading order also follows the layout direction. TalkBack, the screen reader, automatically orders siblings top to bottom and then start to end in RTL layouts. Hard-coding absolute positions can break both visual and reading order, so it's best to stick to start/end APIs and let TalkBack handle the rest. When working with icons, flip those that show direction through the reading flow (e.g., back, forward, next, previous, send, list indentation, or chevrons for navigation).

Don't flip icons whose direction comes from physical world conventions or universal conventions like media playback controls (play, fast-forward, rewind) or check symbols.