CODEWITHSUNDEEP
androidandroid-animation
Zeezl
Zeezl

Reputation: 133

How to animate active layout change (Layout A -> Layout B) in Android?

I have a problem with animating layout transision in my Android Application.

I've three layouts stacked on each others. I just change visible layout to decide what content is shown to user. So the lifecycle look like this A->B->C->A...

The problem is that I want to animate my layout changes and I don't have idea how to do that. I want to achive ebook's like sliding effect (or any other one, I just want to get how does it work).

Any ideas?

Upvotes: 0

Views: 162

Answers (3)

Zhli
Zhli

Reputation: 380

My code:

MainActivity:

public class MainActivity extends Activity implements View.OnTouchListener {
private ViewFlipper viewFlipper;
private float touchDownX;
private float touchUpX;

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

    viewFlipper = (ViewFlipper) findViewById(R.id.body_flipper);
    viewFlipper.setOnTouchListener(this);
}

@Override
public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        touchDownX = event.getX();
        return true;
    } else if (event.getAction() == MotionEvent.ACTION_UP) {

        touchUpX = event.getX();

        if (touchUpX - touchDownX > 100) {

            viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
                    R.anim.push_right_in));
            viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
                    R.anim.push_right_out));

            viewFlipper.showPrevious();

        } else if (touchDownX - touchUpX > 100) {

            viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
                    R.anim.push_left_in));
            viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
                    R.anim.push_left_out));

            viewFlipper.showNext();
        }
        return true;
    }
    return false;
}

}

activity_main.xml

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"     tools:context=".MainActivity">

<ViewFlipper
    android:id="@+id/body_flipper"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f0f0f0" >

    <include
        android:id="@+id/layout01"
        layout="@layout/page1" />
    <include
        android:id="@+id/layout02"
        layout="@layout/page2" />
    <include
        android:id="@+id/layout02"
        layout="@layout/page3" />

</ViewFlipper>

</RelativeLayout>

push_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
    android:duration="400"
    android:fromXDelta="-100.0%p"
    android:toXDelta="0.0" />
<alpha
    android:duration="400"
    android:fromAlpha="0.1"
    android:toAlpha="1.0" />
</set>

push_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
    android:duration="400"
    android:fromXDelta="0.0"
    android:toXDelta="100.0%p" />
<alpha
    android:duration="400"
    android:fromAlpha="1.0"
    android:toAlpha="0.1" />
</set>

push_left_in.xml and push_left_out.xml are similar to the above ones.

Upvotes: 1

mtwain
mtwain

Reputation: 101

Try to use ViewFlipper to flip between views. http://developer.android.com/reference/android/widget/ViewFlipper.html

Upvotes: 0

Shayan_Aryan
Shayan_Aryan

Reputation: 2042

use ObjectAnimator class and implement fade/translation animations that fit your needs.

Upvotes: 0

Related Questions