19

I have made a github project with just the issue. You can see it / clone it / build it from here: https://git.io/vMPqb

I am trying to get shared elements working for a Fragment transition.

There are two FABs in the project - Feather and Plane. Feather and Plane are shared elements. When Feather is clicked, the SheetDialog is opened, and Feather should animate over to Plane dialog. It does not do that at the moment, and I am trying to determine why.

It may be worthwhile noting that I am running this on API 24 so issues with transitions not being supported below version 21 is not the problem.

Can anyone tell me why shared element transitions are not working?

To echo what is there in the repo, there are four important files:

Main Activity

package test.example.fabpop;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.transition.ChangeBounds;
import android.support.transition.Fade;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab_feather;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fab_feather = (FloatingActionButton) findViewById(R.id.initial_fab_feather);
    }

    public void fabClick(View view) {
        SheetDialog dialogFragment = new SheetDialog();

        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        // This seemingly has no effect. I am trying to get it to work.
        transaction.addSharedElement(fab_feather, "transition_name_plane");

        dialogFragment.setSharedElementEnterTransition(new ChangeBounds());
        dialogFragment.setSharedElementReturnTransition(new Fade(Fade.OUT));

        dialogFragment.show(transaction, "frag_tag");
    }
}

activity_main.xml Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="test.example.fabpop.MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:orientation="vertical">
        <TextView
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Transition to a BottomSheetDialogFragment that shares this FAB"
            android:textAlignment="center"/>

        <!--  Feather FAB  -->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/initial_fab_feather"
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:layout_margin="16dp"
            android:layout_gravity="center"
            android:onClick="fabClick"
            android:transitionName="transition_name_feather"
            android:src="@drawable/ic_feather"
            />
    </LinearLayout>


</RelativeLayout>

SheetDialog

package test.example.fabpop;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SheetDialog extends BottomSheetDialogFragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.dialog_sheet, container, false);
    }
}

dialog_sheet.xml Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--  Plane FAB  -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/final_fab_plane"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_margin="16dp"
        android:transitionName="transition_name_plane"
        android:src="@drawable/ic_plane"
        />

</LinearLayout>

Is it not possible to have a shared element on a transition between one Activity and one Fragment? Perhaps is is only possible between Activity to Activity or Fragment to Fragment, but not across the two types? Maybe this is why I cannot get it to work?

Update:

I have now tried adding <item name="android:windowContentTransitions">true</item> to the app's theme.

I have also now tried while ensuring that both transitionName values are the same on both views.

neither of these have helped to fix the issue.

Anis LOUNIS aka AnixPasBesoin
  • 4,765
  • 5
  • 32
  • 61
atwrk
  • 234
  • 1
  • 2
  • 9
  • What's the second activity you're trying to transition to? – Anis LOUNIS aka AnixPasBesoin Jan 20 '17 at 21:36
  • The transition is from MainActivity (an Activity) to SheetDialog (a Fragment) – atwrk Jan 20 '17 at 21:44
  • Thank you for your answer. I have other obligations at work right now, but will review your answer later in the day today :) – atwrk Jan 20 '17 at 22:20
  • Transitions are supposed to transition a view from one activity to another. Imo, it's not possible to do that within one activity. What you have to do is animating the view on your own. – azizbekian Jan 21 '17 at 21:07
  • @azizbekian, It is not possible to animate from an Activity to a Fragment? Do you have any sources on that? I really thought you could, but after trying to get this to work, I might believe you. – atwrk Jan 23 '17 at 00:55

3 Answers3

23

Crash course about shared element transitions

Let's first quickly review how the Android framework does the magical Shared Element Transition:

A Shared Element Transition is actually just one of the android framework's lies. The truth is when executing a Shared Element Transition, you're NOT sharing any view between your activities but you have the illusion of doing so. That's because each activity has to have its own independent view tree.

Huh?!

Let's use an example: Suppose that we have a transition of a view view_a from ActivityA to view_b in ActivityB. What the framework does is that it first looks for the dimensions (width, height) and the position (x,y) of view_a in the ActivityA (along with other properties), it then passes these properties to ActivityB, applies them on view_b so that view_b occupies the exact same spot as view_a when ActivityA gets closed. After that, the framework starts the transition by reverse animating view_b to how it is supposed to look in ActivityB. This is how the illusion of the view being shared is created. Magic!

Back to your question

What we can deduce from above is that before any animation can be started, one has to make sure that view_b has already been created on ActivityB, otherwise, this wouldn't be possible.

Using a Fragment

Calling FragmentTransaction.commit()will just schedule your fragment transaction (the fragment will NOT be created immediately after its containing activity is created).

So, in your case, when your ActivityB is created, your view_b is missing (as explained, that's because its containing fragment hasn't been created yet).

Solution

Make sure your view_b is created before the animation starts.

For that, you'll have to find a way to tell the framework to not do the usual thing, but to wait instead for your signal before creating the animation.

One way to implement this is to alter your code to be something similar to this one:

ActivityB

class ActivityB extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        // Tell the framework to wait.
        postponeEnterTransition();
    }
}

FragmentB

class FragmentB extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View viewB = getView().findViewById(R.id.view_b);
    sharedview.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override
        public boolean onPreDraw() {
                // Tell the framework to start.
                sharedview.getViewTreeObserver().removeOnPreDrawListener(this);
                getActivity().startPostponedEnterTransition(); 
                return true;
         }
       });
       ...
    }
}

Further reading

Getting Started with Activity & Fragment Transitions

Anis LOUNIS aka AnixPasBesoin
  • 4,765
  • 5
  • 32
  • 61
  • Thank you for your answer but I have been unable to get this to work. Your answer uses two activities and two fragments, whereas my project only has one of each. I did try applying the concepts none the less, but after trying several different ways I still could not get it to work. – atwrk Jan 23 '17 at 00:57
  • Fragment2 doesn't return any values, this code won't compile. – Alex Beggs Feb 08 '19 at 20:43
  • @AlexBeggs thanx for pointing this out, but the rest of the code depends entirely on the user needs (returning the inflated view would do it in a vanilla scenario). – Anis LOUNIS aka AnixPasBesoin Feb 12 '19 at 23:01
2

What you're looking for is this example: https://github.com/hujiaweibujidao/FabDialogMorph. Note, that what you're trying to achieve is not standard Android transition, you need to create your own morphing transition, based on ChangeBounds transition. Originally, it has been shown in Plaid, thanks to Nick Butcher for that, so you can check it for more tips and background.

Community
  • 1
  • 1
romtsn
  • 11,704
  • 2
  • 31
  • 49
  • Thanks for the answer. I will give this a go, but i am a bit skeptical that this is the appropriate way to achieve what I need. I am not trying to do any morphing, just carry over a view from my activity to a fragment. – atwrk Jan 23 '17 at 00:58
0

Just quoting the Android Docs:

Start an activity with a shared element

  1. Assign a common name to the shared elements in both layouts with the android:transitionName attribute.

From what I see, both of your XMLs don't share the same android:transitionName.

Try changing both android:transitionName in the XML layout (activity_main.xml & dialog_sheet.xml) to a same string, for example: transition_plane_feather

I havent't tested the codes myself, but I think that might be a good starting point.

Bonus Tip

If you're planning to fully implement Material Design without compatibility with lower API levels (pre-Lollipop), I highly recommend checking out a sample made by a Google UI/UX Designer: https://github.com/nickbutcher/plaid

Also, check out the excellent supplementary YouTube video to that sample: https://www.youtube.com/watch?v=EjTJIDKT72M

It shows you some of the best tricks and practices that you can use to fully implement Material Design as well as shared element transitions.

nic
  • 2,125
  • 1
  • 18
  • 33