I am trying to add background images, partially covered, to a scrollable view that move along with it. What's the best way to do that?
Below is my attempt. I created an image item, and set the item just below the image to have a negative offset at the top by using ItemDecoration. However, as you can see, the item suddenly appears and disappears.
My second idea is just to lump the image and first item into one single item, but that seems less clean. Anybody has some good suggestions?
Okay, I solved the sudden appearance/disappearance problem by giving the RecyclerView a -150dp layout_marginBottom. Now the recycler view extends below the screen and the first item persists until it goes offscreen. I then set 150dp paddingBottom to compensate for content loss at the bottom.
Now everything works perfectly. But I consider this approach a little hacky, and would love to see more ideas
Related
I have implemented a RecyclerView where I can add and delete items. I want the added item to be added on the second last position and, whenever I add a new item, the animation runs well. That is, the last item moves downwards, letting space for the new item to fade in.
When I remove an item there is a problem that I don't know how to fix. How I want it to behave is:
fade out the deleted element,
move upwards all the items below it.
What actually happens is that, first thing, the last item disappears, and then the rest of the animation takes place. When the items below the deleted element move upwards, the last item reappears as coming from behind a wall.
To me it seems as if the RecyclerView shrinks to the "post-animation" height, and then the animation is performed.
I haven't defined the ItemAnimator, so the DefaultItemAnimator must be the one used. I have watched this video, and overridden the supportsPredictiveItemAnimations method in a custom implementation of LinearLayoutManager, but it doesn't fix it.
I already reported the problem through Google Issue Tracker here
I hope we can get a fix soon! As you say It seems very related to a possible race condition between the measure updates for the recyclerview and the animation when your recyclerview is wrapping it's content to calculate it's height.
This article explains the problem in a really detailed way also.
Perhaps a bit late, but I was able to fix this in my situation by setting the RecyclerView item animator to null, and then in the setList(list) function of my Adapter scheduling a Transition as such:
Transition transition = new AutoTransition();
transition.setDuration(200); // Or any duration you want
TransitionManager.beginDelayedTransition(mRootViewGroup, transition);
where mRootViewGroup is the viewgroup containing the RecyclerView.
This problem is also fixed by setting your layout_height (or width, depending on the scrolling orientation) to something other than wrap_content, but if, like me, you need your recyclerview height set to wrap_content, this might be a solution for you.
Not certain it will fix your problem as well, but I figured I might as well share what worked for me.
I was looking to create a GridView that stretches across the entire screen. However, when the user first opens the screen, the top of the first item should be about halfway up the screen.
For example lets say we have a GridView of 12 items displayed 3 x 4. When the user first opens the screen, only the first six items would be seen with a large margin at the top of the screen. The user can then scroll the list to see the other items. The top items would eventually reach all the way to the top of the screen.
If I was using a ListView, this is simple. I merely create a 0dp headerView with a large top margin. But, GridViews do not allow for headers. What is the best way to handle this situation?
Normally, you DO NOT make a GridView inside a ScrollView. It's not recommended! But sometimes you have no choice and you need to addHeaderView() on a GridView (But I repeat, it isnt recommended).
So, to make this happen, you have to make a custom GridView. This answer will be usefull in your case: Grid of images inside ScrollView
I had a same situation and I used this one: HFGridView by #SergeyBurish! Very simple and really great. (See the last answer here: A GridView with header and footer).
Hope this will be helpful.
I'm experimenting to see if the layout scheme I want to use is possible. I want to have an XML layout that's scrollable. Within that scrollable layout, I want to have a single line going horizontally across the screen (I used just a View with a fixed height and different color). When that horizontal line reaches the top of the screen, and as I scroll down through the layout, I want it to stop and remain at the top of the screen while being able to scroll through everything below it.
I've been messing around in XML trying to get it to work, basically putting a bunch of junk before it and after it.
Any ideas as to how that might work? Would I have to do something fancy with the java code to fix the red line at the top when the scroll position reaches a certain point? Your help would be greatly appreciated.
I am assuming you want something like Gmail app where when you scroll a mail the header sticks on top... To do this, you need 2 views. You have your regular scroller below and overlay a fixed view on top (you can use a relative layout to do this). When your cell goes past a certain spot, you want to populate and set the visibility of the fixed view to VISIBLE. This would give the impression that the view you want to 'stick' to the top really just got stuck rather than scrolled out of view. You'll have to work out the opposite scrolling scenario too based on the location and height of the scrolled cell/view.
HTH
I would like to change the default behaviour of my listview, so when im scrolling to the last item, the list will keep scrolling untill the last item is at the top of the list.
default behaviour stops scrolling when the last item is fully in view.
Any ideas on how i can go about this pre 2.3?
Thanks,
Totem.
In case anyone is interested in the solutions available it either:
1) add to the list view padding, that solution forces you to play around with the fading edge property since it gets sifted because of thee padding. also this method might not work well if your using a transparent background because items will be rendered and visible under the padding area. Although this could be fixed by entering the list into a relative layout and making sure to draw something over that area.
2) add transparent items to the listview for offset and not set them as enabled to avoid dividers, just need to make sure to change getItemCount and getItemTypeCount and so on if your if your item isn't really inside your adapter as per my case.
I went with option two.
Thanks,
Totem.
I am having weird scrolling issues in my pretty simple GridView. Each item in the Grid is simply an ImageView and a TextView. The activity itself is simply an application selector. It looks like a rough version of the basic App Tray in Android.
The issue is that after spending some times scrolling through my view, it will inevitably allow me to continue scrolling past the top row of icons, to a blank screen, and the scroll bar will disappear, leaving me stuck.
It doesn't happen every time I go to the top of the view, only sometimes, and usually only after some excessive scrolling.
If I happen to notice the problem and catch it before the top row disappears off the bottom of the screen, I can usually scroll back through the view and spot some icons missing. There are empty spaces in the grid, and I can only assume that those icons have been moved to some bizarre position, which is allowing the view to scroll past the top.
This is my first Android app beyond a basic Hello World, so it's likely that I've just screwed up something in my layout files. I also realize that this is probably a pretty confusing description, so I'm hoping someone has experienced this and my search abilities simply were unable to find it.
I can post my layout files or other code if someone thinks that's useful.
Oh, and the program is built against 1.5, but is running on 2.2 (whatever state of 2.2 that was that snuck out last week) on my phone. I don't have enough apps to test this on an emulator, but could probably set something up if someone felt it necessary.
Thanks in advance for any help on the issue.
I had same problem, but I post to GridView only ImageView's so pengwang's answer didn't help me. I found explanation for this bug https://code.google.com/p/android/issues/detail?id=16218
The problem is that GridView does not currently handle items with differing heights.
My solution is to use exactly specified layout_height same for all GridView's items.
i have solved it: in the link GridView cannot show image you can try
It seems that if you scroll off the bottom of the GridView and back again very fast a couple of times, you eventually will notice that the elements of the view get shifted one place to the "left" from where they originally were. When this happens, you then can scroll all the way off the top of the GridView. When you do reach the top of the list, item 0 is not displayed, having item 1 in its place and nothing but blackness above that row.
Clicking on any item in this situation resets the list and everything is back to normal.
This must be a bug. It's highly reproducible, and I don't think anything I'm doing is causing the mix up. At this point, adding to the list adapter has stopped.
Right now I'm working with Android 2.3.3.
I just ran into this exact same issue myself -- I have a grid of images that have different heights. After reading the Android developer's doc on GridView, GridView.LayoutParams and GridLayout, I did two things that fix my issue:
find the tallest image in each row, and store the height in a map of row -> rowHeight. Each image that I download has width and height info, so this is easy for me to do by overriding my adapter's addAll(items) method.
in getView(), I create a GridView.LayoutParams(MATCH_PARENT, getRowHeight(position)), which sets each grid item to the max row height for its specific row.
wrap my ImageView inside a LinearLayout. I have tried other layout but LinearLayout is the one that works. Set android:scaleType="fitCenter" and android:adjustViewBounds="true" for the image view.
After above 3 steps I finally got the grid to look right, they have different heights, and there's no scrolling issues.
I had a similar, but probably less common problem, where just scrolling a little bit would scroll the gridview to the end and I was not able to scroll up at all. This only occurred when the gridview was smaller, for example when the keyboard was visible. The problem was that I used:
android:paddingBottom="400dp"
android:clipToPadding="false"
Making padding bottom much smaller fixed my issue. I hope this helps at least someone!