I'm adding layout animations to my apps using the Transition API and I was naively anticipated that this framework - like any properly designed layout animation engine built on top of existing non-animated layout engine - would implement "as if" behavior, i.e. adding animation should not break existing "non-animated" behavior. Particularly, views which visibility is set to GONE/INVISIBLE should already be non-interactive during transition. Unfortunately, looks like it's not the case with the Transition API: views being animated out retain focus and can be clicked [again] during animation, breaking the internal logic of an Activity/Fragment.
So, I wonder: is this by design or am I missing something? Can it be fixed without disrupting animated view's properties and/or resorting to special "interaction-blocking" wrapper views?
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'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).
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 am new to android therefore I got a little bit lost with all those ViewFlipper, ViewSwitcher, ViewAnimator and ViewPager. Moreover, I am not sure what's happening under the hood.
Basically I have an activity which shows some data. With swipe (or button, doesnt matter) I would like to scroll the view and get to another page (as seen in the picture below).
Is it possible to implement something like that without changing to another activity?
I am a little bit confused regarding views and access to the design elements. How those pages are located each to another? e.g. If I am currently seeing Page1, can I modify content of Page3? Or plainly saying, are all page views loaded all together? As if I set setContentView(R.layout.xlayout); then I can access only xlayout elements.
But if I use same activity, then I have a thread there which updates a counter on Page1, if I change view to Page 2, the counter will not find Page1 Counter TextView and will complain.
As I Understand Android 4.0 has ViewPager which is similar to the seen in the picture. I am using GB. Should I use support library or can I just go around and implement something similar without importing any libraries?
(Sorry, my description is a little bit messy)
Yes, you can use ViewSwitcher, ViewFlipper and ImageSwitcher depending on your requirements.
ViewSwitcher may have two childs at max. And these child might be a View or an object of subclass of view.
ViewFlipper: May have as many childs you want. and these child might be a View or an object of subclass of view.
ImageSwitcher might be used to switch images over.
By using view flipper you can display one item at a time, and adding a gesture overlay, you can apply sliding effect. To apply View Flipper, you need to add all the views to ViewFlipper, and showNext and showPrevious methods are used to show next and previous child.
You need to use a ViewPager to have the same behaviour as in Google Play.
it only available on recent version of Android, but you can use the Compatibility Package to make it available for older version.
With a ViewFlipper you can't "scroll" between two pages.
I need to create a custom toggle-silder widget, like in the iphone, things like on-off items etc...
For the task i chose to inherit from LinearLayout, define it as Vertical and grab some xml attributes like the drawables that will be using for the buttons (one for on, one for off) and i just place two Views with the drawables as their backgrounds.
Now the issues i'm facing are:
i can catch onKeyDown and
onTouchEvent to discover swipe and
right-left-fire events so i'll
switch states for the button, but i
do wonder if there is a swipe event
read in the android system onSwipe
or should i try messing with the
GestureDetector ?
i want the sliding to be animated, i have no idea how to do that, any ideas where to start looking ?
ok if we take a look on this page:
http://developer.android.com/guide/topics/graphics/view-animation.html
we can see that we have simple way to create the animation, once onClick or onTouchStart is discovered (if not already processing), start the animation preloaded from the xml and disable touch on the View until animation ends(you cann add animation listener to animation object).
you should make sure fillAfter is true so the values will stick after animation ends.
the only issue with it is that it doesn't allow dragging like in iphone, possible solution would be to allow dragging up to certain delta and if that delta is passed ignore any onTouchMove events, disable touch and start the animation.
ofcourse deltas and animations should be updated according to the state of the button.
i might post code soon.