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).
Related
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.
I have a card-like view with elevation and a white background that I want to expand to fill up the whole screen. It's a card in a list (my own custom layout, not a CardView), and I want to make it take up the whole screen when it's tapped via a Fragment transition.
My first idea is to create a fake, identical view in the new fragment, place it at the item's position, and animate it to the top, while animating its layout bounds to take up the whole screen. However, I don't think this is the best idea, as Android will have to remeasure the layout every single frame while the animation is running (likely to lag). Is there a way I can get this effect in a clean way? I'm going to be using fragment transitions, so hopefully I can use Animator in some way, but I'll take any solution.
You can try to do the same, but instead of relayouting, do redrawing. Create custom implementation of view's onDraw(), it's not that hard.
View will fill entire screen but at the start of animation will draw only initial part.
Or you can just try your approach, it's easy to implement and may be it is not that slow.
Also, may be directly modifying view's setLeft(), setRight(), etc. with Animators is a valid solution.
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.
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 :)
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