AbsoluteAlignment in Jetpack Compose

The standard practice in developing UI is to align elements to the dynamic "Start" and "End" values. These values change based on the users layout direction configuration, allowing UI to adapt for both left-to-right (LtR) languages like English and right-to-left (RtL) languages like Arabic. In Jetpack Compose this is accomplished using Alignment.Start and Alignment.End.

However, there are times where the elements shouldn't realign based on the users configuration, e.g. decorative elements. In that case, reach for AbsoluteAlignment which replaces the dynamic Start and End values with the fixed values Right and Left. This means all users will see the same UI layout regardless of their configuration. This ensures elements are anchored to the side of the screen you expect them to be.

To test your Composable in a preview with RtL or LtR configured, just use the LocalLayoutDirection composition local. See the example below where the direction is set explicitly to RtL.

@Preview
@Composable
fun PreviewMyComposable() {
    CompositionLocalProvider(
      LocalLayoutDirection provides LayoutDirection.Rtl
    ) {
        MyComposable()
    }
}

Conclusion #

This is a simple fix that will save users from unexpected and unintended UI scenarios. Remember that Alignment is still the default and supporting RtL and LtR is important for giving users the best experience, but when content needs to be absolutely aligned, reach for AbsoluteAlignment. To see an example of this issue in action, check out the example code here. Until next time, thanks!

Did you find this content helpful?

Please share this post and be sure to subscribe to the RSS feed to be notified of all future articles!

Want to go above and beyond? Help me out by sending me $1 on Ko-fi. It goes a long way in helping run this site and keeping it advertisement free. Thank you in advance!

• Previous: Dev Diary - November 2023
• Next: Building Passive UI in Jetpack Compose