I'm having problems with views not refreshing in MotionLayout.
Seems like at some point the refresh/redraw mechanism of MotionLayout becomes broken and the subviews (including the nested ones) are having random problems updating themselves on the screen. What I have experienced so far:
RecyclerView is not refreshed sometimes. This happens when new data is available, I'm using Paging library to fill the data. I have fixed it with a workaround of scrolling 1 pixel when I got new data there - recyclerView.smoothScrollBy(0,1). After that the RecyclerView starts redrawing itself just fine.
When the keyboard is opened it randomly messes the nested subview redrawing. There is an issue in github here where a guy reproduces all this by adding an EditText to official MotionLayout examples. Some examples of the problems that I'm seeing:
I'm using TextInputLayout with app:endIconMode="clear_text" in MotionLayout -> ConstraintLayout -> TextInputLayout and the X button is sometimes not shown when I start typing (also after closing the keyboard).
TextView is redrawn partially! I'm showing "No Results" or "No Posts" text in a TextView, switching between them based on some logic, but instead of refreshing the whole text only "No" is shown in the UI. I have debugged it, Layout Inspector says everything is fine, the text view value is "No Results", but I don't see it on the screen.
Some other animations are broken, like indeterminate progress animation of nested SwipeRefreshLayout
IMPORTANT: All the refresh/redraw issues are fixed when I do a transition! When I come to some messed state where 3 nested subviews are frozen/partially drawn, then I just need to press a button that triggers my transition, and all of them are happily redrawing themselves!
Please let me know if this is a known problem and if there is a workaround for this. I could do invisible 1 pixel transition maybe, but I cannot even detect when the MotionLayout refreshing becomes broken, handling keyboard and new data of RecyclerView doesn't seem to cover all the cases. Otherwise, I will have to move back to ConstraintLayout and think on implementing the amazing OnSwipe functionality myself (if that is even possible in ConstraintLayout).
I am also experiencing issues with update of nested subviews and MotionLayout. Google please fix this issue with MotionLayout.
Using requestLayout() on the nested subviews will often update the Views.
By default during transition motionLayout does not honor requestlayout() during transitions.
Add layoutDuringTransition=honorRequest during the transition
<Transition ... motion:layoutDuringTransition="honorRequest" ... \>
Not really an answer, but too long for a comment:
Since you are facing multiple problem with possibly multiple root causes, I would suggest to create a Sandbox project and reproduce each problem at a time in a safe and simple environment.
To me it seem like you have one problem with the paging lib (not with motionLayout in this case) and another problem with the EditText.
You should check your paging code without ML and check your EditText problem without any scrolling views. I know this is not much of a help, but maybe a guide how to tackle these problems. Mind that MotionLayout is still in beta and especially release 2.0.0-beta02 and beta03 was pretty messy with regression errors. Update to the newest version (beta04 as of now) or continue using a stable version.
Sometimes it also helps to search the official tickets for MotionLayout
Related
I am posting and answering my own question because this issue took me days and days to figure out, and finally I did some half-baked kludge, and then months later I found the actual answer, and I want to spare others that.
Problem: to get iOS text entry elements to scroll up and stay visible when a keyboard appears, in Xamarin Forms the easiest way is to use a ScrollView, BUT for some reason any time you use a ScrollView the dang thing resizes its content so that some of it is slightly off screen.
Content not inside ScrollView:
Content inside ScrollView:
As you can see, for some darn reason the ScrollView has its own opinion about how to lay out its contents, and that opinion is that some of it should always be off-screen.
What the heck? I've tried changing layouts and using different kinds of nesting views and adjusting layout options and margins and everything I could think of. The dang layout just always changes without me telling it to!
How do I make it behave?
ScrollView has an Orientation setting to determine the directions it can scroll. You can set it to Neither right there in the XAML, and all your content will be back where it should be.
Note that if you actually want scrolling behavior, this will mess that up. But if you're only using a ScrollView to get its nice behavior around keyboards appearing and disappearing, as I usually am, that shouldn't matter.
Let's say we have a BottomNavigationBar with a FAB on top. When using this setup and showing a Snackbar, the Snackbar should appear above the BottomNavigationBar and push up/down the FAB while appearing/dismissing.
This is a common scenario for the use of CoordinatorLayout. Is it also possible to create this animation using the new MotionLayout?
There is an issue in the bug tracker, but it's already closed, because OP didn't clearly formulate the question (https://issuetracker.google.com/issues/112665540)
Problems I ran into while trying: We don't have access to the layout-id of the Snackbar. We also don't have access to the general xml of the Snackbar, so we cannot set its Constraints.
UPDATE: I understand that a piece of code would help as a starting point to answer this question. But what ever piece of code I came up with yet, was not useful at all. I pinpointed now the 2 main problems:
I do not know the layout-id of the Snackbar. Therefore I cannot use it in writing a Scene description.
Even if I could create a Scene description (e.g. State1: SnackBar visible, State2: Snackbar not visible). I'd have to trigger these Scene transitions by hand. That means that I would re-create my own Snackbar instead of using the original Snackbar as it is intended.
COMMENTS: #mikejonesguy Yes, in my opinion they are similar. Not the same, but similar. And MotionLayout does also have the job you described: to coordinate interactions among its subviews. Replace "coordinate" with "animate" and you'll see my point. Also have a look at the OnSwipe/OnClick handlers. MotionLayout is still very fresh, but I think it will replace CoordinatorLayout in the future the same way ConstraintLayout replaced RelativeLayout. Maybe I'm wrong, maybe not...time will tell.
CONCLUSION:
As far as I'm concerned, there seems to be no way (yet) to achieve what I want only by using MotionLayout. If it's possible one day, I'll update this question with a working example. Sorry for the impossible bounty... :)
You can design your layout files as if the snackbar is in your layout hierarchy. You need to make use of Constraintlayout's virtual helper objects. Virtual objects are invisible but they act as a regular view during measuring & layout, therefore their purpose is to help you create the exact positioning you want.
A snackbars default height is min 48dp and max 80dp. You are going to need this information.
I'm trying to run a shared element transition from a recycler view to a detail view containing a pager. Pretty much the same as in this blog post.
Everything works, except that the back-from-detail-to-overview animation is clipped to the overview recycler view cells.
After watching this talk, I learned, that unless setSharedElementsUseOverlay is set to false on the activity's window, the transitions will run on an overlay that's on top of everything - the whole content of the activity if I understood correctly. So it should not be possible that the transition is hidden or clipped.
I searched both for setSharedElementsUseOverlay and windowSharedElementsUseOverlay in my project and didn't find anything. The default is supposed to be true. I also tried setting it explicitly to true, both in the theme and programmatically and nothing... the transition is still clipped!
I tried to cause the clipping with the demo project from the blog post, and also wasn't able to - setting setSharedElementsUseOverlay to false doesn't cause any clipping. I ensured that no view in the whole project has clipChildren or clipPadding set to false.
I have no idea what else to do. I tried debugging Android's sources but the transitions classes are unwieldy and I couldn't even find where the overlay view is used. The only thing that I get working in my project is setting clipChildren and clipPadding to false all the way up in the hierarchy, but this is not what I want - besides of undesired side effects (even when doing it temporarily as it may overwrite non-defaults of parents) it also doesn't cause the effect I want without further tweaking, as now overlay views of the shared element appear on top during the transition.
Well, I can step by step modify the example project until it's the same as my actual project, but this is a very tedious task as the actual project is very large and complex. I have done some changes that seem relevant, like adding intermediate views and so on. No success so far.
I simply want to use the overlay. What can be the reason for it not working? Or at least how can I debug this?
I've reproduced this so far on Android M and N. Haven't tested on any other versions.
What is the easiest way to implement a screen slide in Nativescript like shown in Android Viewpager , but in a vertical direction ? Another example of this functionality would be the rss reader feedly where you can change rss feeds by swiping up/down.
The page should allow vertical scrolling to the top/bottom and then transition after a certain treshold.
I already encountered nativescript-slides, which can only do horizontally sliding.
So is there a "nativescript" way or do i have to implement it as native android/ios feature (for example by this) ? In either case a sample on how to integrate it in nativescript would be great.
Update
Recorded an example:
taken from this Repo with Android native code. The outstanding PR made changes to offer vertical scrolling in the list. But the repo seems to be outdated and a bit buggy.
I can provide more info later but there's a new plugin implementing the native controls for android and iOS for slides/carousel her https://github.com/alexrainman/nativescript-carousel-view and vertical swiping is on his radar, I think he might even be close to completing that.
To give an answer for anybody interested in above nested scrolling animation:
For Android I had to implement the native ReyclerView in Nativescript in favor of the NS buildin ListView. It is an optimized view structure which among other things allows nested (vertical) scrolling and can be used as replacement for an ordinary list.
Together with https://github.com/alexrainman/nativescript-carousel-view works like a charm!
Anyone that ends up here still looking for ways to achieve this.
I spent a lot of time trying to figure out a way to achieve this and tried to find ready plugins for this. Also tried to use the plugin from Alexrainman but eventually gave up since the plugin was not up to date with the current nativescript-version.
My solution:
I used radListView as a basis for this implementation and leveraged the methods and events on the radListView.
By using scrolled-event I gathered data for the use of the scrolling feature: scroll Speed and scroll direction. (These might be also taken from the event data, but since I did not find the event details from the Nativescript-documentation I gave up trying to guess where to find this data on the event-model).
Then I also saved the fixed height of one item on my list (The height I fixed to screenHeight-200).
With all this info, I managed to hook the event "ScrollDragEnded" and add logic that makes my list behave like a vertical slider. Moving on the list by method "scrollToIndex" and figuring out which index to scroll and when by leveraging all the data mentioned above.
This is the way I managed to make a pretty good vertical slide.
Good luck!
I got custom animation, create on runtime just to simple translate.
Everything is working fine, got no problems with it, but on
Nexus 10 with latest android animation randomly start disappear and
than I can't do anything but restart the app.
Everything is working, I can see the view on the first and last frame of the animation, the issue is just during the animation, like it won't render it.
When I highlight all the nested layouts I can see that animation occur.
The app is complex, cause I got Unity player as subview and also video view in there.
Any ideas?
In the end it was "GONE" parameter on one of the views which was causing that issue. I replace it with "INVISIBLE" and this fix it.