Develop Reference

How to include an unattached View in the activity transition?

I draw a View that is not attached to any parent.
It's a decoration for a RecyclerView. The view sticks to the bottom and disappears when its counter part comes up in the list.
All this works fine but:
When i leave the activity the View doesn't fade with the rest of the
views in the activity's transition.
It stays until the end of the animation and then disappears
immediately.
( see large green view in the demo )
How do i include this unattached View in the activity's exit transition?
I've create a minimal Android Studio Project to replicate the issue:
https://github.com/Ostkontentitan/transition-issue-demo
(To better see the issue possibly set your phones animation scale to >= 5)
Here is a demo:

Add transitionName to xml layout for the RecyclerView.
The transition animation you see is because of ActivityOptions.makeSceneTransitionAnimation(this#ItemListActivity) and if you add transitionName to the view, it works fine.

Not-too-educated guess
(because I haven't tried and I haven't used Transition Framework in a few months)
The way TF (Transition Framework) works is by computing the start/end values of the transition and performing the animations needed to achieve this.
RecyclerView decorations are not "views" that are part of the layout, so TF has no idea that thing exists. It does know about your RecyclerView of course, because it's contained in the ViewGroup that is animated.
You may have already know this, but in any case, what I think I'd try to do here, is create a custom transition framework transition (they are not hard to do, you can even check TransitionEverywhere and look at how that library implements some missing transitions in the framework); in your CustomTransition, you can then try to interpolate the animation values so the recycler view can redecorate as the animation progresses (like an alpha value that is animated, your custom decorator would "paint" using said alpha).
Now... in truth, I've had to do something similar once, where a custom transition was "driving" a few external views (for reasons at the time) :) but... it was not a RecyclerView item decoration, mine were just "views", so I'm not sure if you can do this this way w/a decoration.
I think it's worth trying.

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).

Android animating a view with a fragment inside of it causing visual artifacts

I currently have two fragments inside views. The views are animated around the screen.
On most devices there is no problem. However on some devices including the simulator, the visuals inside each of the fragments becomes jagged and smears while the animation is taking place. As soon as the animation is finished then it appears normally.
Im guessing that the draw commands inside the fragments are not getting called when the containing view is being animated. Is there any way I can force the fragments to redraw on every frame of the animation?
Thanks.

Invalidate your parent view while animating :)

Android Activity transition - ListView dividers are visible too long

During my exploration of Activity Transitions I've have encountered problem with ListView (unfortunately I've not migrated to RecyclerView yet :( )
ListView default dividers are visible for really short time (see video https://www.youtube.com/watch?v=nHZCzQF3XOg&spfreload=10 ) during transition.
I've no idea why it is happening and how to make it stop doing this. Or maybe it is time to migrate to RecyclerView ;-)?

If you want the ListView to animate together, set transitionGroup="true" on the ListView. It will then move and animate as one. Otherwise the elements of the LIstView will animate separately. ViewGroups typically default to false, but when there is a background will switch to true so that you don't see a background turd left in the scene after the transition.

Android Animation - Button stays clickable

I am making a game in which I have 5 buttons, looking like clouds, falling from the "sky".
That means that when my activity starts, 'clouds' cannot be seen, since the marginTop is set to -100dp.
From that position they start falling down untill they get lost on the bottom side of the screen.
The thing is, I need those buttons to be clickable, during the process of animation.
So far, I found some documentation about how I can make the buttons clickable AFTER the animation ends. But I don't need that. I need to be able to click on the buttons through the animation time itself.
NOTE: I need something that works with versions before 3.0.
Anybody has any link to documentation or some example or anything ?

After doing some research, I found out that there are two types of animations:
View Animation and Property Animation.
The view animation can only animate View objects. It also lack a variety of animations, since it can do only stuff as scale, rotate, move... It cannot change background color, for example.
Also, the disadvantage of the View Animation is that it only change the position of where the View object is DRAWN. Physically, it still stays in the same position.
That's why the button is un-clickable, after the View Animation is finished upon it.
Property Animation, in the other hand, can animate both View and non-View objects and it doesn't have constraints as the View Animation.
When objects are moved, for example, with the property animation, they are not just drawn on some other position on the screen, but they are actually MOVED there.
Now, Property Animation is a lot more complex to write than the View Animation, so if you don't really need all the advantages of the Property Animation, it is suggested to use View Animation.
Source:
Property vs View Animation
Tutorial and SupportLybrary up to API 1:
nineoldandroids

You can change the buttons to imageViews and then do
imageView.setOnClickListener(myListener)
then set myListener to do whatever you previously wanted to happen on the buttons onClick. Your activity will have to implement OnClickListener
Added bonus: you can make the images look like clouds :)