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’s 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.
- Create an instance of the transition framework animation object such as android.transition.ChangeBounds or android.transition.Fade that you want.
Transition transition = new ChangeBounds();
- Set above animation related data such as duration.
transition.setDuration(2000);
- Set a desired bounce interpolator object for the above transition object. This can make the bounce effect.
transition.setInterpolator(new BounceInterpolator());
- Use TransitionManager to apply the transition animation to the root view object.
TransitionManager.beginDelayedTransition(rootLayout, transition);
- Then when you change the root view object’s child view object properties ( such as change the location, change the color, change the size, etc ), the animation will be applied to the process.
2. Android Transition Animation Example.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/lArzPW9jyWk
- When you click the button in the above video, it will move to the top right with a bounce animation effect.
- When you click it again, it will move to the bottom right with a bounce animation effect.
- There are three important files in this example, they are Main_Activity.java, activity_main.xml, and build.gradle (Module: app ).
C:\WORKSPACE\WORK\DEV2QA.COM-EXAMPLE-CODE\ANDROIDEXAMPLEPROJECT\TRANSITIONANIMATION ...。。。 ├───app │ │ .gitignore │ │ build.gradle │ │ proguard-rules.pro │ │ │ └───src │ │ │ ├───main │ │ │ AndroidManifest.xml │ │ │ │ │ ├───java │ │ │ └───com │ │ │ └───dev2qa │ │ │ └───transitionanimation │ │ │ MainActivity.java │ │ │ │ │ └───res │ │ │ │ │ ├───layout │ │ │ activity_main.xml
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)
- build.gradle.
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' }
