ConstraintLayout: translationX animation to push right a RadioButton and an ImageView together

Question

I'm trying to push right an ImageView using a translationX animation on a RadioButton. That's the layout that I've created:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <RadioButton
        android:id="@+id/radio_button"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="10dp"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="15dp"
        android:background="@drawable/my_image"
        app:layout_constraintStart_toEndOf="@id/radio_button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="8:5"
    />

Which starts like this:

Then I start this animation programmatically:

radioButton.animate().translationX(50).setDuration(500).start();

Expecting something like: (Please note that both width and height has their size reduced in this preview, respecting layout_constraintDimensionRatio="8:5")

But unfortunately only RadioButton translates (and ends behind the image), while ImageView remains the same size and in the same position. Can you help me understand why this happens?

I thought that the key instruction was app:layout_constraintStart_toEndOf="@id/radio_button" in ImageView, but I think that I'm missing something.

Any help is appreciated, thank you all

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

What you are seeing is how translatioX works for Android views:

setTranslationX

public void setTranslationX (float translationX)

Sets the horizontal location of this view relative to its left position. This effectively positions the object post-layout, in addition to wherever the object's layout placed it.

Italics are mine. The key phrase here is "post-layout". Setting translationX only effects the position of the view and does not change the positions of any other views. In other words, all other views behave as if translationX == 0.

You can still achieve the effect you want, but you will have to approach it differently using margins or, maybe, the TransitionManager. Search for "ConstraintLayout animation" for some ideas.

ConstraintLayout: translationX animation to push right a RadioButton and an ImageView together

1 Answers1