How to animate the width and height of the layout?

Question

I have a LinearLayout that expands to full screen, hiding all other layouts and views on onClick . There is a Relativelayout above LinearLayout

I want to apply custom animation to this. The size should increase slowly (for example, 500 milliseconds).

But I doubt that this is possible? Thanks.

That's what I'm doing onClick :

 private void expandView (int viewId) { RelativeLayout relativeLayout = (RelativeLayout) ((LinearLayout) view.findViewById(viewId)).getParent(); ViewGroup.MarginLayoutParams rlMargin = (ViewGroup.MarginLayoutParams) relativeLayout.getLayoutParams(); rlMargin.setMargins(0, 0, 0, 0); relativeLayout.setLayoutParams(rlMargin); LinearLayout linearLayout = (LinearLayout) relativeLayout.getParent(); hideAllLinearLayoutExcept(linearLayout.getId()); hideAllTilesExcept(viewId); } 

viewId is the LinearLayout identifier that I click. This function is called from onClick()

Answer 1

I am sure that this is possible.

Just write your own animation and change the LayoutParams your animated view. In this example, the animation animates the height of the animated view. Of course, width animation is possible.

Here's what it might look like:

 public class ResizeAnimation extends Animation { private int startHeight; private int deltaHeight; // distance between start and end height private View view; /** * constructor, do not forget to use the setParams(int, int) method before * starting the animation * @param v */ public ResizeAnimation (View v) { this.view = v; } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { view.getLayoutParams().height = (int) (startHeight + deltaHeight * interpolatedTime); view.requestLayout(); } /** * set the starting and ending height for the resize animation * starting height is usually the views current height, the end height is the height * we want to reach after the animation is completed * @param start height in pixels * @param end height in pixels */ public void setParams(int start, int end) { this.startHeight = start; deltaHeight = end - startHeight; } /** * set the duration for the hideshowanimation */ @Override public void setDuration(long durationMillis) { super.setDuration(durationMillis); } @Override public boolean willChangeBounds() { return true; } } 

In the code, create a new animation and apply it to the RelativeLayout that you want to animate:

 RelativeLayout relativeLayout = (RelativeLayout) ((LinearLayout) view.findViewById(viewId)).getParent(); // getting the layoutparams might differ in your application, it depends on the parent layout RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) relativeLayout.getLayoutParams(); ResizeAnimation a = new ResizeAnimation(relativeLayout); a.setDuration(500); // set the starting height (the current height) and the new height that the view should have after the animation a.setParams(lp.height, newHeight); relativeLayout.startAnimation(a); 

Answer 2

I searched for this for hours, and Philip Jahodah's answer was perfect, as it can be added to the AnimationSet. I made a couple of small changes to support the more similar default animation class constructor (except for the View parameter) and to support the fillEnabled property.

 public class ResizeAnimation extends Animation { private int startWidth; private int deltaWidth; // distance between start and end height private int startHeight; private int deltaHeight; private int originalWidth; private int originalHeight; private View view; private boolean fillEnabled = false; public ResizeAnimation(View v, int startW, int endW, int startH, int endH) { view = v; startWidth = startW; deltaWidth = endW - startW; startHeight = startH; deltaHeight = endH - startH; originalHeight = v.getHeight(); originalWidth = v.getWidth(); } @Override public void setFillEnabled(boolean enabled) { fillEnabled = enabled; super.setFillEnabled(enabled); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { if(interpolatedTime == 1.0 && !fillEnabled) { view.getLayoutParams().height = originalHeight; view.getLayoutParams().width = originalWidth; } else { if(deltaHeight != 0) view.getLayoutParams().height = (int) (startHeight + deltaHeight * interpolatedTime); if(deltaWidth != 0) view.getLayoutParams().width = (int) (startWidth + deltaWidth * interpolatedTime); } view.requestLayout(); } } 

Answer 3

Here's a simplified, more general (any layout option) version of Xamarin.

 public class SizeAnimation : Animation { private int _newValue; private int _initialValue; private string _property; private object _target; private View _view; public SizeAnimation (View view, string property, int newValue) { _view = view; _property = property; _newValue = newValue; _target = view.LayoutParameters; // View measure is generally an enum of wrap_content / fill_parent // we need to make the measure explicit if (property == "Width" || property == "Height") { view.Measure ((int)MeasureSpecMode.Unspecified, (int)MeasureSpecMode.Unspecified); var unmeasuredValue = (int)view.GetType().GetProperty(property).GetValue(view); _initialValue = unmeasuredValue < 1 ? (int) view.GetType().GetProperty("Measured" + _property).GetValue(view) : unmeasuredValue; view.LayoutParameters.GetType().GetProperty(property).SetValue(view.LayoutParameters,_initialValue); } else { _initialValue = (int) _target.GetType ().GetProperty (property).GetValue(_target); } } protected override void ApplyTransformation(float interpolatedTime, Transformation t) { _target.GetType().GetProperty(_property).SetValue(_target, (int)(_initialValue + (_newValue - _initialValue) * interpolatedTime)); _view.RequestLayout(); } public override bool WillChangeBounds() { return true; } } 

Using:

 var property = "Width"; var value = 120; var animation = new SizeAnimation(myView, property, value); animation.Duration = 2000; animation.Interpolator = (new LinearInterpolator()); myView.StartAnimation(animation); 

"Theoretically" works, not fully verified.

Answer 4

I worked with Philipp Jahoda answer. Here is an implementation that works both for animating the extension and for smoothing based on the start and end values ​​that we pass. Hope this helps.

https://gist.github.com/rahulrvp/dcccd1b78cd09b31a024