ZOFTINO.COM

Android View Hierarchy Animation Using Transition Framework

Change in state of a view hierarchy can be animated using transition framework. Meaning, on an event in an activity, all view changes from current state to target state can be animated using transition framework. It animates change in layout from current to target layout. Making view hierarchy changes visible by animating the changes improves user experience of your app UI.

Transition framework uses android property animation system to create animation effects for changes in view hierarchy or layout. Transition frame work animates property changes of views in view hierarchy over time duration from starting to end values and animation on adding or removing views to view group can also be done using Transition frame work.

Transition framework stores starting view and property value, ending state, transition to be applied and runs animation while changing state from starting view hierarchy to ending view hierarchy. There are three components in transitions. First one is Scene which represents state of a view hierarchy. Second one is Transition which stores animation data. Last one is transition manager which runs animation using scene and transition objects.

How to create Animation Using Transition Framework

First step in creating animation using transition framework is to define starting and target scenes for which animation needs to be displayed on transition between from starting scene to ending scene. You can create scene object in your code or create from scene layout xml file.

Next, you need to instantiate Transition object. Transition framework provides Transition classes which can be used to create different animation effect for view group changes. The built-in transition classes are AutoTransition, Explode, Fade and Slide. Default transition is AutoTransition which automatically applies animation effects based view and property changes.

Lastly, you need to apply transition on scene change by calling TransitionManager.go() method and passing scene and transition objects. Transition can be instantiated or defined in xml. You can define transition in xml and place it in res/transition folder. If you don’t pass transition object to go() method, default transition, AutoTransition, is applied.

Transition Example

I’ll show you transition using coupon app example. In this example, first screen shows coupon with littile information and provides an option of viewing complete coupon details. On clicking the coupon details button, new scene will be created. This transition is animated by applying fade in and out animations.

In this example, target scene is created by inflating target layout and passing the resulting view & scene root. Before creating the scene, you can set data to view objects in target view group.

        ViewGroup coupon_detail = (ViewGroup)getLayoutInflater().inflate(R.layout.coupon_details, null);
        setCouponDetails(coupon_detail);
        Scene couponDetailsScene = new Scene(cpn_root, (View)coupon_detail);

Transition is defined in xml. Since we need fade out animation for current scene and fade in animation for target scene, transition set element is used to execute two animations together. Transition object is created in code using transition resource file.

        Transition cpnTran =
                TransitionInflater.from(this).
                        inflateTransition(R.transition.coupon_trans);

Transition Example Code

Activity

 package com.zoftino.animation;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.transition.Scene;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.transition.TransitionManager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class CouponTransitionActivity extends AppCompatActivity {
    Scene couponScene ;
    ViewGroup cpn_root;

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

        cpn_root = (ViewGroup)findViewById(R.id.coupon_root);
        
        setCouponInfo();
    }
    public void viewCouponDetail(View view){
        Transition cpnTran =
                TransitionInflater.from(this).
                        inflateTransition(R.transition.coupon_trans);

        ViewGroup coupon_detail = (ViewGroup)getLayoutInflater().inflate(R.layout.coupon_details, null);
        setCouponDetails(coupon_detail);

        Scene couponDetailsScene = new Scene(cpn_root, (View)coupon_detail);
        TransitionManager.go(couponDetailsScene, cpnTran);

    }
    public void setCouponInfo(){
        ImageView imageView = (ImageView)findViewById(R.id.storeImg);
        imageView.setImageResource(R.drawable.amazon);

        TextView cpn = (TextView)findViewById(R.id.coupon);
        cpn.setText("Get Upto 50% Off on Fashion");
    }
    public void setCouponDetails(ViewGroup cpndet){

        ImageView imageView = (ImageView)cpndet.findViewById(R.id.storeImg);
        imageView.setImageResource(R.drawable.amazon);

        TextView cpn = (TextView)cpndet.findViewById(R.id.coupon);
        cpn.setText("Get Upto 50% Off on Fashion");

        TextView coupon_details = (TextView)cpndet.findViewById(R.id.coupon_details);
        coupon_details.setText("Get upto 50% off on men's, women's and kids' fashion. Find latest designs for all occasions from top brands.");

        TextView cpncode = (TextView)cpndet.findViewById(R.id.coupon_code);
        cpncode.setText("MWKF50");

        TextView cb = (TextView)cpndet.findViewById(R.id.cashback_offer);
        cb.setText("Plus Get Upto 8% Cashback on Purchases");

        TextView cpnexp = (TextView)cpndet.findViewById(R.id.coupon_expiry);
        cpnexp.setText("Offer Expires On: 2017/02/27");
    }
}

Activity layout

 

    

    
        
    


Scene one

 
    

    

        
        

    
    

Scene two

 
    

    

    
    

    
    

Transition