Create an animation where an ImageView slides up and below the ImageView a LinearLayout fades in

Question

I'm trying to create a simple Activity with a login form. What I want to do is have the logo of the application right above the sign in button and when the user presses the sign in button have the logo slide up a bit and between the logo and the sign in button have a login form (username, password fields) fade in. Since I'm a novice to Android Animations I'd like some help.

I have the following layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <ImageView android:id="@+id/logo"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginBottom="8dp"
               android:src="@drawable/logo"
               android:layout_centerHorizontal="true"
               android:layout_above="@+id/login_form"/>

    <LinearLayout android:id="@id/login_form"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:orientation="vertical"
                  android:layout_above="@+id/sign_in"
                  android:visibility="gone">

        <EditText android:id="@+id/username"
                  android:layout_width="match_parent"
                  android:layout_height="48dp"
                  android:layout_marginBottom="8dp"
                  android:textColor="@color/Black"
                  android:textColorHint="@color/Black"
                  android:textIsSelectable="false"
                  android:hint="@string/username"/>

        <EditText android:id="@+id/password"
                  android:layout_width="match_parent"
                  android:layout_height="48dp"
                  android:inputType="textPassword"
                  android:textColor="@color/Black"
                  android:textColorHint="@color/Black"
                  android:textIsSelectable="false"
                  android:hint="@string/password"/>

    </LinearLayout>

    <Button android:id="@id/sign_in"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginTop="8dp"
            android:layout_alignParentBottom="true"
            android:textColor="@color/White"
            android:textSize="18sp">
</RelativeLayout>

When using any of the animations below, the logo either makes a sudden jump a few pixels upwards and then the form fades in or it slides a few pixels upwards then makes a sudden jump upwards and then the form fades in.

mForm.setAlpha(0.0f);
mForm.setScaleX(0.0f);
mForm.setScaleY(0.0f);
mForm.setVisibility(View.VISIBLE);

mForm.animate()
        .alpha(1.0f)
        .scaleX(1.0f)
        .scaleY(1.0f)
        .setInterpolator(new AccelerateDecelerateInterpolator())
        .setDuration(mAnimationDurationMedium);

<>

mLogo.animate()
    .translationYBy(mDisplayMetrisUtils.dpToPixels(-96.0f))
    .setDuration(mAnimationDurationMedium)
    .setInterpolator(new AccelerateDecelerateInterpolator())
    .withEndAction(new Runnable() {
        @Override
        public void run() {
            mForm.setAlpha(0.0f);
            mForm.setScaleX(0.0f);
            mForm.setScaleY(0.0f);
            mForm.setVisibility(View.VISIBLE);

            mForm.animate()
                    .alpha(1.0f)
                    .scaleX(1.0f)
                    .scaleY(1.0f)
                    .setInterpolator(new AccelerateDecelerateInterpolator())
                    .setDuration(mAnimationDurationMedium);
        }
    });

<>

mForm.setAlpha(0.0f);
mForm.setScaleX(0.0f);
mForm.setScaleY(0.0f);
mForm.setVisibility(View.VISIBLE);

mForm.animate()
        .alpha(1.0f)
        .scaleX(1.0f)
        .scaleY(1.0f)
        .setInterpolator(new AccelerateDecelerateInterpolator())
        .setDuration(mAnimationDurationMedium)
        .withStartAction(new Runnable() {
            @Override
            public void run() {
                mLogo.animate()
                        .translationYBy(-mForm.getHeight())
                        .setInterpolator(new AccelerateDecelerateInterpolator())
                        .setDuration(mAnimationDurationMedium);
            }
        });

From what I understand even though I set the x and y scale of the LinearLayout to 0, once it becomes VISIBLE it occupies all the necessary pixels needed to display it at once even though its scale is set to 0, thus the sudden upwards jump of the logo. What I'd like to achieve though is have the LinearLayout progressively occupy more space and have a smooth slide up effect for the logo.

I've tried praying to the dark lords but without any success. Can someone tell me what am I missing and point me to the right direction? Is there a way to create an animation where I transform the height of the LinearLayout from 0dp to wrap_content?

Thanks in advance, Dimitris.

Answer 1

Have you considered using a LinearLayout with the animateLayoutChanges flag?

I think this can give you the desired effect with almost zero work. Replace your outer RelativeLayout with a LinearLayout and then when you change the visibility of the form it will animate its entrance.

See this link for the docs: http://developer.android.com/training/animation/layout.html