CODEWITHSUNDEEP
javaandroidanimationandroid-animation
g.revolution
g.revolution

Reputation: 12262

Android : Translation Animation is not working correctly

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 :

enter image description here

and after animation the application looks like this :

enter image description here

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 :

enter image description here

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

Upvotes: 0

Views: 3720

Answers (1)

g.revolution
g.revolution

Reputation: 12262

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 ...

Upvotes: 2

Related Questions