How to auto mirror a shape in Android XML

Question

I have a custom card like shape as below.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="?attr/colorListItemBackground" />

    <corners
        android:bottomLeftRadius="16dp"
        android:topLeftRadius="16dp" />

</shape>

My app also supports RTL languages, thus changing to RTL, this shape does not change(Auto Mirror).

What changes can I do to make it an auto mirror?

Notice the rounded corners near the circle. LTR_Image

The rounded corners still in the same place. RTL_Image

Answer 1

You can have define custom shape inside

res/
  drawable 
  drawable-ldltr 
  drawable-ldrtl 

Now put the mirrored custom shape inside drawable-ldrtl and it should work.

Your custom shape xml should be exactly opposite i.e.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="?attr/colorListItemBackground" />

    <corners
        android:bottomRightRadius="16dp"
        android:topRightRadius="16dp" />

</shape>

You can alternatively add android:autoMirrored="true" to your vector drawable which should auto mirror it. But this requires you to have a vector image as per documentation : https://developer.android.com/reference/android/graphics/drawable/VectorDrawable

Hence a shortcut is to wrap your shape around with a vector drawable

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/your_shape"
        android:autoMirrored="true"/>

Let me know if this works for you.