Android Define Activity Transition Animation In Xml Example

Last article Android Transition Framework Animation Example tell you how to make transition animation for one button with 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.

1. Android Transition Framework Scene.

1.1 Create Android Transition Scene Object.

If you want to transit multiple widgets from one screen to another with animation effect, you can create two android.transition.Scene object and each object contains different state of the widget group.

Each scene contains some view components, and the view components are defined in a layout xml file. So you should first create a xml file under app / res / layout folder to define the view components and then use below code in your android app to create the android.transition.Scene object.

Scene sceneOne = Scene.getSceneForLayout(rootViewContainer, R.layout.scene_one, context);

The first parameter is the root view container ( commonly main activity’s root layout object ) which will contain the scene object. The second parameter is the scene related layout xml file. The third parameter is the application context object.

1.2 Use Android Transition Scene Object.

After create scene object, you can invoke it’s enter() method to display the scene in the activity screen.

sceneOne.enter();

If you want to display other scene, 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);

The first parameter is the target scene object, the second parameter is the transition animation effect object.

If you want to write some code just before the scene is displayed, you can use below code.

sceneTwo.setEnterAction(new Runnable() {
    @Override
    public void run() {
        ......
    }
});

If you want to write some code just before the scene exit, you can use below code.

sceneTwo.setExitAction(new Runnable() {
    @Override
    public void run() {
        
    }
});

2. Android Activity Transition With Scene Example.

android define transition animation in xml example

There are two scene defined in two layout xml files. The first scene contains only one button, the second scene contains one button and a text view. When click the first scene button, it will display the second scene with the animation effect.

READ :   Android ToggleButton Example

The transition animation effect is defined in a file app / res / transition / transitions.xml. It contains a change-bounds and a fade-in-out animation effect. The two effect will be executed in sequence by specify the android:transitionOrdering=”sequential” attribute in transitionSet xml element.

Below is the project source files list panel in android studio.

android define transition animation in xml source files list project panel

2.1 Main Activity.

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.

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.

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.

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.

If you can not find app / res / transition folder, then you should right click the res folder and select New —> Directory and name it transition to create.

READ :   Android Transition Framework Animation Example

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>
(Visited 380 times, 1 visits today)

Leave a Reply

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.