Android : Translation Animation is not working correctly

Question

I am new to animations in android and trying to work with Property Animations. I am trying to do a sliding effect using translating the x property. but I am not getting the result i want.

I have a layout that is :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/parent"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/first"
            android:layout_width="320dp"
            android:layout_height="200dp"
            android:background="#00ff00" >
        </LinearLayout>

        <LinearLayout
            android:id="@+id/second"
            android:layout_width="320dp"
            android:layout_height="200dp"
            android:background="#0000ff" >
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

According to layout. I have two linear layouts in a parent linear layout that are horizanlty placed. and only first layout is being shown and second layout is out of screen. I am trying to animate the parent x property so that using the translation i will slide the parent and first will hide and second will show. Following is my code:

    LinearLayout parent_;
    LinearLayout first_;
    LinearLayout second_;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    parent_ = (LinearLayout) findViewById(R.id.parent);
    first_ = (LinearLayout) parent_.findViewById(R.id.first);
    second_ = (LinearLayout) parent_.findViewById(R.id.second);
}

and just to simulate the animation I am using the option menu.

static boolean a = true;
@Override
public boolean onOptionsItemSelected(MenuItem item) {

    if(a){
        ObjectAnimator animate = ObjectAnimator.ofFloat(parent_, "x", -parent_.getWidth());
        animate.setDuration(500);
        animate.start();
        animate.addListener(this);
        animate.addUpdateListener(this);
        a = false;
    } else {
        ObjectAnimator animate = ObjectAnimator.ofFloat(parent_, "x", -parent_.getWidth(), 0);
        animate.setDuration(500);
        animate.start();

        a = true;
    }
    return super.onOptionsItemSelected(item);
}

When I am starting the application my application looks like this :

and after animation the application looks like this :

NOTE: the white area is actually part of screenshot. the background in white.

after animation the instead of showing the blue layout. it completely slides to the left and hides itself. and does not show the blue layout. I have tried to take a screen shot during the animation. it looks like this :

what i am doing wrong ??? I hope i have explained my question well....

Answer 1

in the linear layout, if the child is not being displayed, it is not going to be laid out and not going to be the part of the measurements ( as it looks like ). I have to use the RelativeLayout and keep the blue child hidden behind the green one, so that it would still be the part of the screen. and it worked ...