Animate visibility modes when linearlayout visible

Question

I have linear layout like below

<LinearLayout
    android:id="@+id/pilihwaktu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="125dp">

    <com.testing.CustomLinearLayout
        android:id="@+id/oneway"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/field_background"
        android:padding="5dp"
        android:layout_weight=".50">

        ....
   </com.testing.CustomLinearLayout>

    <com.testing.CustomLinearLayout
        android:id="@+id/roundtrip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/field_background"
        android:padding="5dp"
        android:layout_weight=".50">

        ....

    </com.testing.CustomLinearLayout>

</LinearLayout>

and it will show view like this

+---------------+---------------+
|               |               |
|    oneway     |   roundtrip   |
|               |               |
+---------------+---------------+

I want to make the roundtrip is gone as the default and when the Checkbox is checked, I want to animate roundtrip so it will restore things to the above state (and oneway section will animate as it follows so it looks smooth). And when the checkbox is not checked roundtrip will animate to hide or gone

I've tried to follow this link but it wasn't animated and it looks like ObjectAnimator is simple way to do it...

What is the correct way to do this?

score 2 · Accepted Answer · answered Apr 06 '16 at 08:11

Easy way:

Firstly, add to your parent LinearLayout this attribute:

<LinearLayout
   android:id="@+id/pilihwaktu"
   ...
   android:animateLayoutChanges="true"
   ... />

And later set checked change listener in the code like this:

yourCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
       @Override
       public void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {
           roundTip.setVisibility(isChecked ? View.VISIBLE : View.GONE);
       }
});

More hard way:

This is for expand, it's simple to make it for collapse. Use this in the onCheckedChange, if it's checked

updateListener = new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // Get params:
                final LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) roundTip.getLayoutParams();

                params.weight = (Float) animation.getAnimatedValue();
                roundTip.setLayoutParams(loparams);
                }
        };

animatorListener = new AnimatorListenerAdapter() {
    @Override
    public void onAnimationStart(Animator animation) {
        roundTip.setVisibility(View.VISIBLE);     
    }
};

animator = ValueAnimator.ofFloat(0f, 0.5f);
animator.addUpdateListener(updateListener); 
animator.addListener(animatorListener);            
animator.setDuration(500);
animator.start();

@meeftah nice to hear :) – Anton Shkurenko Apr 07 '16 at 05:33 — Anton Shkurenko, Apr 07 '16 at 05:33

Animate visibility modes when linearlayout visible

1 Answers1