Slide right to left Android Animations

Question

Hey I am working on an Android project that requires the slide animations on Android WebView. When the user swipes from left to right it moves to the new page, and when it does that from right to left it moves to previous page. But Android has only two transitions for that namely slide_out_right and slide_in_left. After using them the left to right sliding work is flawless, but the other one looks weird(opposite).

Any Solutions for it. I want slide_out_left animations to be more precise.

Answer 1

Have a read through this blog post with an example of transition animations, I've included the code below:

Calling 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;  }  } 

Layout Resource for the 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> 

Called Activity

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

Layout Resource for the 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 do Your own Animation style as an xml file like this(put it in anim folder):

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>

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 at duration, maybe it depends on the phone model how the animation will look like, try some values out if it looks not 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);