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.
This question is related to
android
The answer is
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);
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="500" />
You can make your own animations. For example create 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 override animations in selected activity:
overridePendingTransition(R.anim.animationIN, R.anim.animationOUT);
Right to left new page animation
<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" />
The easiest way I found is using Activity Transitions, it is really easy
Override onCreate method in 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 transitions (instead activity.startActivity(context)):
activity.startActivity(starter, ActivityOptions.makeSceneTransitionAnimation(activity).toBundle());
For closing activity with animation instead using this.finish() use below code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getActivity().finishAfterTransition();
} else getActivity().finish();
For more information check below links:
See this link.. you can see so many kinds of animations here, just copy the xml to your res/anim folder and use it like the following..
listView.setAnimation(AnimationUtils.loadAnimation(MainActivity.this,R.anim.slide_in_right));
For sliding both activity (old and new) 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%" />
startActivity transition:
overridePendingTransition(R.anim.right_in, R.anim.left_out);
onBackPressed transition:
overridePendingTransition(R.anim.left_in, R.anim.right_out);
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>
Source: Stackoverflow.com