Flipping RelativeLayout Content when Dragged to Another Side

I have a RelativeLayout which contains 2 ImageView (Character Image and Close Image), and 1 LinearLayout (which contain 1 TextView).

Here is my full layout.

<RelativeLayout
    android:id="@+id/root_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <!--   ImageView of floating widget  -->
    <ImageView
        android:id="@+id/collapsed_iv"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:src="@drawable/character01"
        android:adjustViewBounds="true"
        tools:ignore="ContentDescription" />

    <!--   Close button to close Floating Widget View  -->
    <ImageView
        android:id="@+id/close_floating_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/collapsed_iv"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/circle_shape"
        android:src="@drawable/ic_close_white_24dp"
        tools:ignore="ContentDescription" />

    <LinearLayout
        android:id="@+id/message_container"
        android:layout_width="125dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/collapsed_iv"
        android:layout_marginLeft="-25dp"
        android:layout_marginTop="35dp"
        android:padding="10dp"
        android:visibility="gone">
        <TextView
            android:id="@+id/chat_box"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorBlack"
            android:background="@drawable/rounded_corner" />
    </LinearLayout>
</RelativeLayout>

User can drag the layout to left and right of the screen by following this tutorial here (I remove some code to make the character only dragable in x axis).

The problem is, I can't make the ChatBox to be on left side of the character when character dragged to right side.

I modify moveToLeft and moveToRight function from original tutorial to move the close button from left to right.

/*  Method to move the Floating widget view to Left  */
private void moveToLeft(final int current_x_cord) {
    RelativeLayout.LayoutParams layoutClose = (RelativeLayout.LayoutParams) remove_image_view.getLayoutParams();
    layoutClose.removeRule(RelativeLayout.ALIGN_RIGHT);
    layoutClose.addRule(RelativeLayout.ALIGN_LEFT, R.id.collapsed_iv);
    layoutClose.setMargins(5, 5, 0, 0);
    remove_image_view.setLayoutParams(layoutClose);

    final int x = szWindow.x - current_x_cord;

    new CountDownTimer(500, 5) {
        //get params of Floating Widget view
        WindowManager.LayoutParams mParams = (WindowManager.LayoutParams) mFloatingWidgetView.getLayoutParams();

        public void onTick(long t) {
            long step = (500 - t) / 5;

            mParams.x = 0 - (int) (current_x_cord * current_x_cord * step);

            //If you want bounce effect uncomment below line and comment above line
            // mParams.x = 0 - (int) (double) bounceValue(step, x);


            //Update window manager for Floating Widget
            mWindowManager.updateViewLayout(mFloatingWidgetView, mParams);
        }

        public void onFinish() {
            mParams.x = 0;

            //Update window manager for Floating Widget
            mWindowManager.updateViewLayout(mFloatingWidgetView, mParams);
        }
    }.start();
}

/*  Method to move the Floating widget view to Right  */
private void moveToRight(final int current_x_cord) {
    RelativeLayout.LayoutParams layoutClose = (RelativeLayout.LayoutParams) remove_image_view.getLayoutParams();
    layoutClose.removeRule(RelativeLayout.ALIGN_LEFT);
    layoutClose.addRule(RelativeLayout.ALIGN_RIGHT, R.id.collapsed_iv);
    layoutClose.setMargins(0, 5, 5, 0);
    remove_image_view.setLayoutParams(layoutClose);

    new CountDownTimer(500, 5) {
        //get params of Floating Widget view
        WindowManager.LayoutParams mParams = (WindowManager.LayoutParams) mFloatingWidgetView.getLayoutParams();

        public void onTick(long t) {
            long step = (500 - t) / 5;

            mParams.x = (int) (szWindow.x + (current_x_cord * current_x_cord * step) - mFloatingWidgetView.getWidth());

            //If you want bounce effect uncomment below line and comment above line
            //  mParams.x = szWindow.x + (int) (double) bounceValue(step, x_cord_now) - mFloatingWidgetView.getWidth();

            //Update window manager for Floating Widget
            mWindowManager.updateViewLayout(mFloatingWidgetView, mParams);
        }

        public void onFinish() {
            mParams.x = szWindow.x - mFloatingWidgetView.getWidth();

            //Update window manager for Floating Widget
            mWindowManager.updateViewLayout(mFloatingWidgetView, mParams);
        }
    }.start();
}

But, I don't know how to move the ChatBox to the left of the character. I tried to change the RIGHT_OF property to LEFT_OF of the LayoutParams by this code, but the ChatBox doesn't show up.

    RelativeLayout.LayoutParams layoutChat = (RelativeLayout.LayoutParams) messageContainer.getLayoutParams();
    layoutChat.removeRule(RelativeLayout.RIGHT_OF);
    layoutChat.addRule(RelativeLayout.LEFT_OF, R.id.collapsed_iv);
    layoutChat.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
    layoutChat.setMargins(0, 35, -25, 0);
    messageContainer.setLayoutParams(layoutChat);

I guess because the ChatBox is outside of the Layout. Any idea how can I achieve this?

Additionally, I want to flip the ImageView of the character when moved from left to right. Any suggestion or link of how this can be done?

Thanks.

I finally found it. I change the way I move the ChatBox. Instead of put the ChatBox on the left side of the Character, I put the Character to the right side of the ChatBox and setting the ChatBox to AlignParentLeft.

characterLayoutRight = (RelativeLayout.LayoutParams) character_image_view.getLayoutParams();
characterLayoutRight.removeRule(RelativeLayout.ALIGN_PARENT_LEFT);
characterLayoutRight.addRule(RelativeLayout.RIGHT_OF, R.id.message_container);

messageLayoutRight = (RelativeLayout.LayoutParams) messageContainer.getLayoutParams();
messageLayoutRight.removeRule(RelativeLayout.RIGHT_OF);
messageLayoutRight.addRule(RelativeLayout.ALIGN_PARENT_LEFT);