2

Background

Lollipop introduces a new way to transition between activities (links here, here, here and here) .

The problem

They said on one of the videos (here) that I can choose exactly how each view will transition, but I can't find how to do it. The only thing I've found is how to set it for all views, except for the "hero" view (which you choose how to transition it to the new activity and back).

For example, let's take the Google Now app, which has this screen: enter image description here

when you click on the editText, the bottom cards have the "explode" effect, but everything darkens and the imageView behind the editText fade out.

The editText is probably the "hero" view, which transitions between the activities, and because it's on the same location on the screen, this probably doesn't have any visual effect for the user.

What I've tried

I've tried to mimic what Google now did, but as I've written, the imageView also has the "explode" effect, so it goes to the bottom, behind the listView, which is a weird effect (since it gets cropped while animating). I'd prefer it to either animate to a different direction, or just fade out.

Here's a sample code of the transition I'm using:

    final Intent intent = new Intent(activity, SearchActivity.class);
    ViewCompat.setTransitionName(viewToTransitionFromAndTo, VIEW_TO_TRANSITION_TO);
    final ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
            viewToTransitionFromAndTo, VIEW_TO_TRANSITION_TO);
    ActivityCompat.startActivityForResult(activity, intent, requestCode, options.toBundle());

in the theme of the activity that starts the other activity, I have this:

<style name="AppTheme.transition" parent="@style/AppTheme">

    <!-- transition support -->
    <item name="android:windowContentTransitions" tools:targetApi="21">true</item>
    <item name="android:windowActivityTransitions" tools:targetApi="21">true</item>
    <item name="android:windowEnterTransition" tools:targetApi="21">@transition/explode</item>
    <item name="android:windowExitTransition" tools:targetApi="21">@transition/explode</item>
    <item name="android:windowSharedElementEnterTransition" tools:targetApi="21">@transition/move_image</item>
    <item name="android:windowSharedElementExitTransition" tools:targetApi="21">@transition/move_image</item>
    <item name="android:windowAllowReturnTransitionOverlap" tools:targetApi="21">true</item>
    <item name="android:windowAllowEnterTransitionOverlap" tools:targetApi="21">false</item>
</style>

and the transition files are:

explode.xml

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

move_image.xml

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

    <changeBounds />

    <changeImageTransform />

</transitionSet>

The question

How can I choose what each view will do upon transition, instead of just saying everything to have the same effect (except for the "hero" view) ?

For example, is it possible to choose "explode" transition for all views except for the "hero" view , and a view that will have a different transition (fade out/in, for example) ?

Please show an example of how to do it. You can use the code I've written above if needed.

android developer
  • 114,585
  • 152
  • 739
  • 1,270

1 Answers1

1

Use a TransitionSet and add/exclude certain targets using Transition#addTarget() and Transition#excludeTarget(). For example, let's say you have two views and you want each of them to slide off the screen in different directions. You could create such a transition using the following code:

TransitionSet set = new TransitionSet();

Transition slideUp = new Slide(Gravity.UP);
slideUp.addTarget(view1);
set.addTransition(slideUp);

Transition slideDown = new Slide(Gravity.DOWN);
slideDown.addTarget(view2);
set.addTransition(slideDown);

TransitionSet extends Transition, so the resulting set object can then be used as the window content transition, which will play the two slide transitions simultaneously in parallel.

Alex Lockwood
  • 83,063
  • 39
  • 206
  • 250
  • Nice. Will check it out. I assume that this should be purely in code, since it requires references to the view, right? will calling the transitionSet be the same as using the transition resource? Is there a way to make an transition that will be used in XML (like custom views) by yourself (for example, one that goes over all views and decides what to do with each), or do we only have only the built in transitions for this? – android developer Dec 31 '14 at 23:08
  • You can create transition sets and target views by their IDs in XML as well... it doesn't have to be done programatically. Take a look at the code in [this post](http://stackoverflow.com/questions/26600239/animate-imageview-between-two-activities-using-shared-element-transitions-with-c) for an example. – Alex Lockwood Dec 31 '14 at 23:12
  • No, I meant like custom view, where you declare your custom view in code, but can reference to it in the layout XML. Anyway, I don't think it's possible and also not that useful . I will try out your solution tomorrow and see if it works. Can you please answer this: is it possible to use the "explode" transition, and choose which item will explode and which won't (or will use a different transition) ? – android developer Dec 31 '14 at 23:28
  • Yes, you can target which Views are affected by any transition by setting the targets either in XML or in code. Even custom Views may be targeted via XML using ID, class, or transitionName. – George Mount Jan 01 '15 at 02:45
  • I can't find how to do it. I've updated the question to show what I'm doing in order to start the transition. Please let me know what should I do in order to exclude/change the transition of a view (that's not in the parameters currently). – android developer Jan 01 '15 at 11:10