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.
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.
When covering a view with an overlay I am aware that I need to use a FrameLayout, and the child views stack on top of each other. Setting a view to having a background with opacity will create the overlay effect. However, in my situation, I am required to create a hole in my overlay to display the contents of a tab item / other views beneath it. This is where I am stuck.
I am not sure how to perform the intersection on the view so that it is transparent in a specific area of the view (which I need to determine based upon the position of a specific View element (Tab, ImageView, etc).
The image above shows the result I want to achieve. With the entire view having an overlay on it, besides one of the Tabs and the Info box (which needs to move based on the view displayed through the overlay).
I believe I need an intersection of the views to achieve the result I need...this is something I am not sure about. Can someone point me in the right direction of a solution please, I do not expect to be just given a solution, its all about learning!
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 complex frame layout containing several custom views. The main view is a graph.
Overlaying the graph is a custom view which represents a cross hair pointer that the user can drag around the graph to read off detailed information about a particular data point.
The frame layout captures all touch events, calls "hit test" methods on each of it's child views to determine if the touch was on that view then dispatches the touch event to the appropriate view.
When the user touches the cross hair and drags it, I pass the touch event to the cross hair which it uses to update it's position and invalidate itself.
Everything is working except...
All views in the layout are redrawing when I invalidate any of these child views. I know this as I have turned on "show screen updates" in developer options. At no point do I invalidate the containing FrameLayout - or at least, not knowingly.
Certainly, the Activity handling the layout does not invalidate it and I do not have any references to the parent in the child views.
I haven't posted code since a) I don't know if this might be normal behaviour, b) there's a lot of it! and c) if it's not normal behaviour, I don't know which part of the code is problematic. Of course, I'm happy to give anything that might be requested.
My minimum API is 2.3.3 and my target is 4.0. This happens on both of those versions so I suspect my code is the problem but where to start?
Any clues as to what might be going on?
There is no way for View to draw "just itself", since it depends on it's parent (which provides it's clipped and translated Canvas via dispatchDraw method). Invalidation requires whole view tree to be invalidated - this is the answer that you're looking for :)
If you'll check out the source of ViewGroup, you'll find there two important methods: dispatchDraw (which responsible for dispatching draw event down to it's childs) and drawChild (which called by dispatchDraw and let's you specify how childs will be drawn). Note, that there is no check on which View starts invalidation, although there is a RectF that specifies invalidation region. As far as I understand - you need to make sure that your invalidating View (cross) doesn't takes the whole screen, so redrawn will be only that part that it actually takes.
If understand you right, the lines of the cross-hair view cover the whole screen, i.e. one vertical line from top to bottom and one horizontal from left to right.
Now if you change the center of the cross-hair and the other views would not be redrawn, your screen would soon be cluttered with old lines from previous cross-hair positions. You would not want this, so you can be glad that the other views redraw itself too.
If you want, you can specify a 'dirty' rectangle and call invalidate(Rect dirty), which would not redraw Views that are completely outside that rectangle. Though it's up to you in that case, not to change anything outside that rectangle.
try this:
setDrawingCacheEnabled(true);
Enabling drawing cache for view will make view not be redrawn if view not changed
Take a look : Android Invalidate() only single view
May be my answer so simple, but I resolved this problem with help:
this.invalidate()
Run it for each canvas-view, and it will updating one by one (not all at once)
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.