Android general mode transition combined with transition mode transition
I have an activity that is passed by animating a shared element. This is a basic ImageView transition that works great.
Now, for other elements in the Activity, I would like to have a fade animation. This now works for all items except views in the same view group as the ImageView (general view).
My layout is below. The ImageView is within CollapsingToolbarLayout and AppBarLayout, and I have set the fade transition to 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);
Markup:
<?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, let's summarize. The nested scroll layout and its webview disappear in the settings, but the other views in the AppBarLayout do not. The ImageView in the AppBarLayout behaves like a generic item (moving into place from the passing Activity). Also, only half of the FloatingActionButton fades out, the rest appears in place after 4 seconds have passed.
Edit: Actually I am experiencing the same issue as this guy: Content transitions at the top of generic elements in android
source to share
I found a solution to this "problem". The problem is that this is intended behavior. You can turn off the overlap by calling
getWindow().setSharedElementsUseOverlay(false);`
But this most often creates artifacts. I ended up doing this anyway, and removed the background in 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 disappear into text in the CollapsingToolbarLayout, I was unable to achieve this as the ImageView is a child of the layout. What I ended up with was to add another ImageView with the same image as the one that animates between activities and fade out along with the CollapsingToolbarLayout after the activity's shared item has transitioned. Since the shared image was already in place, the new ImageView has nothing to do with the user interface. The solution is of course not optimal, but the only thing concerning my problem is considering how the APIs behave. When you exit the Activity, I simply hide the replacing ImageView and the user sees that the image of the shared item has been moved into place in the parent activity.
source to share