Mobile Development Guide: Introduction to the Android Transition framework (1)

Mobile Development Guide: Introduction to the Android Transition framework (1)

BKJIA: Android Transition framework allows us to configure various appearance changes in the application user interface. You can implement an animated transition on the application screen, define each stage as a scenario, and control how the application transitions from one display scenario to another.

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

1. Create an application

Step 1

As the first step of the tutorial, we first create a new application in the IDE we selected. You need to use SDK 19 at least to make these Transition classes effective smoothly. Therefore, if you want to enable them to support other earlier versions, you need to perform other additional steps.

First, specify a main Activity and layout file for the application, and select start_layout.xml as the name for the layout. We will then add other layout files and use the Transition mechanism to convert different display la S. The following figure shows the specific implementation process of this process in Android Studio.

Step 2

In Transition, we prepare some printable images for use. We will prepare four circular patterns, each of which is filled with different gradient colors. In the plotting Resource Directory of this example application, create a new file named shape1.xml. Use the following code to add a graph:

 
 

  
  
<?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 code above constructs a circular pattern filled with gradient. The four images have the same size and style, but only have different colors. Of course, you may need to prepare multiple different versions of images for devices with different pixel density. 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> 
 
 

Finally, 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 apply these images as ImageButtons in two layout scenarios.