Difficulty animating a RelativeLayout to shift size when its contents change

Question

I have a RelativeLayout within which is a ScrollView and an EditText, and if a user shifts focus to the EditText I want the ScrollView to hide itself until they finish. That part was easy, but I also would like the RelativeLayout to shrink/expand gradually to present a nice transition, rather than snapping open/close.

Here is the code which hides the ScrollView when the EditText gains focus:

private class myCostBoxFocusListener implements View.OnFocusChangeListener {

    public void onFocusChange(View v, boolean hasFocus) {

        ScrollView sView = (ScrollView) ((RelativeLayout)v.getParent().getParent()).getChildAt(1);
        //A bit hacky, I know, but it works.

        if (hasFocus) {
            sView.setVisibility(View.GONE);
        }
        else if(!hasFocus) {
            sView.setVisibility(View.VISIBLE);
        }
    }
}

and this works just fine. However, the code I strung together for trying to animate the open/close isn't working. It's currently causing the ScrollView items to fade in/out over 2 seconds, while the RelativeLayout is still snapping open/closed immediately.

LayoutTransition transition = new LayoutTransition();
ObjectAnimator a1 = ObjectAnimator.ofFloat(null, View.SCALE_Y, 0, 1);
AnimatorSet animator = new AnimatorSet();
animator.setStartDelay(0);
animator.play(a1);
transition.setAnimator(LayoutTransition.CHANGE_APPEARING, animator);
transition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, animator);
transition.setDuration(2000);
RelativeLayout rView = (RelativeLayout) dialogNew.findViewById(R.id.ocrmain_group_select_parent);
rView.setLayoutTransition(transition);

I've tried using LayoutTransition_APPEARING/DISAPPEARING instead of CHANGE_, but that doesn't animate what I want. I'm clearly missing the concept here, and would greatly appreciate some pointers on how I'm conceptualizing this incorrectly.

Answer 1

Have you tried the built-in layout change animation?

android:animateLayoutChanges="true" added to your relative layout should do what you want.

EDIT: To change the duration of the default animation, you can do something like the following.

public class MainActivity extends Activity {

    private ScrollView scrollView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.test);
        super.onCreate(savedInstanceState);

        RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.relative_layout);
        LayoutTransition t = relativeLayout.getLayoutTransition();
        t.setDuration(2000);
        relativeLayout.setLayoutTransition(t);

        scrollView = (ScrollView) findViewById(R.id.scroll_view);

        EditText editText = (EditText) findViewById(R.id.edit_text);
        editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus) {
                    scrollView.setVisibility(View.GONE);
                }
                else {
                    scrollView.setVisibility(View.VISIBLE);
                }
            }
        });
    }
}

test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/relative_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:animateLayoutChanges="true"
                android:padding="5dp" >

    <LinearLayout android:id="@+id/linear_layout"
                  android:orientation="horizontal"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:focusable="true" android:focusableInTouchMode="true"
                  android:layout_alignParentTop="true" >

        <EditText android:id="@+id/edit_text"
                  android:gravity="end"
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="3"
                  android:selectAllOnFocus="true"
                  android:imeOptions="actionDone"
                  android:inputType="numberDecimal" />

        <EditText android:id="@+id/edit_text2"
                  android:gravity="end"
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="3"
                  android:selectAllOnFocus="true"
                  android:imeOptions="actionDone"
                  android:inputType="numberDecimal" />

    </LinearLayout>

    <ScrollView android:id="@+id/scroll_view"
                android:paddingTop="20dp"
                android:gravity="end"
                android:layout_width="fill_parent"
                android:layout_height="180dp"
                android:layout_below="@id/linear_layout" >

        <TableLayout android:id="@+id/table_layout"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content" >

            <TextView android:layout_height="30dp" android:layout_width="match_parent" android:text="TTTT"/>

            <TextView android:layout_height="30dp" android:layout_width="match_parent" android:text="TTTT"/>

            <TextView android:layout_height="30dp" android:layout_width="match_parent" android:text="TTTT"/>

            <TextView android:layout_height="30dp" android:layout_width="match_parent" android:text="TTTT"/>

            <TextView android:layout_height="30dp" android:layout_width="match_parent" android:text="TTTT"/>

            <TextView android:layout_height="30dp" android:layout_width="match_parent" android:text="TTTT"/>

            <TextView android:layout_height="30dp" android:layout_width="match_parent" android:text="TTTT"/>


        </TableLayout>

    </ScrollView>

    <Button android:id="@+id/button_cancel"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="Cancel"
            android:layout_below="@id/scroll_view"
            android:layout_alignParentLeft="true" />

    <Button android:id="@+id/button_ok"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="Ok"
            android:layout_below="@id/scroll_view"
            android:layout_alignParentRight="true" />

</RelativeLayout>