Mobile Development Guide: Introduction to Android Transition Framework

【51CTO translation】The Android Transition framework allows us to configure various appearance changes in the application user interface. You can implement animated transitions within the application screen, define each stage as a scene, and control how the application transitions from one display scene to another.

In today's article, we will build a simple application and create a set of animated transition effects for it. To complete this task, you need to prepare layout and drawable files in XML, and then use Java to configure and apply this transition mechanism. We will define two scenes, in which the same set of view items will be arranged in different ways on the device screen. When you use the Transition framework, Android will automatically complete the animated transition effects during the transition between the two scenes.

1. Create an application

***step

As the first step of the tutorial, we will first create a new application in the IDE of our choice. You will need to use at least SDK 19 for these Transition classes to work properly, so if you plan to support earlier versions, we will need to perform some additional steps.

First, specify a main Activity and layout file for the application, and choose start_layout.xml as the name for the layout. We will then add other layout files and use the Transition mechanism to switch between different display layouts. The following screenshots show the specific implementation process of this process in Android Studio.

Step 2

Next we prepare some drawables to use in the Transition. We will prepare four circular patterns, each filled with a different gradient color. In the drawable resource directory of this sample application, first create a new file called shape1.xml. Add the shape with the following code:

 <? xml   version = "1.0"   encoding = "utf-8" ?>   
 < shape   xmlns:android = "http://schemas.android.com/apk/res/android"   
 android:dither = "true"   
 android:shape = "oval"   >    
   
 < gradient   
 android:endColor = "#66ff0000"   
 android:gradientRadius = "150"   
 android:startColor = "#ffffcc00"   
 android:type = "radial"   
 android:useLevel = "false"   />    
   
 < size   
 android:height = "100dp"   
 android:width = "100dp"   />    
   
 </ shape >   

The above code constructs a circular pattern filled with gradient colors. The four graphics are exactly the same in size and style, and only differ in color. Of course, you may need to prepare different versions of graphics for devices with different pixel densities. Use the following code to create shape2.xml:

 <? xml   version = "1.0"   encoding = "utf-8" ?>  
 < shape   xmlns:android = "http://schemas.android.com/apk/res/android"  
 android:dither = "true"  
 android:shape = "oval"   >   
  
 < gradient  
 android:endColor = "#66ffcc00"  
 android:gradientRadius = "150"  
 android:startColor = "#ff00ff00"  
 android:type = "radial"  
 android:useLevel = "false"   />   
  
 < size  
 android:height = "100dp"  
 android:width = "100dp"   />   
  
 </ shape >  

Now add shape3.xml:

 <? xml   version = "1.0"   encoding = "utf-8" ?>  
 < shape   xmlns:android = "http://schemas.android.com/apk/res/android"  
 android:dither = "true"  
 android:shape = "oval"   >   
  
 < gradient  
 android:endColor = "#6600ff00"  
 android:gradientRadius = "150"  
 android:startColor = "#ff0000ff"  
 android:type = "radial"  
 android:useLevel = "false"   />   
  
 < size  
 android:height = "100dp"  
 android:width = "100dp"   />   
  
 </ shape >  

***Add shape4.xml:

 <? xml   version = "1.0"   encoding = "utf-8" ?>  
 < shape   xmlns:android = "http://schemas.android.com/apk/res/android"  
 android:dither = "true"  
 android:shape = "oval"   >   
  
 < gradient  
 android:endColor = "#660000ff"  
 android:gradientRadius = "150"  
 android:startColor = "#ffff0000"  
 android:type = "radial"  
 android:useLevel = "false"   />   
  
 < size  
 android:height = "100dp"  
 android:width = "100dp"   />   
  
 </ shape >  

We will use these graphics as ImageButtons in two layout scenes.

#p#

2. Create a layout scene

***step

Next, we need to define two types of scenarios that will transition between several XML layouts. First, we deal with the main layout file that you have already added when you created the application, that is, start_layout.xml. Open it and switch to the XML editing tab. Use the following code to use RelativeLayout:

 < RelativeLayout   xmlns:android = "http://schemas.android.com/apk/res/android"  
 xmlns:tools = "http://schemas.android.com/tools"  
 android:layout_width = "match_parent"  
 android:layout_height = "match_parent"  
 android:background = "#ff000000"  
 android:id = "@+id/base"  
 tools:context = ".TransitionsActivity" >   
  
 </RelativeLayout>​​  

We have added a background color and an ID to the layout. The purpose of this ID is to ensure that Android handles the transition between the different scenes. You will use the same ID again in the second scene. When you transition between the two scenes, Android will animate the views with the same ID in each scene. If they do not have the same ID, then Android will treat them as completely different items and simply handle the transition by fading in or out.

In RelativeLayout, create an ImageButton for each of the shapes we created earlier:

 < ImageButton  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:id = "@+id/btn1"  
 android:src = "@drawable/shape1"  
 android:background = "#00000000"  
 android:contentDescription = "shape"  
 android:layout_alignParentLeft = "true"  
 android:layout_alignParentTop = "true"  
 android:onClick = "changeScene" />   
  
 < ImageButton  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:id = "@+id/btn2"  
 android:src = "@drawable/shape2"  
 android:background = "#00000000"  
 android:contentDescription = "shape"  
 android:layout_alignParentRight = "true"  
 android:layout_alignParentTop = "true"  
 android:onClick = "changeScene" />   
  
 < ImageButton  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:id = "@+id/btn3"  
 android:src = "@drawable/shape3"  
 android:background = "#00000000"  
 android:contentDescription = "shape"  
 android:layout_alignParentLeft = "true"  
 android:layout_alignParentBottom = "true"  
 android:onClick = "changeScene" />   
  
 < ImageButton  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:id = "@+id/btn4"  
 android:src = "@drawable/shape4"  
 android:background = "#00000000"  
 android:contentDescription = "shape"  
 android:layout_alignParentRight = "true"  
 android:layout_alignParentBottom = "true"  
 android:onClick = "changeScene" />  

Note that each graphic button has its own ID - as does the second layout we created - plus an onClick attribute. We will then add this method to the main Activity and start the transition when the user clicks on any of the graphics.

Now we will see a preview of the entire layout in the IDE, but in some cases you will need to actually run the app on a device or simulator to see the gradient and/or transparency effects. These graphics are arranged in the four corners of the screen, as shown in the figure below.

Step 2

The first layout we created will be displayed as the starting state of the transition process. Now let's create a second layout file for the scene and use it as the ending state of the transition process. Add a new file to our application layout resource directory and name it end_layout.xml. Switch to the text editing tab and enter the following code:

 < RelativeLayout   xmlns:android = "http://schemas.android.com/apk/res/android"  
 xmlns:tools = "http://schemas.android.com/tools"  
 android:layout_width = "match_parent"  
 android:layout_height = "match_parent"  
 android:background = "#ff000000"  
 android:id = "@+id/base"  
 tools:context = ".TransitionsActivity" >   
  
 < ImageButton  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:id = "@+id/btn1"  
 android:src = "@drawable/shape1"  
 android:background = "#00000000"  
 android:contentDescription = "shape"  
 android:layout_alignParentRight = "true"  
 android:layout_alignParentBottom = "true"  
 android:onClick = "changeScene" />   
  
 < ImageButton  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:id = "@+id/btn2"  
 android:src = "@drawable/shape2"  
 android:background = "#00000000"  
 android:contentDescription = "shape"  
 android:layout_alignParentLeft = "true"  
 android:layout_alignParentBottom = "true"  
 android:onClick = "changeScene" />   
  
 < ImageButton  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:id = "@+id/btn3"  
 android:src = "@drawable/shape3"  
 android:background = "#00000000"  
 android:contentDescription = "shape"  
 android:layout_alignParentRight = "true"  
 android:layout_alignParentTop = "true"  
 android:onClick = "changeScene" />   
  
 < ImageButton  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:id = "@+id/btn4"  
 android:src = "@drawable/shape4"  
 android:background = "#00000000"  
 android:contentDescription = "shape"  
 android:layout_alignParentLeft = "true"  
 android:layout_alignParentTop = "true"  
 android:onClick = "changeScene" />   
  
 </RelativeLayout>​​  

Now let's take a moment to review the above layout code. It is exactly the same as the first layout except for the position of the various graphic buttons. Each graphic has been moved from its starting position to its diagonal position. The transition process will therefore swap the positions of the graphics, that is, guide them to the diagonal position on the screen.

#p#

3. Transition between different scenes

***step

Now that we have defined two layouts, we need to use the transition mechanism to complete the movement process between them. Open the main Activity class in the application. You will need to use the following import statements:

 import android.transition.AutoTransition;
 import android.transition.Scene;
 import android.transition.Transition;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.animation.AccelerateDecelerateInterpolator;
 import android.widget.RelativeLayout;
 import android.transition.TransitionManager;

In the Activity class declaration, before the onCreate method, we need to add the following instance variables to apply the transition mechanism:

 //scenes to transition  
 private Scene scene1, scene2;
 //transition to move between scenes  
 private Transition transition;
 //flag to swap between scenes  
 private   boolean start;

Step 2

Now let's prepare for the transition, which will begin when the user clicks on any shape. In onCreate, we'll add the following after the existing code that the IDE has already entered:

 //get the layout ID  
 RelativeLayout baseLayout = (RelativeLayout)findViewById(R.id.base); 
  
 //first scene  
 ViewGroup startViews = (ViewGroup)getLayoutInflater()
    .inflate(R.layout.start_layout, baseLayout, false ); 
  
 //second scene  
 ViewGroup endViews = (ViewGroup)getLayoutInflater()
    .inflate(R.layout.end_layout, baseLayout, false );

We first need to define the base scene, which is the ID we set for the layout contained in the two scene layout files. Next, we also need to define the two scenes that serve as the start and end states of the transition process, specifying the layout file name and the base scene contained in it. In this way, Android will be able to transition between the two scenes as needed and treat any view elements with the same ID in different scenes as the same object, so that the scene switching can show an animated change effect.

Next, we define two scenes as the start and end states of the transition process, still in onCreate:

 //create the two scenes  
 scene1 = new Scene(baseLayout, startViews);
 scene2 = new Scene(baseLayout, endViews);

We need to pass the base layout and the relevant scene layout to each constructor. Now we can reference these scenes when defining the transition process.

Step 3

Next we prepare to perform the transition, still in onCreate:

 //create transition, set properties  
 transition = new AutoTransition();
 transition.setDuration( 5000 );
 transition.setInterpolator( new AccelerateDecelerateInterpolator()); 
  
 //initialize flag  
 start = true ;

Android provides a range of transition types to choose from, and you can use different animation effects according to the scene change method you need. In today's example, we chose AutoTransition, so Android will calculate how to achieve the transition based on the properties of the two changing scenes. Interested friends can also click here to view more options related to Transition references.

We set the duration and interpolation for the transition. You can also set a start delay for the entire change mechanism if you want. Finally, we set the boolean flag to true by initialization. For simplicity, we will use the method of clicking on any graphic to activate the scene transition, but this is just to demonstrate the actual functionality of the example.

Step 4

You must remember that we have added the onClick attribute to the graphic button when creating the layout XML file. Now we need to add this method to the Activity:

 public   void changeScene(View v){ 
  
 //check flag  
 if (start) {
        TransitionManager.go(scene2, transition);
 start = false ;
 }
 else {
        TransitionManager.go(scene1, transition);
 start = true ;
 }
 }

We use an Activity to transition from the current scene to another scene, where a Boolean flag keeps track of the type of scene we are currently using. We also specify the Transition object that we created earlier to ensure that the execution of the switch matches the expected effect.

You should now be able to run your application and see the transition happen when you click on any of the shapes. Each time you click, the transition will slowly move the shapes diagonally across the screen, and clicking again will return them to their original positions.

Summary

In today's article, we have actually only begun to understand what kind of design solutions and transition effects we can achieve with the Android Transition framework. To introduce more transition mechanisms in your own application, you can click here to view other methods in the TransitionManager class, including beginDelayedTransition and transitionTo. In addition, you may also want to try to use TransitionSet to combine multiple transition mechanisms, such as using gradients and movement effects from different transition mechanisms at the same time. Depending on the complexity of the transition mechanism, you may also need to use the TransitionValues ​​class, which can provide the ability to reference data values ​​related to the corresponding transition. If you want to learn more about technical means related to scene processing, you can also click here to view the relevant description of the Scene class.

Original link: An Introduction to Android Transitions

Nuka-Cola Translation