Android animation view right to left

Question

I make a little app and im new in android animations/transition.

What i want: If you pressed a button the background(view) should slide out and another should come in, but i dont want to start a other activity, i only want to change the background from the existing.

This is exactly what i want: https://www.polymer-project.org/0.5/components/core-animated-pages/demos/simple.html (you must change the box in the box in the left upper corner to see it)

I read something about it in other Posts, but often there is the solution for starting another activity..

If you understand what i mean, it would be nice to give me a hint or a link to tutorial or something.

EDIT - SOLUTION

i make it work for me, i builded a code that did exactly that what i want to do, i gave all the answer 1up and flag the last, because its near what i have done. Thanks to all.

This links were very usefull: https://github.com/codepath/android_guides/wiki/Animations (best animation tutorial i have found so far)

Slide right to left Android Animations (xmls for right to left, up to down, ...)

Example for transition left:

Code:

public void transitionleft(final View viewcome, final View viewgo){
        animcome = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_right_in);
        animgo = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_left_out);
        animgo.setDuration(1000);
        animcome.setDuration(1000);

        animcome.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                viewcome.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        animgo.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                viewgo.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        viewcome.startAnimation(animcome);
        viewgo.startAnimation(animgo);
    }

XML transition in res/anim/slide_right_in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate android:duration="5000" android:fromXDelta="100%" android:toXDelta="0%" />
    <alpha android:duration="5000" android:fromAlpha="1.0" android:toAlpha="1.0" />
</set>

res/anim/slide_left_out

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate android:duration="5000" android:fromXDelta="0%" android:toXDelta="-100%"/>
    <alpha android:duration="5000" android:fromAlpha="1.0" android:toAlpha="1.0" />
</set>

How it works: I have 2 views which are both have the screen size (match_parent). One is visibile the other not. Then you give the visible to the function as viewgo (because this should go away) and the unvisible as viewcome(because this should be the new who come in) At the beginn of the animation, the viewcome will set visible because its "slide in". After the animation is done the viewgo will be unvisible, because its "slide out". It's very easy and worked pretty good.

To improve the animation, you could use a AnimatorSet to synchronize the both animations (set.playtogether()) but it also works good for me without that.

Answer 1

Maybe you can try with valueAnimator:

//animate from your current color to red ValueAnimator 
anim = ValueAnimator.ofInt(view.getBackgroundColor(), 
           Color.parseColor("#FF0000")); 
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
    @Override public void onAnimationUpdate(ValueAnimator animation) {       
         view.setBackgroundColor(animation.getAnimatedValue()); 
    } 
}); 
anim.start();

Answer 2

 public class MainActivity extends Activity implements OnGestureListener {    
    private LinearLayout main;    
    private TextView viewA;

    private GestureDetector gestureScanner;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //this will set default color to black
        View view = findViewById(R.id.textView);
        view.setBackgroundColor(Color.BLACK);
    }

    @Override
    public boolean onTouchEvent(MotionEvent me) {
        return gestureScanner.onTouchEvent(me);

    }

    @Override
    public boolean onDown(MotionEvent e) {
        viewA.setText("-" + "DOWN" + "-");
        return true;
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        viewA.setText("-" + "FLING" + "-");

        //changes color on swipe
        view.setBackgroundColor(Color.GREEN);
        return true;
    }

    @Override
    public void onLongPress(MotionEvent e) {
        viewA.setText("-" + "LONG PRESS" + "-");
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        viewA.setText("-" + "SCROLL" + "-");
        return true;
    }

    @Override
    public void onShowPress(MotionEvent e) {
        viewA.setText("-" + "SHOW PRESS" + "-");
    }    

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        viewA.setText("-" + "SINGLE TAP UP" + "-");
        return true;
    }
}

Here in onCreate, default color is set to black. Now whenever an 'event' is detected, Like touch, swipe(fling), scroll etc. your app should change colors. Here I've changed colors onFling, you can modify this to get randomized colors and even do same in other event listeners.

This link should point you in proper direction.

Hope this helps.

EDIT:

For transition effect:

animatedBackgroundView.setBackgroundResource(R.anim.background_touch);
animatedBackgroundView.setOnTouchListener(new View.OnTouchListener() {

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    TransitionDrawable transition = (TransitionDrawable) view.getBackground();
    transition.startTransition(500);
    transition.reverseTransition(500);
}
});

Your background resource file:

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#22ffffff" />
<item android:drawable="#00ffffff" />
</transition>

Answer 3

This is a complete solution :

In jour xml file set two views at the same position and set the second view's visibility to invisible :

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/currentView"
        android:text="currentView"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="invisible"
        android:id="@+id/nextView"
        android:text="nextView"/>

    </RelativeLayout>

Then in your activity :

//First in you onCreate translate the second Layout to the right
comingView.setTranslationX(testbutton.getWidth());

// Here is the method that will do the job
// We slide both views (current one and waiting one) at the same time
// and in the same direction

private void slideExit(View currentView,final View comingView) {
    currentView.animate().
            translationXBy(-currentView.getWidth()).
            setDuration(1000).
            setInterpolator(new LinearInterpolator()).
            setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationStart(Animator animation) {
                    super.onAnimationStart(animation);
                    slideFromRightToLeft(comingView);
                    comingView.setVisibility(View.VISIBLE);
                }
            });
}

private void slideFromRightToLeft(View v) {
    v.animate().
            translationX(0).
            setDuration(1000).
            setInterpolator(new LinearInterpolator());
}

//call the method whenever you want
slideExit(currentView, comingView);