Android transition interpolators are used to add animation effect when you scale, move, rotate or fade in / out view object or a group of view objects ( a scene ). This example will show you all the interpolator effect when move a button from left to right horizontally.
1. Android Transition Interpolator Introduce.
There are following transition interpolators which android provided.
- AccelerateDecelerateInterpolator: Accelerate from beginning and decelerate at end.
- AccelerateInterpolator: Accelerate speed until end.
- DecelerateInterpolator: Fast at beginning to slow at end.
- AnticipateInterpolator: Move back a little, and then speed up to the end.
- AnticipateOvershootInterpolator: Move back a little at the beginning and move forward a bit at the end.
- BounceInterpolator: Bounce back at the end of the transition.
- CycleInterpolator: First go to specified direction use 1/4 time of total time, then go to opposite direction for 1/2 time, and then use another 1/4 time to move back to start point.
- LinearInterpolator: constant speed.
- OvershootInterpolator: Run forward until cross the end edge, then run back.
- FastOutLinearInInterpolator: Fast at the beginning and constant speed until end.
- FastOutSlowInInterpolator: Fast at the beginning and decelerate speed at the end.
2. Android Transition Interpolator Example.
2.1 AccelerateDecelerateInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/4IFGWrXxsbo.
2.2 AccelerateInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/MzEqtpEWPuY.
2.3 DecelerateInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/PpNe2KKoxVA.
2.4 AnticipateInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/0Gxt6zXrm-c.
2.5 AnticipateOvershootInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/cDWOfnANgIc
2.6 BounceInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/8zPv3f9l-rU
2.7 CycleInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/t0L8tFTY5BA
2.8 LinearInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/Q1DlAeAFwRg
2.9 OvershootInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/i5PVwDtLk-s
2.10 FastOutLinearInInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/aG3h8vmZCDY
2.11 FastOutSlowInInterpolator
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/IYlwoiwqvJA
3. Example Source Files.
3.1 Main Activity Java File.
MainActivity.java
package com.dev2qa.transitionanimationinterpolator;
import android.support.v4.view.animation.FastOutLinearInInterpolator;
import android.support.v4.view.animation.FastOutSlowInInterpolator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.ChangeBounds;
import android.transition.Transition;
import android.transition.TransitionManager;
import android.transition.TransitionValues;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.AnticipateOvershootInterpolator;
import android.view.animation.BaseInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.CycleInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private Transition transition = null;
private ViewGroup rootViewContainer = null;
private Button accelerateDecelerateButton = null;
private Button accelerateButton = null;
private Button decelerateButton = null;
private Button anticipateButton = null;
private Button anticipateOvershootButton = null;
private Button bounceButton = null;
private Button cycleButton = null;
private Button linearButton = null;
private Button overshootButton = null;
private Button fastOutLinearInButton = null;
private Button fastOutSlowInButton = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setTitle("dev2qa.com - Android Move Transition Interpolator Example.");
initControls();
accelerateDecelerateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
moveButtonWithTransitionEffect(accelerateDecelerateButton, new AccelerateDecelerateInterpolator());
}
});
accelerateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
moveButtonWithTransitionEffect(accelerateButton, new AccelerateInterpolator());
}
});
decelerateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
moveButtonWithTransitionEffect(decelerateButton, new DecelerateInterpolator());
}
});
anticipateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
moveButtonWithTransitionEffect(anticipateButton, new AnticipateInterpolator());
}
});
anticipateOvershootButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
moveButtonWithTransitionEffect(anticipateOvershootButton, new AnticipateOvershootInterpolator());
}
});
bounceButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
moveButtonWithTransitionEffect(bounceButton, new BounceInterpolator());
}
});
cycleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
float cycle = 1f;
transition.setInterpolator(new CycleInterpolator(cycle));
TransitionManager.beginDelayedTransition(rootViewContainer, transition);
moveButtonPosition(cycleButton);
}
});
linearButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
moveButtonWithTransitionEffect(linearButton, new LinearInterpolator());
}
});
overshootButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
moveButtonWithTransitionEffect(overshootButton, new OvershootInterpolator());
}
});
fastOutLinearInButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
transition.setInterpolator(new FastOutLinearInInterpolator());
TransitionManager.beginDelayedTransition(rootViewContainer, transition);
moveButtonPosition(fastOutLinearInButton);
}
});
fastOutSlowInButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
transition.setInterpolator(new FastOutSlowInInterpolator());
TransitionManager.beginDelayedTransition(rootViewContainer, transition);
moveButtonPosition(fastOutSlowInButton);
}
});
}
/* Initialise all view components. */
private void initControls()
{
if(transition == null){
// Create a new change bounds transition object.
transition = new ChangeBounds();
// Set transition duration to 1 second.
transition.setDuration(1000);
}
if(rootViewContainer == null )
{
rootViewContainer = findViewById(R.id.root_container_relative_layout);
}
if(accelerateDecelerateButton == null)
{
accelerateDecelerateButton = findViewById(R.id.accelerate_decelerate_button);
}
if(accelerateButton == null)
{
accelerateButton = findViewById(R.id.accelerate_button);
}
if(decelerateButton == null)
{
decelerateButton = findViewById(R.id.decelerate_button);
}
if(anticipateButton == null)
{
anticipateButton = findViewById(R.id.anticipate_button);
}
if(anticipateOvershootButton == null)
{
anticipateOvershootButton = findViewById(R.id.anticipate_overshoot_button);
}
if(bounceButton == null)
{
bounceButton = findViewById(R.id.bounce_button);
}
if(cycleButton == null)
{
cycleButton = findViewById(R.id.cycle_button);
}
if(linearButton == null)
{
linearButton = findViewById(R.id.linear_button);
}
if(overshootButton == null)
{
overshootButton = findViewById(R.id.overshoot_button);
}
if(fastOutLinearInButton == null)
{
fastOutLinearInButton = findViewById(R.id.fast_out_linear_in_button);
}
if(fastOutSlowInButton == null)
{
fastOutSlowInButton = findViewById(R.id.fast_out_slow_in_button);
}
}
/* Apply transition interpolator to button. */
private void moveButtonWithTransitionEffect(Button button, BaseInterpolator interpolator)
{
// Set transition interpolator.
transition.setInterpolator(interpolator);
// Begin transition.
TransitionManager.beginDelayedTransition(rootViewContainer, transition);
// Move the button from left to right or vice versa.
moveButtonPosition(button);
}
/* Move button view widget position */
private void moveButtonPosition(Button button)
{
// Create a new layout params
LinearLayout.LayoutParams newLinearLayoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// Get button current layout params.
ViewGroup.LayoutParams layoutParams = button.getLayoutParams();
// Cast current layout params to linear layout params.
LinearLayout.LayoutParams linearLayoutParams = (LinearLayout.LayoutParams)layoutParams;
// Get current button gravity.
int gravity = linearLayoutParams.gravity;
// If button locate at left currently.
if(gravity == Gravity.LEFT || gravity == -1)
{
// Set new gravity to right.
newLinearLayoutParams.gravity = Gravity.RIGHT;
}else
{
// Set new gravity to left.
newLinearLayoutParams.gravity = Gravity.LEFT;
}
// Set new linear layout params to current button.
button.setLayoutParams(newLinearLayoutParams);
}
}
3.2 Main Activity Layout Xml File.
app / res / layout / activity_main.xml
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/root_container_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/accelerate_decelerate_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Accelerate Decelerate"
android:layout_alignParentTop="true" />
<Button
android:id="@+id/accelerate_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Accelerate"
android:layout_below="@id/accelerate_decelerate_button"/>
<Button
android:id="@+id/decelerate_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Decelerate"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/anticipate_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Anticipate"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/anticipate_overshoot_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Anticipate Overshoot"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/bounce_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bounce"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/cycle_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cycle"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/linear_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Linear"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/overshoot_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Overshoot"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/fast_out_linear_in_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fast Out Linear In"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/fast_out_slow_in_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fast Out Slow In"
android:layout_alignParentTop="true"/>
</LinearLayout>
</ScrollView>
