I have an ActivityA containing FragmentA and would like to make a shared element transition to ActivityB containing FragmentB.
In the activities the shared element would be the toolbar. In the fragments it would be a textview. Is there anyway to do this?
If not how could I make a shared element transition between both fragments in the activities?
Thanks in advance for any help. I have been stuck a while.
Okay so I will provide some code to clarify.
Here I have MainActivity:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<!-- This is shared with DetailActivity -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
android:transitionName="sharedToolbar"/>
</android.support.design.widget.AppBarLayout>
<!-- This contains MainFragment -->
<FrameLayout
android:id="@+id/activity_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
This activity contains this fragment called MainFragment:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This element is shared with DetailFragment -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Fragment main"
android:transitionName="sharedFragment"/>
<!-- When this is clicked show next screen -->
<Button
android:id="@+id/fragment_main_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go to detail screen"
android:layout_gravity="bottom|center"/>
</FrameLayout>
Now what I want to do is when I click the button in MainFragment I want to perform a fragment transaction to this activity called the DetailActivity:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<!-- This is shared with MainActivity -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
android:transitionName="sharedToolbar"/>
</android.support.design.widget.AppBarLayout>
<!-- This contains DetailFragment -->
<FrameLayout
android:id="@+id/activity_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
This activity contains this fragment called DetailFragment:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This element is shared with MainFragment -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Fragment detail"
android:transitionName="sharedFragment"/>
</FrameLayout>
As you can see in the code both activities share the toolbar and has the same transition name. Their containing fragments both have a textview which I would like to animate in the transition as well. These textviews also has the same transition name. Is there anyway to do this? I have tried and so far I could only animate the toolbar between the two activities. How do I make the fragments perform a shared element transition at the same time?
If this can't be done, how could I make it so when I navigate from MainActivity to DetailActivity that the textview of the fragments are what appears as the transition so not the toolbars(If I cant animate activity and fragment transactions at the same time).
Have a look at this tutorials: https://github.com/lgvalle/Material-Animations
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With