CODEWITHSUNDEEP
androidandroid-layoutandroid-activitytransition
Kenneth
Kenneth

Reputation: 4065

Android shared view transition combined with fade transition

I have an activity that is passed a shared element animation. It's a basic ImageView transition, working just fine.

Now, for the other elements in the Activity I'd like to have a fade animation. Now, this works for all the elements but the views in the same viewgroup as the ImageView (shared view).

My layout below. The ImageView is within an CollapsingToolbarLayout and AppBarLayout, and I set up the fade transition like this in oncreate: 

    getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
    super.onCreate(savedInstanceState);

    Fade fade = new Fade(Fade.IN);
    fade.setDuration(4000);

    getWindow().setEnterTransition(fade);
    setContentView(R.layout.article_details);

Layout:

<?xml version="1.0" encoding="utf-8"?>


<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/article_details_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="10dp"
        app:expandedTitleMarginStart="10dp"
        app:expandedTitleTextAppearance="@style/title_text_appearence"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/article_details_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:transitionName="imageTrans"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.6"
             />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme.ToolBar"
            android:background="#0000"
            app:layout_collapseMode="pin"
             />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:transitionGroup="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <WebView
        android:id="@+id/article_details_webview"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    app:fabSize="mini"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/star_white"
    android:layout_marginRight="16dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

So, to summarize. The nested scroll layout and its webview is faded in as set up, but the other views within the AppBarLayout is not. The ImageView within the AppBarLayout behaves as the shared element should (moving into place from the passing Activity). Also, only half the FloatingActionButton is faded in, the rest pops in place after the 4 second fade have passed.

Edit: I'm actually experiencing the same issue as this guy: Content Transitions on Top of Shared Elements in android

Upvotes: 3

Views: 3378

Answers (1)

Kenneth
Kenneth

Reputation: 4065

I found a solution to this "problem". The problem is that this is intended behaviour. You can disable the overlap by calling

getWindow().setSharedElementsUseOverlay(false);`

But that more often than not creates artifacts. I ended up doing it either way, and removed the background on my Activity, with a transparent theme: 

<style name="Theme.Transparent" parent="@style/AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

Since my goal was to fade in the text in the CollapsingToolbarLayout, I could not achieve this since the ImageView is a child of the layout. What I ended up doing was adding another ImageView with the same image as the one being animated between activities, and fading it in along with the CollapsingToolbarLayout after the Activity shared element transition was done. Since the shared element image already was in place the new ImageView didn't make any difference in the UI. The solution is of course not optimal, but the only one for my problem - considering how the APIs behave. When exiting the Activity I simply hide the replacement ImageView, and the user sees the shared element image translating into place in the parent Activity.

Upvotes: 5

Related Questions