Here we are going to create custom transitions for a fragment.
We will create transitions using Java classes by extending the Transition Class in Android.
ChangeColor.java is the java class that extends transition.
ChangeColor.java
package com.example.android.customtransition;
import android.animation.;
import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.animation.ValueAnimator;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.TransitionDrawable;
import android.transition.ChangeBounds;
import android.transition.Transition;
import android.transition.TransitionValues;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewPropertyAnimator;
public class ChangeColor extends Transition {
/** Key to store a color value in TransitionValues object */
private static final String PROPNAME_BACKGROUND = "customtransition:change_color:background";
// BEGIN_INCLUDE (capture_values)
/**
* Convenience method: Add the background Drawable property value
* to the TransitionsValues.value Map for a target.
*/
private void captureValues(TransitionValues values) {
// Capture the property values of views for later use
values.values.put(PROPNAME_BACKGROUND, values.view.getBackground());
}
@Override
public void captureStartValues(TransitionValues transitionValues) {
captureValues(transitionValues);
}
// Capture the value of the background drawable property for a target in the ending Scene.
@Override
public void captureEndValues(TransitionValues transitionValues) {
captureValues(transitionValues);
}
// END_INCLUDE (capture_values)
// BEGIN_INCLUDE (create_animator)
// Create an animation for each target that is in both the starting and ending Scene. For each
// pair of targets, if their background property value is a color (rather than a graphic),
// create a ValueAnimator based on an ArgbEvaluator that interpolates between the starting and
// ending color. Also create an update listener that sets the View background color for each
// animation frame
@Override
public Animator createAnimator(ViewGroup sceneRoot,
TransitionValues startValues, TransitionValues endValues) {
// This transition can only be applied to views that are on both starting and ending scenes.
if (null == startValues || null == endValues) {
return null;
}
// Store a convenient reference to the target. Both the starting and ending layout have the
// same target.
final View view = endValues.view;
// Store the object containing the background property for both the starting and ending
// layouts.
Drawable startBackground = (Drawable) startValues.values.get(PROPNAME_BACKGROUND);
Drawable endBackground = (Drawable) endValues.values.get(PROPNAME_BACKGROUND);
// This transition changes background colors for a target. It doesn't animate any other
// background changes. If the property isn't a ColorDrawable, ignore the target.
if (startBackground instanceof ColorDrawable && endBackground instanceof ColorDrawable) {
ColorDrawable startColor = (ColorDrawable) startBackground;
ColorDrawable endColor = (ColorDrawable) endBackground;
// If the background color for the target in the starting and ending layouts is
// different, create an animation.
if (startColor.getColor() != endColor.getColor()) {
// Create a new Animator object to apply to the targets as the transitions framework
// changes from the starting to the ending layout. Use the class ValueAnimator,
// which provides a timing pulse to change property values provided to it. The
// animation runs on the UI thread. The Evaluator controls what type of
// interpolation is done. In this case, an ArgbEvaluator interpolates between two
// #argb values, which are specified as the 2nd and 3rd input arguments.
ValueAnimator animator = ValueAnimator.ofObject(new ArgbEvaluator(),
startColor.getColor(), endColor.getColor());
// Add an update listener to the Animator object.
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Object value = animation.getAnimatedValue();
// Each time the ValueAnimator produces a new frame in the animation, change
// the background color of the target. Ensure that the value isn't null.
if (null != value) {
view.setBackgroundColor((Integer) value);
}
}
});
// Return the Animator object to the transitions framework. As the framework changes
// between the starting and ending layouts, it applies the animation you've created.
return animator;
}
}
// For non-ColorDrawable backgrounds, we just return null, and no animation will take place.
return null;
}
// END_INCLUDE (create_animator)
}
CustomTransitionFragment is the Fragment to which we are going to apply the transition.
package com.example.android.customtransition;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.transition.Scene;
import android.transition.Transition;
import android.transition.TransitionManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
public class CustomTransitionFragment extends Fragment implements View.OnClickListener {
private static final String STATE_CURRENT_SCENE = "current_scene";
/** Tag for the logger */
private static final String TAG = "CustomTransitionFragment";
/** These are the Scenes we use. */
private Scene[] mScenes;
/** The current index for mScenes. */
private int mCurrentScene;
/** This is the custom Transition we use in this sample. */
private Transition mTransition;
public CustomTransitionFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_custom_transition, container, false);
}
@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
Context context = getActivity();
FrameLayout container = (FrameLayout) view.findViewById(R.id.container);
view.findViewById(R.id.show_next_scene).setOnClickListener(this);
if (null != savedInstanceState) {
mCurrentScene = savedInstanceState.getInt(STATE_CURRENT_SCENE);
}
// We set up the Scenes here.
mScenes = new Scene[] {
Scene.getSceneForLayout(container, R.layout.scene1, context),
Scene.getSceneForLayout(container, R.layout.scene2, context),
Scene.getSceneForLayout(container, R.layout.scene3, context),
};
// This is the custom Transition.
mTransition = new ChangeColor();
// Show the initial Scene.
TransitionManager.go(mScenes[mCurrentScene % mScenes.length]);
}
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt(STATE_CURRENT_SCENE, mCurrentScene);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.show_next_scene: {
mCurrentScene = (mCurrentScene + 1) % mScenes.length;
//Log.i(TAG, "Transitioning to scene #" + mCurrentScene);
// Pass the custom Transition as second argument for TransitionManager.go
TransitionManager.go(mScenes[mCurrentScene], mTransition);
break;
}
}
}
}
The MainActivity that adds the fragment.
package com.example.android.customtransition;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
public class MainActivity extends FragmentActivity {
public static final String TAG = "MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (savedInstanceState == null) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
CustomTransitionFragment fragment = new CustomTransitionFragment();
transaction.replace(R.id.sample_content_fragment, fragment);
transaction.commit();
}
}
}
Download the complete Android Studio<a href=”https://googledrive.com/host/0B5PzI5GeMH-AeHBNY1NCLXdYRjA” target=”_blank”> Source Code</a> from here.