Friday, October 24, 2014

Android Grow View Dynamically

My problem was I wanted to add animation to my app in order to make it more appealing, and to more along the lines of material design.
I did a couple quick Google searches, but didn't find much. Instead I came up with this quick trick that made it possible.
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 setHeightDifference(int start, int end) {
        this.startHeight = start;
        deltaHeight = end - startHeight;
    }
    /**
    * set the starting and ending width for the resize animation
    * starting width is usually the views current width, the end width is the width
    * we want to reach after the animation is completed
    * @param start height in pixels
    * @param end height in pixels
    */
    public void setHeightDifference(int start, int end) {
        this.startWidth = start;
        deltaWidth = end - startWidth;
    }
    /**
    * set the duration for the hideshowanimation
    */
    @Override
    public void setDuration(long durationMillis) {
        super.setDuration(durationMillis);
    }
    @Override
    public boolean willChangeBounds() {
        return true;
    }
}
LinearLayout clickableLayout = (LinearLayout) findViewById(R.id.click able_layout)
clickableLayout.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View V){
        RelativeLayout v = (RelativeLayout) V;
        // getting the layoutparams might differ in your application, it depends on the parent layout
        RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) v.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);
        v.startAnimation(a)
    }
}
       
The difference between this and a scale animation is you can actually have one line of text on a linear layout, grow to three lines, but not in a scale like way of squished text. With the XML scale setting you would actually end up having the space all pop up there, but the animation would slowly fill it, with this, it will create the space every time it grows making it more smooth and clean.

No comments:

Post a Comment