Question

I have an Android view that includes a RadioGroup with three RadioButtons. When one of the RadioButtons is selected, the user also has to enter text into an EditText control. If either of the other two RadioButtons are selected, this extra information is not required.

I’m currently using the OnCheckedChangedListener for the RadioGroup to determine when a new RadioButton is checked, and hiding the EditText by setting its visibility to View.GONE. However this is a little jarring, and I’m wondering if there is a way that I could animate the transition at all. Is this possible, and if so, whats the key to getting started?

Answer 1

I’ve come up with the following workable solution, which was based on code I found at http://tech.chitgoks.com/2011/10/29/android-animation-to-expand-collapse-view-its-children/

In my activity:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.edit_account);
    companyGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
    {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId)
        {
            if (checkedId == R.id.companyRadio)
                EDNUtils.expandCollapse(companyNameText, true, 500);
            else
                EDNUtils.expandCollapse(companyNameText, false, 500);
        }
    });
}

Implementation from EDNUtils:

public static Animation expandCollapse(final View v, final boolean expand) 
{       
    return expandCollapse(v, expand, 1000);
}

public static Animation expandCollapse(final View v, final boolean expand, final int duration) 
{
    int currentHeight = v.getLayoutParams().height;
    v.measure(MeasureSpec.makeMeasureSpec(((View)v.getParent()).getMeasuredWidth(), MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
    final int initialHeight = v.getMeasuredHeight();

    if ((expand && currentHeight == initialHeight) || (!expand && currentHeight == 0))
        return null;

    if (expand) 
        v.getLayoutParams().height = 0;
    else 
        v.getLayoutParams().height = initialHeight;
    v.setVisibility(View.VISIBLE);

    Animation a = new Animation() 
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) 
        {
            int newHeight = 0;
            if (expand) 
                newHeight = (int) (initialHeight * interpolatedTime);
            else 
                newHeight = (int) (initialHeight * (1 - interpolatedTime));
            v.getLayoutParams().height = newHeight;            
            v.requestLayout();

            if (interpolatedTime == 1 && !expand)
                v.setVisibility(View.GONE);
        }

        @Override
        public boolean willChangeBounds()  
        {
            return true;
        }
    };
    a.setDuration(duration);
    v.startAnimation(a);
    return a;
}