Difference between revisions of "An Android Transition Tutorial using beginDelayedTransition"

Revision as of 17:37, 9 May 2014

<google>BUY_ANDROID</google>

The previous chapter, entitled Animating User Interfaces with the Android Transitions Framework, provided an introduction to the animation of user interfaces using the Android Transitions framework. This chapter uses a tutorial based approach to demonstrate Android transitions in action using the beginDelayedTransition() method of the TransitionManager class.

The next chapter will create a more complex example that uses layout files and transition resource files to animate the transition from one scene to another within an application.

Creating the TransitionDemo Project

Launch Eclipse and create an Android Application Project named TransitionDemo with the appropriate package name and latest SDK selections. As with previous examples, request the creation of a blank activity and the use of the default launcher icons. On the New Blank Activity screen of the New Android Application wizard, set the Activity Name to TransitionDemoActivity and the Layout Name to activity_transition_demo.

Preparing the Project Files

The first example transition animation will be implemented through the use of the beginDelayedTransition() method of the TransitionManager class. The first step, however, is to assign an ID to the parent layout view element in the user interface layout created for us by Eclipse. Locate and double click on the res -> layouts -> activity_transition_demo.xml file in the Package Explorer panel to load it into the graphical layout tool. Once loaded, right click on the background of the view canvas that represents the parent RelativeLayout container and select the Assign ID… menu option. In the resulting dialog, name the layout view myLayout and click on OK to commit the change.

Right click on the TextView object that currently displays the Hello world! text and use the Change Widget Type… menu option to convert the TextView into a Button. Repeat the above steps on this button, this time assigning the ID myButton1 to the view.

Implementing beginDelayedTransition Animation

The objective for the initial phase of this tutorial is to implement a touch handler so that when the user taps on the layout view the button view moves to the lower right hand corner of the screen and increases in size.

Locate the TransitionDemoActivity.java file and modify the onCreate() method to implement the onTouch handler:

package com.example.transitiondemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

public class TransitionDemoActivity extends Activity {

	ViewGroup myLayout;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_transition_demo);
		
                myLayout = (ViewGroup) findViewById(R.id.myLayout);

		myLayout.setOnTouchListener(
	       		new RelativeLayout.OnTouchListener() {
	       			public boolean onTouch(View v, 
					MotionEvent m) {
				handleTouch();
	     			}
	       		}
	       );

	}

The above code simply sets up a touch listener on the Relative Layout container and configures it to call a method named handleTouch() when a touch is detected. The next task, therefore, is to implement the handleTouch() method as follows:

public void handleTouch() {
	View view = findViewById(R.id.myButton1);
   		
	RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, 
		RelativeLayout.LayoutParams.WRAP_CONTENT);

	params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, 
		RelativeLayout.TRUE);
	params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, 
		RelativeLayout.TRUE);
	view.setLayoutParams(params);
			
	ViewGroup.LayoutParams lparams = view.getLayoutParams();
	        
	lparams.width = 500;
	lparams.height = 350;
	view.setLayoutParams(lparams);
}

This method obtains a reference to the button view in the user interface layout and creates a new set of layout parameter rules designed to move the button to the bottom right hand corner of the parent layout and to increase the button’s dimensions. Once created, these new parameters are applied to the button. <google>BUY_ANDROID</google> Test the code so far by compiling and running the application. Once launched, touch the background and note that the button moves and resizes as illustrated in Figure 26-1:

Figure 26-1

Although the layout changes took effect, they did so instantly and without any form of animation. This is where the call to the beginDelayedTransition() method of the TransitionManager class comes in. All that is needed to add animation to this layout change is the addition of a single line of code before the layout changes are implemented. Remaining within the TransitionDemoActivity.java file, modify the code as follows:

package com.example.transitiondemo;

import android.os.Bundle;
import android.app.Activity;
import android.transition.TransitionManager;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
.
.
.
	public void handleTouch() {
		View view = findViewById(R.id.myButton1);
		
		TransitionManager.beginDelayedTransition(myLayout);
		
		RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, 
			RelativeLayout.LayoutParams.WRAP_CONTENT);

		params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, 
			RelativeLayout.TRUE);

		params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, 
			RelativeLayout.TRUE);

		params.width = 500;
		params.height = 350;
		view.setLayoutParams(params);
	}

Compile and run the application once again and note that the transition is now animated.

Customizing the Transition

The final task in this example is to modify the changeBounds transition so that it is performed over a longer duration and incorporates a bounce effect when the view reaches its new screen location. This involves the creation of a Transition instance with appropriate duration interpolator settings which is, in turn, passed through as an argument to the beginDelayedTransition() method:

package com.example.transitiondemo;

import android.os.Bundle;
import android.app.Activity;
import android.transition.ChangeBounds;
import android.transition.Transition;
import android.transition.TransitionManager;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.BounceInterpolator;
import android.widget.RelativeLayout;

public class TransitionDemoActivity extends Activity {
.
.
.
	public void handleTouch() {
		View view = findViewById(R.id.myButton1);
		
		Transition changeBounds = new ChangeBounds();
		changeBounds.setDuration(3000);
		changeBounds.setInterpolator(new BounceInterpolator());
		
		TransitionManager.beginDelayedTransition(myLayout, 
					changeBounds);

		TransitionManager.beginDelayedTransition(myLayout);
		
		RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, 
			RelativeLayout.LayoutParams.WRAP_CONTENT);

		params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, 
			RelativeLayout.TRUE);

		params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, 
			RelativeLayout.TRUE);

		params.width = 500;
		params.height = 350;
		view.setLayoutParams(params);
	}

When the application is now executed, the animation will slow to match the new duration setting and the button will bounce on arrival at the bottom right hand corner of the display.

Summary

The most basic form of transition animation involves the use of the beginDelayedTransition() method of the TransitionManager class. Once called, any changes in size and position of the views in the next user interface rendering frame, and within a defined view group, will be animated using the specified transitions. This chapter has worked through a simple example that demonstrates the use of this approach to implementing transitions.

<google>BUY_ANDROID</google>