View Animations in Android Collapse/Expand Views in LinearLayout

Question

I added Images view dynamically to my Linear layout,

I want to achieve

Here is sample code what I have done

MainActivity

 package ksp.com.animationssample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private Button btn_expand;
    private Button btn_collapse;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_expand = (Button) findViewById(R.id.btn_expand);
        btn_collapse = (Button) findViewById(R.id.btn_collapse);
        LinearLayout.LayoutParams vp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        final LinearLayout layout = (LinearLayout) findViewById(R.id.imageLayout);


        for (int i = 0; i < 3; i++) {
            final ImageView image = new ImageView(MainActivity.this);
            image.setLayoutParams(vp);
            if (i == 0)
                image.setImageDrawable(getResources().getDrawable(R.drawable.item_image1));
            else image.setImageDrawable(getResources().getDrawable(R.drawable.item_image2));
            if (i == 2)
                image.setVisibility(View.VISIBLE);
            else
                image.setVisibility(View.GONE);
            layout.addView(image);
        }


        btn_expand.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                expandOrCollapse(layout.getChildAt(2), true, layout.getChildAt(0).getHeight() + layout.getChildAt(1).getHeight());
                expandOrCollapse(layout.getChildAt(1), true, layout.getChildAt(0).getHeight());
                expandOrCollapse(layout.getChildAt(0), true, 0);


            }
        });
        btn_collapse.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                expandOrCollapse(layout.getChildAt(0), false, 0);
                expandOrCollapse(layout.getChildAt(1), false, layout.getChildAt(0).getHeight());
                expandOrCollapse(layout.getChildAt(2), false, layout.getChildAt(0).getHeight() + layout.getChildAt(1).getHeight());
            }
        });


    }


    public void expandOrCollapse(final View v, boolean is_expand, final int animheight) {
        TranslateAnimation anim = null;
        if (is_expand) {
            anim = new TranslateAnimation(0.0f, 0.0f, -animheight, 0.0f);
            v.setVisibility(View.VISIBLE);
            Animation.AnimationListener expandedlistener = new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }

                @Override
                public void onAnimationRepeat(Animation animation) {
                }

                @Override
                public void onAnimationEnd(Animation animation) {


                }
            };

            anim.setAnimationListener(expandedlistener);
        } else {
            anim = new TranslateAnimation(0.0f, 0.0f, 0.0f, -animheight);
            Animation.AnimationListener collapselistener = new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }

                @Override
                public void onAnimationRepeat(Animation animation) {
                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    v.setVisibility(View.GONE);
                }
            };

            anim.setAnimationListener(collapselistener);
        }

        anim.setDuration(1500);
        anim.setInterpolator(new AccelerateInterpolator(0.5f));
        v.startAnimation(anim);
    }
}

activity_mainn.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    android:background="@android:color/holo_blue_dark"
    tools:context="ksp.com.animationssample.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:id="@+id/btn_expand"
        android:text="Expand"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_collapse"
        android:text="Collopse"/>
<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:id="@+id/imageLayout"
        android:gravity="center"

        android:orientation="vertical"
        android:layout_height="wrap_content">
    </LinearLayout>
    <!--android:animateLayoutChanges="true"-->
</ScrollView>


</RelativeLayout>

when I click expand button at the first time is not showing the animation from the second time it's working.

enable Visible the item after click on collapse button.

What to do next : When I selected any View item it has to show select animation then collapse animation, after collapse it has to appear as top View like I mention in Image above. Currently I am hard code the count of the views and wrote static animations for each view with static heights of animations i.e (expandOrCollapse(view, height_of_view))

I search a while for this, but no luck.

I follow the Vie expand/collapse and smooth expand / collapse but they can't help me expand all views in Linear layout.

Can we do this List views are recycler view or something ?

for time saving I have added my sample to git hub you can try it Animation Sample Github

Suggest me, please.

Just to be clear on the problem - you want the bottom credit card to remain visible after collapsing? Or is there a different problem? — Gil Moshayof, Oct 30 '16 at 14:20
Assume when I click on second card it's has to appear top after collapse — Kathi, Oct 30 '16 at 14:23
CardStackView is a good library, Consider visiting that once, https://github.com/loopeer/CardStackView — Myth, Nov 02 '16 at 12:54
@NougatLover Thanks for git link. I am very specific to achieve this animation appreciate your help . — Kathi, Nov 02 '16 at 14:37

score 6 · Accepted Answer · edited Jan 22 '18 at 10:10

I have made separate class for it. Check if it works for you:

public class DropDownAnim extends Animation {
    private final int sourceHeight;
    private final int targetHeight;
    private final View view;
    private final boolean down;

    public DropDownAnim(View view, int sourceHeight, int targetHeight, boolean down) {
        this.view = view;
        this.sourceHeight = sourceHeight;
        this.targetHeight = targetHeight;
        this.down = down;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        int newHeight;
        if (down) {
            newHeight = sourceHeight + (int) (targetHeight * interpolatedTime);
        } else {
            newHeight = sourceHeight + targetHeight - (int) (targetHeight * interpolatedTime);//(int) (targetHeight * (1 - interpolatedTime));
        }
        view.getLayoutParams().height = newHeight;
        view.requestLayout();
        view.setVisibility(down ? View.VISIBLE : View.GONE);
    }

    @Override
    public void initialize(int width, int height, int parentWidth,
            int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
    }

    @Override
    public boolean willChangeBounds() {
        return true;
    }
}

While working with this. For expand

public void expand(final View v) {
        final int sourceHeight = v.getLayoutParams().height;
        final int targetHeight = getResources().getDimensionPixelSize(R.dimen.notification_height);//v.getMeasuredHeight();
        DropDownAnim a = new DropDownAnim(v,targetHeight,true);
        a.setDuration((int) (targetHeight / v.getContext().getResources().getDisplayMetrics().density));
        a.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                // Your code on end of animation
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        v.setVisibility(View.INVISIBLE);
        v.startAnimation(a);
    }

For collapse:

public void collapse(final View v) {
        final int sourceHeight = v.getLayoutParams().height;
        final int targetHeight = v.getMeasuredHeight();
        DropDownAnim a = new DropDownAnim(v, targetHeight, false);
        a.setDuration((int) (targetHeight / v.getContext().getResources().getDisplayMetrics().density));
        a.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                // Your code on end of animation
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        v.startAnimation(a);
    }

Update:
sourceHeight added to prevent view blinking.

Thanks for full work around, i applied these methods to my Views like ' expand(layout.getChildAt(2)); expand(layout.getChildAt(1)); expand(layout.getChildAt(0)); ' does seems its works. How for this code works for dynamically added layouts ? can we use for loop ? — Kathi, Nov 06 '16 at 16:18
After research on your code I placed your code to my project but my views are just blinking and gone. Can you help little more how this code works. I applied for every view in my linear layout. Also How does it know animation height ? — Kathi, Nov 07 '16 at 06:10
animation height = till what height you want to expand it. In my case, I have defined height in `dimens.xml`. Even you can get the height. Like if you want 2nd view to slide upto 1st view height + 2nd view height. So that will be your height. Similarly, for 3rd = 1st height + 2nd height + 3rd height. And animate all this views with some gap between them to get actual feel of animation — Jimit Patel, Nov 07 '16 at 06:13
After all replace and try your code it's not working as animatio. My Linear Layout just flash In and Out, I tried to modify the time interval of animation no luck. — Kathi, Nov 09 '16 at 05:08

Roman_D · Answer 2 · 2016-11-02T06:36:23.120

1

Try to not hide your target view (now you set visibility GONE for all views after collapsed animation end) and do this:

targetView.bringToFront();
targetView.invalidate();
targetView.getParent().requestLayout();

edited Nov 02 '16 at 06:36

answered Nov 02 '16 at 06:26

Roman_D

4,680
2
14
17

Thanks for 'v.bringToFront()' methods I am going to update my repo with that change but how can we handle if the view is dynamic i.e count from a server. Here I wrote animation for each view separately it's not the way right? Can you suggest me the better way to handle this type of animations for multiple views? You can also see there should be select animation for selection view in the list. How can we deal with that? appreciate your help – Kathi Nov 02 '16 at 07:14
I suppose, You can apply animation in for-loop. For select animation - what kind of animation do you say about? In onClick callback we get target view and can apply any type of animation, or even set animation in xml layout. I suppose you have not many items to animate, so it's enough to use FrameLayout as container (not ListView) – Roman_D Nov 02 '16 at 12:50
@kathi can u attach the code for study purpose :). Really i cant how you deals the problem:( – udayatom Nov 04 '16 at 04:12
@udayatom please find code in my github sample https://github.com/kathisai/AnimationsSample – Kathi Nov 04 '16 at 04:20

View Animations in Android Collapse/Expand Views in LinearLayout

2 Answers2