Right to Left Slide Android Animations

Question

Hey, I'm working on an Android project that requires slide animations in an Android WebView. When the user clicks from left to right, he goes to a new page, and when he does it from right to left, he moves to the previous page. But Android has only two transitions for this: slide_out_right and slide_in_left. After using them, the left and right sliding works are flawless, and the other looks strange (opposite).

Any solutions for it. I want the slide_out_left animation to be more accurate.

Answer 1

Read the blog post with an example transition animation, I included the following code:

Challenging activity

package com.as400samplecode; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class MainActivity extends Activity implements OnClickListener{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button nextActivity = (Button) findViewById(R.id.nextActivity); nextActivity.setOnClickListener(this); } public void onClick(View v) { switch (v.getId()) { case R.id.nextActivity: Intent nextActivity = new Intent(this,NextActivity.class); startActivity(nextActivity); //push from bottom to top overridePendingTransition(R.anim.push_up_in, R.anim.push_up_out); //slide from right to left //overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left); break; // More buttons go here (if any) ... } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true; } } 

Build resource for calling activity

 <?xml version="1.0" encoding="UTF-8"?> <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" tools:context=".MainActivity" android:background="@color/ivory"> <Button android:id="@+id/nextActivity" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="15dp" android:text="Go to Next Activity" /> </RelativeLayout> 

Activity Called

 package com.as400samplecode; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class NextActivity extends Activity implements OnClickListener{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_next); Button previousActivity = (Button) findViewById(R.id.previousActivity); previousActivity.setOnClickListener(this); } public void onClick(View v) { switch (v.getId()) { case R.id.previousActivity: finish(); //push from top to bottom overridePendingTransition(R.anim.push_down_in, R.anim.push_down_out); //slide from left to right //overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right); break; // More buttons go here (if any) ... } } } 

Build Resource for Called Activity

 <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" tools:context=".NextActivity" android:background="@color/khaki"> <Button android:id="@+id/previousActivity" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="15dp" android:text="Go to Previous Activity" /> </RelativeLayout> 

Animation Resource - push_down_in.xml

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

Animation Resource - push_down_out.xml

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

Animation Resource - push_up_in.xml

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

Animation Resource - push_up_out.xml

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

Animation Resource - slide_in_left.xml

 <?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="0.0" android:toAlpha="1.0" /> </set> 

Animation Resource - slide_in_right.xml

 <?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="0.0" android:toAlpha="1.0" /> </set> 

Animation Resource - slide_out_left.xml

 <?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="0.0" /> </set> 

Animation Resource - slide_out_right.xml

 <?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="0.0" /> </set> 

Answer 2

You can make your own animation style as an XML file like this (put it in the animation folder):

from left to right:

  <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <translate android:fromXDelta="-100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="500"/> </set> 

from right to left:

  <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <translate android:fromXDelta="0%" android:toXDelta="100%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="500" /> </set> 

Here you can set your own values ​​for the duration, maybe it depends on the phone model, how the animation will look, try some values ​​if it doesn’t look very good.

and then you can call it in your activity:

  Intent animActivity = new Intent(this,YourStartAfterAnimActivity.class); startActivity(nextActivity); overridePendingTransition(R.anim.your_left_to_right, R.anim.your_right_to_left); 

Answer 3

For sliding activity (old and new) in the same direction:

left_in.xml

 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:fromXDelta="-100%" android:toXDelta="0%" android:interpolator="@android:anim/decelerate_interpolator" /> 

right_in.xml

 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:fromXDelta="100%" android:toXDelta="0%" android:interpolator="@android:anim/decelerate_interpolator" /> 

left_out.xml

 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:fromXDelta="0%" android:interpolator="@android:anim/decelerate_interpolator" android:toXDelta="-100%" /> 

right_out.xml

 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:fromXDelta="0%" android:interpolator="@android:anim/decelerate_interpolator" android:toXDelta="100%" /> 

transition startActivity:

 overridePendingTransition(R.anim.right_in, R.anim.left_out); 

onBackPressed transition:

 overridePendingTransition(R.anim.left_in, R.anim.right_out); 

Answer 4

Check out this link .. you can see so many kinds of animations here, just copy the xml to the res / anim folder and use it as shown below.

 listView.setAnimation(AnimationUtils.loadAnimation(MainActivity.this,R.anim.slide_in_right)); 

Animated Lists

Answer 5

The easiest way I've found is to use Activity Transitions , it's really easy

Override the onCreate method in the activity you want to run with animation:

 @Override protected void onCreate(Bundle savedInstanceState) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Slide slide = new Slide(); slide.setSlideEdge(Gravity.RIGHT); getWindow().setEnterTransition(slide); } super.onCreate(savedInstanceState); } 

Then start it using the transitions (instead of activity.startActivity (context)):

 activity.startActivity(starter, ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()); 

To close an activity using animation using this.finish (), use the code below:

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getActivity().finishAfterTransition(); } else getActivity().finish(); 

For more information, see the links below:

• Animation material with examples (recommended)
• Defining custom animations

Answer 6

You can create your own animations. For example, create an xml file in res / anim like this

 <?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:fromXDelta="100%p" android:toXDelta="0" android:startOffset="0" android:duration="500" /> </set> 

Then redefine the animation in the selected activity:

  overridePendingTransition(R.anim.animationIN, R.anim.animationOUT); 

Answer 7

Animation of a new page from the left side to the left.

 <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <translate android:fromXDelta="0%" android:toXDelta="800%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="600" />