Animate/Translate the View from behind another View

Question

I do not know wether it should be called translate or animate.

I have a Framelayout , starting from the top of Activity, and it ends up about the center or new center of the screen.

This FrameLayout has two images in it.
But I do not bother about them.

Now I have another RelaytiveLayout which has two Views: a TextView and a Button.

I want that, at specific time, they start animating/translating downward from the end of the FrameLayout and get their original height, which should be the height of the TextView and the Button.

I do not want to give fixed sizes, therefore I can not give fixed x,y pixel coordinates to translate.

Here it is my xml layout

 <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/main_frame">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/animationboard"
    android:layout_gravity="center"
    android:gravity="center"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />
    <ImageView
    android:id="@+id/iv_animation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:contentDescription="animation"
    android:layout_marginTop="350dp"
    android:layout_marginLeft="30dp"


    />

</FrameLayout>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/main_frame"
    android:layout_centerHorizontal="true"
    android:id="@+id/secondry_frame">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Anggor"
        android:gravity="center"
        android:textSize="30dp"
        android:layout_gravity="center"
        android:id="@+id/tv"
        android:visibility="gone"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Close"
        android:layout_below="@id/tv"
        android:visibility="gone"
        android:id="@+id/close"/>

</RelativeLayout>

As you can see, I set the TextView and Button visibility to gone, so that when I translate those Views they should be set visible.

I have no idea on how to do that.
Please help.

Answer 1

I have done it my self , just sharing the answer so that if any one want it any time later. What I have done to achieve is a illusion , I have set my Relativelayout(which needs to be move) behind the Framelayout(which contains images) so now my xml part looks like this,

 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"

    android:clipChildren="false">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/main_frame"
        android:layout_centerHorizontal="true"
        android:id="@+id/secondry_frame"
        android:clipChildren="false"
        android:background="#ffaaff">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Anor"
            android:gravity="center"
            android:textSize="30dp"
            android:layout_gravity="center"
            android:id="@+id/tv"
            android:visibility="gone"

            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Close"
            android:layout_below="@id/tv"
            android:visibility="gone"
            android:id="@+id/close"/>

    </RelativeLayout>


<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/main_frame"
    android:clipChildren="false">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/animationboard"
    android:layout_gravity="center"
    android:gravity="center"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />
</FrameLayout>
<ImageView
    android:id="@+id/iv_animation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:contentDescription="animation"
    android:layout_marginTop="350dp"
    android:layout_marginLeft="30dp"
    />

</RelativeLayout>

So by doing this , my Relative layout is covered by the Framelayout images.

Now the second trick was to start the animation from the middle of screen , so that no one can see the animation is starting from the top as the images has cover the middle part of the screen , here is what I have made my animation file and placed it in the anim folder

animfalling

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="-50%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>

and thus I used in my java code like

RelativeLayout rl = (RelativeLayout) findViewById(R.id.secondry_frame);
                final Animation animationFalling = AnimationUtils.loadAnimation(c, R.anim.anim_falling);
                rl.startAnimation(animationFalling);

and its giving me the result I was looking for :)