Develop Reference

Shared Element Transition between Recyclerview and Detailsfragment: elevation, hierarchy, bringToFront

I have some experience working with shared element transitions and fragment transition but I got stuck at the following problem.
I have a RecyclerView with items, if you click on one of the items it uses a ChangeBounds transition to go to the details page. This works fine. When I press the back button, the transition takes place again using the ChangeBounds transition. The only problem is when returning, the transition animates the item underneath the other items in the RecyclerView.
So what I'm trying to accomplish is the elevate the item above the other items when the return animation takes place. I tried elevating the shared element by using
setElevation(1000);
But this doesn't seem to have any effect.
I tried everything I could find on the internet but there ain't much examples of this specific problem.
Any feedback is welcome :)
Cheers!

Maybe it's to late, but for me it was relevant.
Tried many things to make it work not underneath other objects.
The solution was to put clipChildren='false' to destination fragment layout for the whole hierarchy to shared element.
In this case shared element could be drawn out of viewpager of other viewgroup that is not expanded to match parent.

Fading hero views' children in shared element transition

I'm curious how android handles the children of hero views in the shared element transition one can see in Google Keep:
In the standard shared elements transition, on the enter animation, the hero views in the calling activity are instantaneously overlaid with the destination view (at the starting dimensions) before the transition animates changes in the destination view's dimensions to get to their new location.
However, on the return animation, the returning activity's views remain on top of the overlay, and they are the views that are displayed until the animation ends, at which point the destination (calling activity's) hero views snap into place.
This creates a pretty jarring effect if there's any differences in the content of the two hero views -- for example, a textview where the lines wrap differently, or different child views altogether.
Meanwhile, in Google Keep, the shared element transition seems to fade the content views back and forth each way, so this jarring effect is considerably less noticeable. Consequently differences in things like padding or line wrapping are much less problematic.
What's the best way for me to implement this in my own app?
Here is a example:

My answer is long. And it provides only the general framework to recreate what I saw in your animated image, so you will have to take some time to tweak things yourself to get it perfect.
Code is visible here: https://gist.github.com/zizibaloob/e107fe80afa6873301bf234702d4b2b9
tl;dr: The "shared element" is just the green card/background, so you create the transition using those. Place a gray background behind the green background on the second activity so that the green has something to draw on top of while it's growing. Wrap all of your content in a parent view and animate its alpha to fade in/out.
Full answer
In your image, the "shared element" appears to be the green card on the first screen / the green background of the second screen. On top of that, we add two additional requirements:
The gray background of the first activity must be visible during the transition
The contents of the card disappear and then fade back in during/after the transition
Let's go through each file and talk about the choices I made to achieve the desired results...
activity_main.xml
This one is really straightforward. I just built up a view hierarchy that vaguely resembled the one in your image. The empty View at the top is a placeholder for a Toolbar, and the Space at the bottom of the card is there just to make it a little larger.
activity_other.xml
The relevant part of this layout is the triple-stack of "parent" views. Each of them serves a purpose:
The top-level FrameLayout provides a gray background for the card to "grow" over
The middle FrameLayout provides the green background that will be shared between activities
The inner LinearLayout wraps everything that we want to have fade in/out, and will be animated by code in the Activity class
MainActivity.java
Another straightforward class. All this Activity does is make the card clickable and set up the transition.
OtherActivity.java
Most of the magic happens here. Within onCreate(), the Toolbar stuff is all standard, so we can skip that. The code inside the if statement is what sets up the fade-in animation (wrapped in an if so it only fades in on first launch). I've also overridden onBackPressed() to reverse the fade animation and to trigger the return transition.
shared_element_transition.xml
All of the rest of the magic is in this file. The <targets> element excludes the status and navigation bars, which makes sure they don't blink during the transition. The various <changeFoo> tags are the actual transition animation that plays.
styles.xml
The only reason that I included this in the Gist at all is the TransitionTheme style. This is applied to OtherActivity in the manifest, and it's what sets our custom transition (from shared_element_transition.xml).

Scene Transition Flicker

I have a simple view containing a scene root FrameLayout, ListView and a couple of buttons on the bottom.
scene root is used to load and show different scenes, the size changes dynamically depending on the current scene. ListView is set to match_parent in both directions and is positioned behind scene root.
Here's the issue:
If I start a transition using the buttons on the bottom everything works ok, no problem, magic. However, if I transition (✝) to a different scene while scrolling (✝✝) the transition seems to flicker before starting.
It almost looks like the rendering engine fails to load the first frame of the animation before the ListView invalidates the hierarchy due to scrolling.
Thanks for the help ;)
✝ TransitionManager.go(Scene, Transition)
✝✝ I've added a couple of methods to the ListView to allow that

All the Google apps that use Scene Transition that I've seen transit from some item in a ListView to its detail Activity. Since ListView has the convenient behavior of immediately stop the scrolling when touched, such a transition doesn't produce flickering.
So it appears the best thing to do may be to programmatically stop the scrolling before transiting to the new Activity, which is accomplished by the code here.

Android view animation: replacing view by itself

In my android app, I have a notion of "trails": a sequence of objects that the user can navigate. The same view, naturally, is used to display all objects, just updating components (texts, images, etc.) when the next object is to be shown.
Now, I want to animate the transition between objects: when the user navigates from an object to the next object, I want to use the slide animation from right to left (and the other way around). The issue is that I don't have two views to animate between - only one view. Therefore when I try to animate displaying this view (when the next object is to be loaded), the visible view disappears, I get a blank screen - and then the view slides in from the right.
What I want instead is to have the existing view to slide out and be replaced by a new view (same View but with different content) to slide in from the right.
How should I go about it?

Looks to me like a combination of LayoutTransition and GestureDetector. You might even a ViewFlipper in there too.
The LayoutTransition has an animation feature you might want to look into.

I haven't been able to figure out how to use LayoutTransition in my case, so instead of having my View, I replaced it with ViewFlipper containing two copies of my View. When I need to replace the view with another, I keep track of which of the two is currently displayed, then update the other off-screen and then use standard "slide-from-left" and "slide-from-right" animation with showNext(). This is more complicated than I really wanted it to be and uses more memory, but it does the job.

The solution turned out to be very simple: ViewPager. I provide PageAdapter, which returns two similar views (same layout, different content) and ViewPager takes care of the rest. If I wanted to disable the swipe page changes, all I had to do is extend ViewPager, override onInterseptTouchListener and return false.

Sliding in a layout for user input

I have a ListView and each item contains a TextView displaying a number. I'd like to give my users the ability to change this number while staying on the ListView (as opposed to drilling down into a detailed view by clicking on the list item).
What I'm looking to do is to slide in a layout from the bottom of the screen that covers about half of the screen. I'd like this layout to be OVER the Activity behind it (as opposed to being part of that Activity's layout and simply showing it). I'd also like it to be model (or seem modal). Meaning the Activity behind it can not be focused and manipulated. In this layout I will essentially create a calculator.
What I need help with right now is:
1) How to display a layout over the current Activity
2) How make the background (the Activity) modal
Could someone point me to some tutorials/resources and/or give me a few tips?

use an Animation. here is a small tutorial on them: http://developerlife.com/tutorials/?p=343
initially, the view you want to be modal must be placed where you want it to show up(and visibility set to gone).
use a translate animation to visually move the view from below the screen to halfway up the screen. once the animation starts, set visibility to visible
try disabling all views that the user should not be able to interact with after you have started the animation holding the calculator view