Android Define Activity Transition Animation In Xml Example

The last article Android Transition Framework Animation Example tells you how to make transition animation for one button with the android transition framework. But you may wonder how to transit a group of widgets ( such as a Button with a TextView) from one screen to another. This example will show you how to do it.

1. Android Transition Framework Scene.

1.1 Create Android Transition Scene Object.

  1. If you want to transit multiple widgets from one screen to another with an animation effect, you can create two android.transition.Scene objects and each object contains a different state of the widget group.
  2. Each scene contains some view components, and the view components are defined in a layout XML file.
  3. So you should first create an XML file under the app/res/layout folder to define the view components and then use the below code in your android app to create the android.transition.Scene object.
    Scene sceneOne = Scene.getSceneForLayout(rootViewContainer, R.layout.scene_one, context);
  4. The first parameter is the root view container ( commonly the main activity’s root layout object ) which will contain the scene object.
  5. The second parameter is the scene-related layout XML file.
  6. The third parameter is the application context object.

1.2 Use Android Transition Scene Object.

  1. After creating the scene object, you can invoke it’s enter() method to display the scene in the activity screen.
    sceneOne.enter();
  2. If you want to display other scenes, you can call android.transition.TransitionManager‘s go() method. When the method is called, android will destroy all the view components currently displayed in the activity screen and only display current scene view components.
    TransitionManager.go(sceneOne, transition);
  3. The first parameter is the target scene object, the second parameter is the transition animation effect object.
  4. If you want to write some code just before the scene is displayed, you can use the below code.
    sceneTwo.setEnterAction(new Runnable() {
        @Override
        public void run() {
            ......
        }
    });
  5. If you want to write some code just before the scene exit, you can use the below code.
    sceneTwo.setExitAction(new Runnable() {
        @Override
        public void run() {
            
        }
    });

2. Android Activity Transition With Scene Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/Vh2uz78sHgk

  1. There are two scenes defined in two layout XML files.
  2. The first scene contains only one button, the second scene contains one button and a text view.
  3. When clicking the first scene button, it will display the second scene with the animation effect.
  4. The transition animation effect is defined in the file app/res/transition/transitions.xml. It contains the change-bounds and fade-in-out animation effect.
  5. The two effects will be executed in sequence by specifying the android:transitionOrdering=”sequential” attribute in the transitionSet XML element.
  6. Below is the example project source files list in android studio.
    D:\WORK\DEV2QA.COM-EXAMPLE-CODE\ANDROIDEXAMPLEPROJECT\SCENETRANSITIONANIMATION
    │  .gitignore
    │  build.gradle
    │  gradle.properties
    │  gradlew
    │  gradlew.bat
    │  settings.gradle
    │
    ├─.idea
    │      gradle.xml
    │      misc.xml
    │      modules.xml
    │      runConfigurations.xml
    │
    ├─app
    │  │  .gitignore
    │  │  build.gradle
    │  │  proguard-rules.pro
    │  │
    │  └─src
    │      ├─androidTest
    │      │  └─java
    │      │      └─com
    │      │          └─dev2qa
    │      │              └─scenetransitionanimation
    │      │                      ExampleInstrumentedTest.java
    │      │
    │      ├─main
    │      │  │  AndroidManifest.xml
    │      │  │
    │      │  ├─java
    │      │  │  └─com
    │      │  │      └─dev2qa
    │      │  │          └─scenetransitionanimation
    │      │  │                  MainActivity.java
    │      │  │                  ScaleTransitionActivity.java
    │      │  │
    │      │  └─res
    │      │      ├─drawable
    │      │      │      ic_launcher_background.xml
    │      │      │
    │      │      ├─drawable-v24
    │      │      │      ic_launcher_foreground.xml
    │      │      │
    │      │      ├─layout
    │      │      │      activity_main.xml
    │      │      │      activity_scale_transition.xml
    │      │      │      scene_one.xml
    │      │      │      scene_two.xml

2.1 Main Activity.

  1. MainActivity.java
    package com.dev2qa.scenetransitionanimation;
    
    import android.content.Context;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    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.Button;
    import android.widget.LinearLayout;
    
    public class MainActivity extends AppCompatActivity{
    
        // The Context object.
        private Context context = null;
    
        // The root container layout in main activity layout xml file.
        private LinearLayout rootViewContainer = null;
    
        // This is scene one object.
        private Scene sceneOne = null;
    
        // This is scene two object.
        private Scene sceneTwo = null;
    
        // This is the transition object used to implement animation when display different scene.
        private Transition transition = null;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            setTitle("dev2qa.com - Android Scene Transition Animation Example.");
    
            initControls();
    
            // Display scene one.
            sceneOne.enter();
        }
    
    
        // Initialize all view components.
        private void initControls()
        {
            if(context == null)
            {
                context = getApplicationContext();
            }
    
            if(rootViewContainer == null)
            {
                rootViewContainer = (LinearLayout)findViewById(R.id.root_linear_layout_container);
            }
    
            if(sceneOne == null)
            {
                // Get scene one from specified layout xml file with three parameters.
                sceneOne = Scene.getSceneForLayout(rootViewContainer, R.layout.scene_one, context);
    
                // When scene one is displayed in current activity screen.
                sceneOne.setEnterAction(new Runnable() {
                    @Override
                    public void run() {
    
                        /* Only when a scene is displayed in the activity, the view components in the scene layout
                        *  xml file can be accessed by code dynamically. */
    
                        // First get root view group of scene one layout.
                        ViewGroup viewGroup = sceneOne.getSceneRoot();
    
                        // Then find the button in the view group.
                        Button goToSceneTwoButton = viewGroup.findViewById(R.id.goto_scene_two_button);
    
                        // Set button onclick listener.
                        goToSceneTwoButton.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                // When the button is clicked then show scene two in activity screen.
                                goToSceneTwo();
                            }
                        });
    
                    }
                });
    
            }
    
            if(sceneTwo == null)
            {
                sceneTwo = Scene.getSceneForLayout(rootViewContainer, R.layout.scene_two, context);
    
                sceneTwo.setEnterAction(new Runnable() {
                    @Override
                    public void run() {
                        ViewGroup viewGroup = sceneTwo.getSceneRoot();
    
                        Button goToSceneOneButton = viewGroup.findViewById(R.id.goto_scene_one_button);
    
                        goToSceneOneButton.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                goToSceneOne();
                            }
                        });
                    }
                });
    
            }
    
            if(transition == null)
            {
                // Get the transition inflater object.
                TransitionInflater transitionInflater = TransitionInflater.from(context);
    
                // Inflate transition settings from xml file.
                transition = transitionInflater.inflateTransition(R.transition.transitions);
    
            }
        }
    
    
        /* Display scene one with the specified transition animation. */
        private void goToSceneOne()
        {
            TransitionManager.go(sceneOne, transition);
        }
    
        /* Display scene two with the specified transition animation. */
        private void goToSceneTwo()
        {
            TransitionManager.go(sceneTwo, transition);
        }
    }

2.2 Main Activity Layout Xml File.

  1. app / res / layout / activity_main.xml
    <LinearLayout
        android:id="@+id/root_linear_layout_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
    
    </LinearLayout>

2.3 Scene One Layout Xml File.

  1. app / res / layout / scene_one.xml
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        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">
    
        <LinearLayout
            android:id="@+id/scene_one_linear_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center_horizontal">
    
            <Button
                android:id="@+id/goto_scene_two_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Go To Scene Two"
                android:textSize="20dp"
                android:layout_marginTop="100dp"
                android:gravity="center"
                android:onClick="goToSceneTwo"/>
    
        </LinearLayout>
    </android.support.constraint.ConstraintLayout>

2.4 Scene Two Layout Xml File.

  1. app / res / layout / scene_two.xml
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:id="@+id/scene_one_linear_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center_horizontal">
    
            <Button
                android:id="@+id/goto_scene_one_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Go To Scene One"
                android:textSize="20dp"
                android:gravity="center"
                android:layout_marginTop="80dp"
                android:onClick="goToSceneOne"/>
    
            <TextView
                android:id="@+id/text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="This is scene two."
                android:layout_gravity="center_horizontal"
                android:textSize="20dp"/>
    
    
        </LinearLayout>
    
    </android.support.constraint.ConstraintLayout>

2.5 Transition Animation Effect Definition Xml File.

  1. If you can not find the app/res/transition folder, then you should right-click the res folder and select New —> Directory, and name the directory to transition and create it.
  2. app / res / transition / transitions.xml
    <?xml version="1.0" encoding="utf-8"?>
    <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" android:transitionOrdering="sequential">
    
        <changeBounds android:duration="15000" android:interpolator="@android:anim/bounce_interpolator"/>
    
        <fade android:fadingMode="fade_in_out" android:duration="1000" >
    
            <targets>
    
                <target android:targetId="@+id/text_view" />
            </targets>
    
        </fade>
    
    </transitionSet>

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.