Auto mirroring in jetpack compose Icons

user_9470643 0
Viewed 1077

I'm using jetpack compose now, and my app has two locales which one of them is RTL, and the other one is LTR.
Everything works fine when the user changes the locale, the whole layout will be rearranged.

The only problem I have is the mirroring of Jetpack Compose Icons. I have an IconButton like this:

IconButton(onClick = { backView(true) }) {
    Icon(Icons.Filled.ArrowBack, contentDescription = "back")
}

Which is used to navigate back.
My problem is this Icon won't be mirrored when the user switches to RTL Locale.

Before Compose, I imported the arrow_back vector, and it has a checkbox for auto mirroring for RTL support.

How can I achieve the RTL support in Compose?

android-jetpack-compose android
2 Answers

Use scale to mirror the icon:

IconButton(onClick = { backView(true) }) {
    Icon(modifier = Modifier.scale(scaleX = -1f, scaleY = 1f), 
    imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
}

If you want to do this throughout your app, you could just create a Modifier extension function. Here we'll call it mirror:

@Stable
fun Modifier.mirror(): Modifier {
    if (Locale.getDefault().layoutDirection == LayoutDirection.RTL)
        return this.scale(scaleX = -1f, scaleY = 1f)
    else
        return this
}

And then apply it:

IconButton(onClick = { backView(true) }) {
    Icon(modifier = Modifier.mirror(), 
    imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
}

See Scale

user_7536320

With compose version 1.2.0 out all you need to do is to add autoMirrored attribute to your vector drawable.:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:autoMirrored="true"
    android:viewportWidth="24"
    android:viewportHeight="24">
user_22909500
Related