Android Transition Framework Animation Example

Android transition framework is provided since android version 4.4 kitkat. And the min sdk version is 23. With this framework you can implement animation to the android app view objects easily. This example will tell you how to use it to make change bounds animation with bounce effect in your android app.

1. Implement Android Transition Animation Code Steps.

  1. Create an instance of the transition framework animation object such as android.transition.ChangeBounds or android.transition.Fade etc. that you want.
    Transition transition = new ChangeBounds();
  2. Set above animation related data such as duration.
    transition.setDuration(2000);
  3. Set a desired bounce interpolator object for above transition object. This can make the bounce effect.
    transition.setInterpolator(new BounceInterpolator());
  4. Use TransitionManager to apply the transition animation to the root view object.
    TransitionManager.beginDelayedTransition(rootLayout, transition);
  5. Then when you change the root view object’s child view object properties ( such as change location, change color, change size etc ), the animation will be applied to the process.

2. Android Transition Animation Example.

android transition framework animation example

When you click the button in above picture, it will move to top right with bounce animation effect. When you click it again, it will move to bottom right with bounce animation effect.

There are three important files in this example, they are Main_Activity.java, activity_main.xml and build.gradle (Module: app ).

android transition animation example project file structure

2.1 Main Activity Java File.

MainActivity.java

package com.dev2qa.transitionanimation;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.ChangeBounds;
import android.transition.Transition;
import android.transition.TransitionManager;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.BounceInterpolator;
import android.widget.Button;
import android.widget.RelativeLayout;

// This class implement View.OnClickListener interface to make it process click event.
public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    // This is the root relative layout view.
    private RelativeLayout rootLayout = null;

    // This is the button.
    private Button button = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setTitle("dev2qa.com - Android Transition Animation Example.");

        // Initialize controls.
        initControls();
    }


    // Initialize controls in this example.
    private void initControls()
    {
        if(rootLayout==null)
        {
            // Get the root relative layout.
            rootLayout = (RelativeLayout)findViewById(R.id.main_relative_layout);
        }

        if(button == null)
        {
            // Get the button object.
            button = (Button)findViewById(R.id.click_me_button);

            // Set this activity as button on click listener.
            button.setOnClickListener(this);
        }
    }


    // Invoked when this activity's view object is clicked.
    @Override
    public void onClick(View view) {

        // If the clicked view is a button.
        if(view instanceof Button)
        {
            // Get view object id.
            int id = view.getId();

            // If user click "Click Me" button.
            if(id == R.id.click_me_button)
            {
                // Create a change bounds transition animation.
                Transition transition = new ChangeBounds();

                // Set the animation duration.
                transition.setDuration(2000);

                // Set a bounce interpolator to make bounce animation effect.
                transition.setInterpolator(new BounceInterpolator());

                // Set animation effect to rootLayout use the transition manager.
                TransitionManager.beginDelayedTransition(rootLayout, transition);

                // Get button current layout params.
                ViewGroup.LayoutParams currLayoutParams = view.getLayoutParams();

                // Cast the layout params object to RelativeLayout LayoutParams object.
                RelativeLayout.LayoutParams currRelativeLayoutParams = (RelativeLayout.LayoutParams) currLayoutParams;

                // Get current layout rule data.
                int currAlignParentLeft = currRelativeLayoutParams.getRule(RelativeLayout.ALIGN_PARENT_LEFT);

                int currAlignParentRight = currRelativeLayoutParams.getRule(RelativeLayout.ALIGN_PARENT_RIGHT);

                int currAlignParentTop = currRelativeLayoutParams.getRule(RelativeLayout.ALIGN_PARENT_TOP);

                int currAlignParentBottom = currRelativeLayoutParams.getRule(RelativeLayout.ALIGN_PARENT_BOTTOM);

                // Create a new RelativeLayout LayoutParams object.
                RelativeLayout.LayoutParams newLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);

                if(currAlignParentTop == RelativeLayout.TRUE && currAlignParentLeft == RelativeLayout.TRUE)
                {
                    // If button current layout params is top left, then set new value to top right.
                    newLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
                    newLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);

                }else if(currAlignParentTop == RelativeLayout.TRUE && currAlignParentRight == RelativeLayout.TRUE)
                {
                    // If button current layout params is top right, then set new value to bottom right.
                    newLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
                    newLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
                }else if(currAlignParentBottom == RelativeLayout.TRUE && currAlignParentLeft == RelativeLayout.TRUE)
                {
                    // If button current layout params is bottom left, then set new value to top left.
                    newLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
                    newLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
                }else if(currAlignParentBottom == RelativeLayout.TRUE && currAlignParentRight == RelativeLayout.TRUE)
                {
                    // If button current layout params is bottom right, then set new value to bottom left.
                    newLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
                    newLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
                }

                // Set button new width and height.
                newLayoutParams.width = 800;
                newLayoutParams.height = 600;

                // Set new layoutparams to the button.
                view.setLayoutParams(newLayoutParams);
            }
        }
    }
}

2.2 Main Activity Xml File.

app / res / layout / activity_main.xml

<RelativeLayout
    android:id="@+id/main_relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:id="@+id/click_me_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:text="Click Me" />

</RelativeLayout>

2.3 build.gradle (Module:app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.dev2qa.transitionanimation"
        minSdkVersion 23
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}
(Visited 87 times, 1 visits today)
READ :   Android Keep Broadcast Receiver Running After Application Exit

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.