CODEWITHSUNDEEP
androidanimation
meeftah
meeftah

Reputation: 95

Animate visibility modes when linearlayout visible

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?

Upvotes: 0

Views: 351

Answers (1)

Anton Shkurenko
Anton Shkurenko

Reputation: 4327

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();

Upvotes: 2

Related Questions