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?
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.