Android Move Transition Interpolator Example

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.

  1. AccelerateDecelerateInterpolator : Accelerate from beginning and decelerate at end.
  2. AccelerateInterpolator : Accelerate speed until end.
  3. DecelerateInterpolator : Fast at beginning to slow at end.
  4. AnticipateInterpolator : Move back a little, and then speed up to the end.
  5. AnticipateOvershootInterpolator : Move back a little at the beginning and move forward a bit at the end.
  6. BounceInterpolator : Bounce back at the end of the transition.
  7. 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.
  8. LinearInterpolator : constant speed.
  9. OvershootInterpolator : Run forward until cross the end edge, then run back.
  10. FastOutLinearInInterpolator : Fast at the beginning and constant speed until end.
  11. FastOutSlowInInterpolator : Fast at the beginning and decelerate speed at the end.

2. Android Transition Interpolator Example.

2.1 AccelerateDecelerateInterpolator

android move transition accelerate decelerate interpolator example

2.2 AccelerateInterpolator

android move transition accelerate interpolator example

2.3 DecelerateInterpolator

android move transition decelerate interpolator example

2.4 AnticipateInterpolator

android move transition anticipate interpolator example

2.5 AnticipateOvershootInterpolator

android move transition anticipate overshoot interpolator example

2.6 BounceInterpolator

android move transition bounce interpolator example

2.7 CycleInterpolator

android move transition cycle interpolator example

2.8 LinearInterpolator

android move transition linear interpolator example

2.9 OvershootInterpolator

android move transition overshoot interpolator example

2.10 FastOutLinearInInterpolator

android move transition fast out linear in interpolator example

2.11 FastOutSlowInInterpolator

android move transition fast out slow in interpolator example

3. Example Source Files.

android move transition project 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>
(Visited 202 times, 1 visits today)
READ :   Android Display Data In Table Layout Statically And Programmatically Example

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.