Programatically setVerticalBias with Transition for Android View in ConstraintLayout

Issue

I need to vertically move some Views in a ConstraintLayout, preferably with a Transition effect (to avoid 'skipping').

The layout is simply a Constraint Layout with several widgets (no hierarchy), all constrained to the parent.

My layout file:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:id="@+id/myLayout"
tools:context="com.example.quant.icarus.MainActivity">

<SurfaceView
    android:id="@+id/surfaceView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

<Button
    android:id="@+id/button1"
    android:layout_width="125dp"
    android:layout_height="48dp"
    android:alpha="0.5"
    android:background="@drawable/button_border"
    android:textColor="@color/ret_text"
    app:layout_constraintVertical_bias="0.97"
    app:layout_constraintHorizontal_bias="0.2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text" />

<Button
    android:id="@+id/button2"
    android:layout_width="125dp"
    android:layout_height="48dp"
    android:alpha="0.5"
    app:layout_constraintVertical_bias="0.97"
    app:layout_constraintHorizontal_bias="0.8"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text" />

<SeekBar
    android:id="@+id/prog_bar"
    android:layout_width="210dp"
    android:layout_height="40dp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:thumb="@drawable/seekbar_thumb"
    android:max="100"
    android:progress="0"
    android:rotation="270" />

<TextView
    android:id="@+id/prog_text"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    app:layout_constraintVertical_bias="0.1"
    app:layout_constraintLeft_toLeftOf="@+id/prog_bar"
    app:layout_constraintRight_toRightOf="@+id/prog_bar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text"/>

<View
    android:id="@+id/viewToMove1"
    android:layout_width="40dp"
    android:layout_height="1dp"
    app:layout_constraintVertical_bias="0.2"
    app:layout_constraintHorizontal_bias="0.34"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@color/ret_text" />

<View
    android:id="@+id/viewToMove2"
    android:layout_width="40dp"
    android:layout_height="1dp"
    app:layout_constraintVertical_bias="0.35"
    app:layout_constraintHorizontal_bias="0.34"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@color/ret_text" />

<View
    android:layout_width="1dp"
    android:layout_height="30dp"
    app:layout_constraintVertical_bias="0.35"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@color/ret_text" />

<View
    android:layout_width="1dp"
    android:layout_height="30dp"
    app:layout_constraintVertical_bias="0.65"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@color/ret_text" />

</android.support.constraint.ConstraintLayout>

The two views vewToMove1 and viewToMove2 will be programatically repositioned. However, when I try the following I get 2 problems. 1) certain other elements get incorrectly positioned on the screen, but the views move - with skipping. 2) If I try a Transition, the Views to move don't move at all (and other elements are still incorrectly positioned.

Here is the relevant Java code.

public class MainActivity extends AppCompatActivity {

    ConstraintSet cSet = new ConstraintSet();
    ConstraintLayout cLayout;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        }

    @Override
    protected void onResume() {
        super.onResume();

        //Thread which updates views.
        TimerTask move_views = new TimerTask(){
            @Override
            public void run() {

                //some code here...

                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {

                        cLayout = (ConstraintLayout) findViewById(R.id.myLayout);//can this be put in onCreate or need to wait until render complete?
                        cSet.clone(cLayout);

                        //TransitionManager.beginDelayedTransition(cLayout);//adding this removes View movement.

                        cSet.setVerticalBias(R.id.viewToMove1,0.43f);//updated in the above thread.
                        cSet.setVerticalBias(R.id.viewToMove2,0.68f);

                        cSet.applyTo(cLayout);

                    }
                });

            }
        };

        Timer move_views_timer = new Timer();
        move_views_timer.scheduleAtFixedRate(move_views,10,10);//time in milliseconds
    }


}

I can't figure out why some other views are being affected by this operation and why the transition won't work.

One idea I had: do I need to wait for the layout to finish loading (some sort of callback) before cloning the constraints? How do I do that?

Solution

Never figured out what was wrong with the original approach, but this worked for me (certainly open to cleaner solutions):

Animation a = new Animation() {
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        ConstraintLayout.LayoutParams lparams = (ConstraintLayout.LayoutParams) myViewToMove1.getLayoutParams();
        lparams.verticalBias = 0.43f;
        myViewToMove1.setLayoutParams(lparams);
    }
};
a.setDuration(8); // in ms
a.setFillAfter(true);
myViewToMove1.startAnimation(a);

Define a new animation for each of the views. PS: based this off an answer to another SO question I can't find anymore.

Answered By - Antoine Zambelli