How to Partially Allow LTR, RTL support in a ConstraintLayout

Question

So in my recent interview I was asked what if within a ConstraintLayout which has multiple child Views supports part of the Views LTR and RTL change and part of the Views to ignore it. Like the images below:

As you can see, blue views change their direction based on Views' layout direction but the Red Green and Yellow ones keep there position relative to each other, but align their (collective) start and end based on the layout direction to different View.

I understand you can set up the blue Views simply by using start and end attributes instead of left and right. But how do you keep the order of the multicolored Views same but at the same time reposition them alongside other Views? While making sure there is no deeper hierarchy than the parent ConstraintLayout.

I realize I may not be making much sense here, I just can't think of another way to convey the question.

Answer 1

Interesting question. I don't know of any way to specify that part of a layout should remain LTR when all the other parts go RTL. I presume that you are looking for an XML-only solution.

Something to keep in mind is that the left-to-left, right-to-left constraints are still valid. Normally, these would just be replaced by start-to-start and end-to-start constraints. So, with this in mind and making some assumptions about the layout, the following works:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:id="@+id/view"
        android:layout_width="100dp"
        android:layout_height="300dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="239dp"
        android:layout_height="75dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/box1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="24dp"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        android:background="@android:color/holo_orange_light"
        app:layout_constraintRight_toLeftOf="@+id/box2"
        app:layout_constraintLeft_toLeftOf="@+id/view2"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <View
        android:id="@+id/box2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="24dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintRight_toLeftOf="@+id/box3"
        app:layout_constraintLeft_toRightOf="@+id/box1"
        app:layout_constraintTop_toTopOf="@+id/box1" />

    <View
        android:id="@+id/box3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="24dp"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        android:background="@android:color/holo_green_light"
        app:layout_constraintRight_toRightOf="@id/view2"
        app:layout_constraintLeft_toRightOf="@+id/box2"
        app:layout_constraintTop_toTopOf="@+id/box2" />

</androidx.constraintlayout.widget.ConstraintLayout>

There is one trick: layout_constraintHorizontal_chainStyle has to be set on the first and last view in the horizontal chain. There is also a tendency for the designer to change the left/right attributes back to start/end.

IRL, I would just wrap the blocks in a view group and be done with it. I think that it would be easier to maintain and not be prone to break.