Search code examples
androidandroid-animationandroid-transitions

Fade transitions not working as expected


I started trying out transitions with TransitionManager and Scenes. What I am trying to do is having 3 arbitrary, completely unrelated layouts and simply fade them out completely and then fade them in (not crossfade, just sequential fade out and fade in). So Scenes: A->B->C. A is prepopulated on activity layout with include tag.

What happens is:

  • Scene A fades out;
  • Scene B fades in;
  • Scene B dissappears without fading; (WRONG BEHAVIOUR)
  • Scene C fades in;

My past experiences with shared element transitions make me believe this is all about layouts and proper targeting. Since this is not about shared element but whole Scenes I would like to target all of the layout elements no matter what they are and what their IDs are. Anyway below is the full listing of all relevant code and XMLs.

Method called for starting the sequence:

@OnClick(R.id.transition_start)
protected void playSceneB(Button b) {
    final Scene scene_b = Scene.getSceneForLayout(mSceneContainer, R.layout.scene_b, this);
    final Transition transition = TransitionInflater.from(this)
            .inflateTransition(R.transition.transition);
    transition.addListener(mTransitionListener);
    TransitionManager.go(scene_b, transition);
}

Listener:

private Transition.TransitionListener mTransitionListener = new EndTransitionListener() {
    @Override
    public void onTransitionEnd(Transition transition) {
        playSceneC();
    }

    @Override
    public void onTransitionCancel(Transition transition) {
        playSceneC();
    }
};

Method for starting Scene C

private void playSceneC() {
    final Scene scene_c = Scene.getSceneForLayout(mSceneContainer, R.layout.scene_c, this);
    final Transition transition = TransitionInflater.from(this)
            .inflateTransition(R.transition.transition);
    TransitionManager.go(scene_c, transition);
}

The transition (same for both scene changes):

<?xml version="1.0" encoding="utf-8"?>
<transitionSet
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:startDelay="4000"
    android:transitionOrdering="sequential">

    <fade
        android:duration="2000"
        android:fadingMode="fade_out"/>
    <fade
        android:duration="2000"
        android:fadingMode="fade_in"/>

</transitionSet>

And the layouts (layout A and B are the same, they just have different string set on the textview):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/hello"/>
    </FrameLayout>
</FrameLayout>

Layout C:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:text="@string/hello3"/>
        </LinearLayout>
    </FrameLayout>
</FrameLayout>

Note. I expect to make it work on KitKat.

Edit: I tried making it with AutoTransition, both from XML and code and it didn't work. Also tried calling it as TransitionManager.beginDelayedTransition with manually calling Scene.enter() and it still behaves the same.

Edit2: I have added listener to both transitions to log callbacks.

  • 07-31 09:18:57.490 4744-4744/com.test.transition D/TransitionActivity: onTransitionStart
  • 07-31 09:19:01.520 4744-4744/com.test.transition D/TransitionActivity: onTransitionEnd
  • 07-31 09:19:01.520 4744-4744/com.test.transition D/TransitionActivity: onTransitionPause
  • 07-31 09:19:01.520 4744-4744/com.test.transition D/TransitionActivity: 2nd transition start
  • 07-31 09:19:03.530 4744-4744/com.test.transition D/TransitionActivity: 2nd transition end

Please note the timings. First ends after 4s duration. 2nd ends 2 seconds after start (just fade in, fade out was ommited)


Solution

  • Posting this so potential viewers may have a hint in the future.

    I got it working. When I removed all the IDs from the root view groups (ones with id=container) it started working. Apparently transition framework ignored fading out the children of this layout in this particular case.

    Having different IDs also work.