Incorrect relayouting of recycler view elements - android

I'm developing android messenger application and using a RecyclerView for showing messages. I have a button that loads all messages from server and scroll down to the last one by clicked on it. However, after clicking on this button I see only half of the last message's content. In addition, when I scroll a little up and click on this button for the second time I don't have a problem and see all content of last message.
Code of setuping the button.
private fun setupToLastMessagesButton() {
binding.toLastMessagesButton.setOnClickListener {
// Show progress bar while messages is loading
binding.mainProgressBar.visibility = View.VISIBLE
// Tell service's thread to load messages by using handler and post mechanism
getServiceHandler().post {
val result = getService().getLastMessages()
// Tell main thread to update recycler view and scroll down
mainHandler.post {
// Finish showing progress bar
binding.mainProgressBar.visibility = View.GONE
// Notify adapter
getAdapter().notifyItemRangeInserted(result.first, result.second)
// Scroll to last element
binding.messagesView.scrollToPosition(getAdapter().itemCount - 1)
}
}
}
}
RecyclerView .xml code
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/messagesView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/recyclerViewProgressBar"
app:layout_constraintTop_toTopOf="parent" />
Screenshot shows my problem. You can see that last element have incorrect layout and you can't see a text of message.
I guess that RecyclerView doesn't have time to complete relayouting before calling 'binding.messagesView.scrollToPosition(getAdapter().itemCount - 1)'. I tried to call this function after some delay, but nothing changed. Is there a mechanism to wait a moment when relayoting is completed?
Screenshot shows behaviour I'm expecting.

you should call scrollToPosition in yet another post, give a moment for RecyclerView for obtaining data and measure/draw (in memory, first frame) new item.
binding.messagesView.post {
binding.messagesView.scrollToPosition(getAdapter().itemCount - 1)
}
currently it is scrolling to half of this new item probably because it isn't drawn yet and RecyclerView "thinks" that this item is smaller (so scrolling a bit to small amount of pixels, not to the end). I bet your "clear" item/layout (not filled with msg data) doesn't contain this gray area with numbers, so RecyclerView scrolls only to always visible username-row

Related

What is the proper way to scroll to end of recyclerview in paging 3

There is a situation where I have to scroll the recyclerview to last position. The problem starts where I am using Paging 3. I don't know what is the proper way to do it every time I submit data to adapter. by the way I have to say that I do not submit data once, but for example every time user submits a new comment to backend I have to get the new list from server and submit it.
This is what I tried. that's how I observe data:
private fun observeComments() {
exploreViewModel.commentsLiveData.observe(viewLifecycleOwner) { comments ->
commentsAdapter.submitData(viewLifecycleOwner.lifecycle, comments)
}
}
And this is how I tried to scroll the recyclreview to last item:
commentsAdapter.addLoadStateListener { loadStates ->
if(loadStates.refresh.endOfPaginationReached){
if(commentsAdapter.itemCount>1)
binding.rvComments.smoothScrollToPosition(commentsAdapter.itemCount-1)
}
}
I also set app:stackFromEnd="true" to recyclerview but this is not useful. whenever I submit a new comment and get the list, recyclerview scrolls to the middle, I thinks it scrolls to the first pages end. but I want it to be scrolled to the end of the list.
Any help or suggestion would be appreciated.
You can implement PagingSource.getRefreshKey() to control the key passed to .load() after invalidation and set initialKey in Pager() to control the key passed to initial call of .load().
Since your list is paginated, scrolling to the end doesn't work because you would need to sequentially load all pages until you get to your desired position, so instead the better strategy is to start loading from where you want the user's scroll position to start, then let paging prepend pages as they scroll back up.

Too few items for RecyclerView on screen

I'm making an API call getData(forPage: Int): Response which returns a page-worth of data (10 items max) and thereIsMoreData: Boolean.
The recyclerView is implemented that by scrolling, the scroll listener automatically fetches more data using that API call:
val scrollListener = object : MyScrollListener() {
override fun loadMoreItems() {
apiFunctionForLoading(currentPage + 1)
}
}
The problem is that with longer screen devices that have more space for items (let's say 20), the RV receives 10 items and then doesn't allow scrolling, because there's no more items to scroll to. Without scrolling, more data cannot be loaded.
My naive solution:
load first set of data
if thereIsMoreData == true I load another page of data
now I have more data than the screen can display at once hence allowing scroll
Is there a more ellegant solution?
Android has this Paging Library now which is about displaying chunks of data and fetching more when needed. I haven't used it and it looks like it might be a bit of work, but maybe it's worth a look?
Codepath has a tutorial on using it and I think their stuff is pretty good and easy to follow, so maybe check that out too. They also have this older tutorial that's closer to what you're doing (handling it yourself) so there's that too.
I guess in general, you'd want your adapter to return an "infinite" number for getItemCount() (like Integer.MAX_VALUE). And then in your onBindViewHolder(holder, position) method you'd either set the item at position, or if you don't have that item yet you load in the next page until you get it.
That way your initial page will always have the right amount of content, because it will be full of ViewHolders that have asked for data - if there's more than 10, then item 11 will have triggered the API call. But actually handling the callback and all the updating is the tricky part! If you have that working already then great, but it's what the Paging library was built to take care of for you (or at least make it easier!)
An elegant way would be to check whether the view can actually scroll down:
recyclerView.canScrollVertically(1)
1 means downwards -> returns true if it is possible tro scroll down.
So if it returns false, your page is not fully filled yet.

Items are hidden from RecyclerView after update till user scroll

I have a fragment [DISPLAY SCREEN] with RecyclerView After user click on item of it, app open screen [EDIT SCREEN] to allow user edit that itme.
when user finish update i close fragment [EDIT SCREEN] and back to [DISPLAY SCREEN] and make new request to api to get data again
i checked thread of update method which accept data from api and thread was main
private fun updateScreen(data: List<GymPackage>) {
"updateScreen size ${data.size} pageNumber $pageNumber , thread num ${Thread.currentThread().name}".log(mTag)
if (pageNumber++ == 1)
packagesAdapter.clear()
packagesAdapter.append(data)
("updateScreen size ${data.size} pageNumber $pageNumber ,, adapter ${packagesAdapter.itemCount}, ${packagesAdapter.getItemViewType(0)}" +
",${(packagesRecyclerView.layoutManager as LinearLayoutManager).findFirstVisibleItemPosition()}").log(mTag)
/**
* after get first page sometimes items not being shown so scroll to first item
*/
packagesRecyclerView.scrollBy(0 , 50)
loadMore = data.size == pageSize
packagesAdapter.loadingProgressBar = data.size == pageSize
tvNoData?.visibility = (packagesAdapter.itemCount == 0).gotViewVisiblity(true)
}
Output:
first two lines are with when [DISPLAY SCREEN] get list of items,
thread is main
n items inside adapter of RecyclerView -> 5
0 is index of first visible item in RecyclerView
second two lines after return from [EDIT SCREEN]
thread is main
n items inside adapter of RecyclerView -> 5
-1 is index of first visible item in RecyclerView --> so user do not see any items
when user scroll he sees items normally.
I tried to make rv scroll using
packagesRecyclerView.scrollBy(0 , 50)
also
packagesRecyclerView.scrollToPosition(0)
both with no results
Update 1
tried these
packagesAdapter.notifyDataSetChanged()
packagesRecyclerView.performClick()
with no results
Update 2
with beta7 Google said it provides fixes to
Nested scroll view issues in MotionLayout
Transition listener issues with MotionLayout
Memory leak in MotionLayout
RecyclerView performances
Group visibility
Padding issues
after I update lib to, app works fine, but motion has other issues with padding
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta7'
Return to beta4
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'
and use
motion.transitionToStart()

Setting RecyclerViews itemAnimator to null does not remove animations

My outer RecyclerView crashes either with
IllegalArgumentException: Scrapped or attached views may not be recycled. isScrap:false isAttached:true...
or
IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
Like the title suggests I have an RecyclerView in the list item layout of the first RecyclerView. This layout is used to display messages and the
inner RecyclerView to display attachments that come with the message. The inner RecyclerViews visibility is set to either GONE or VISIBLE depending whether the message has any attachments or not. The simplified outer list item layout looks like this
ConstraintLayout
TextView
TextView
TextView
RecyclerView
And the part of the adapter that handles the inner RecyclerView looks like this
private fun bindFiles(message: Message?) = with(itemView) {
if (message != null && message.attachments.isNotEmpty())
{
sent_message_attachments.setAsVisible()
sent_message_attachments.layoutManager = GridLayoutManager(this.context,Math.min(message.attachments.size,3))
sent_message_attachments.adapter = AttachmentAdapter(message.attachments)
sent_message_attachments.itemAnimator = null
sent_message_attachments.setHasFixedSize(true)
}
else{
sent_message_attachments.setAsGone()
sent_message_attachments.adapter = null
sent_message_attachments.layoutManager = null
}
}
The bug has something to do with the way I fetch the attachments in the inner adapter since once I disable the part that start the download process, everything is fine. There's no problem when loading images from the device, but once I start the download process, everything goes to hell. This is the part that handles images and kicks off the download process in the inner adapter. I have functions for videos and for other file types that are pretty much the same exact thing but use slightly different layout.
private fun bindImage(item: HFile?) = with(itemView) {
if (item != null)
{
if (item.isOnDevice && !item.path.isNullOrEmpty())
{
if (item.isGif)
{
attachment_image.displayGif(File(item.path))
}
else
{
attachment_image.displayImage(File(item.path))
}
}
else
{
//TODO: Add option to load images manually
FileHandler(item.id).downloadFileAsObservable(false)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(
{ progress ->
//TODO: Show download process
},
{ error ->
error.printStackTrace()
//TODO: Enable manual retry
},
{ notifyItemChanged(adapterPosition)} //onComplete
)
}
}
}
I use the same structure as above in my DiscussionListAdapter to load discussion portraits (profile pictures etc.) and it does not have the same issue.
These are the extensions functions used to inflate the viewHolders and to display the images
fun ViewGroup.inflate(layoutRes: Int): View
{
return LayoutInflater.from(context).inflate(layoutRes, this, false)
}
fun ImageView.displayGif(file:File){
GlideApp.with(context).asGif().load(file).transforms(CenterCrop(), RoundedCorners(30)).into(this)
}
fun ImageView.displayImage(file:File){
GlideApp.with(context).load(file).transforms(CenterCrop(), RoundedCorners(30)).into(this)
}
I've been on this for the past couple of days and just can't get my head around it. Any help in any direction is greatly appreciated. I know my explanations can be a bit all over the place so just ask for clarification when needed :)
UPDATE
I have now been able to produce this with a GridLayout as well as with RecyclerView. It's safe to assume that the nested RecyclerViews were not the culprit here. I even tried to ditch the Rx-piece that handled loading the images and created an IntentService for the process, but the same crashes still occur.
With GridLayout I mean that instead of having another adapter to populate the nested RecyclerView I use only one adapter to populate the message and to inflate and populate views for the attachments as well and to attach those views to the nested GridLayout.
The crash happens when I start to download a file and then scroll the view, that is supposed to show the downloaded file, out of the screen. That view should get recycled but for some reason the download process (which in my test cases only takes around 100ms-400ms) causes the app to throw one of the two errors mentioned in the original question. It might be worth noting that I'm using Realm and the adapter takes in a RealmResults<Message> list as it's dataset. My presenter looks for changes in the list and then notifies the adapter when needed (changed due to the implementation of IntentService).
This is how I'm capable to reproduce this time and time again:
Open a discussion that has messages with attachments
Start to scroll upwards for more messages
Pass a message with an attachment and scroll it off screen while it's still loading
Crash
There is no crash if I stop and wait for the download to complete and everything works as intended. The image/video/file gets updated with a proper thumbnail and the app wont crash if I scroll that out of view.
UPDATE 2
I tried swapping the nested ViewGroup for a single ImageView just to see is the problem within the nestedness. Lo and behold! It still crashes. Now I'm really confused, since the DiscussionListAdapter I mentioned before has the same exact thing in it and that one works like a charm... My search continues. I hope someone, some day will benefit from my agony.
UPDATE 3
I started to log the parent of every ViewHolder in the onBindViewHolder() function. Like expected I got nulls after nulls after nulls, before the app crashed and spew this out.
04-26 21:54:50.718 27075-27075/com.hailer.hailer.dev D/MsgAdapter: Parent of ViewHolder: android.view.ViewOverlay$OverlayViewGroup{82a9fbc V.E...... .......D 0,0-1440,2168}
There's a method to my madness after all! But this just poses more questions. Why is ViewOverlay used here? As a part of RecyclerView or as a part of the dark magicians plans to deprive me of my sanity?
Sidenote
I went digging into RecyclerViews code to check if I could find a reason for the ViewOverlaymystery. I found out that RecyclerView calls the adapters onCreateViewHolder() function only twice. Both times providing itself as the parent argument for the function. So no luck there... What the hell can cause the item view to have the ViewOverlay as it's parent? The parent is an immutable value, so the only way for the ViewOverlay to be set as the parent, is for something to construct a new ViewHolder and supply the ViewOverlay as the parent object.
UPDATE 4
Sometimes I amaze myself with my own stupidity. The ViewOverlay is used because the items are being animated. I didn't even consider this to be an option since I've set the itemAnimator for the RecyclerView as null, but for some odd reason that does not work. The items are still being animated and that is causing this whole charade. So what could be the cause of this? (How I chose to ignore the moving items, I do not know, but the animations became very clear when I forced the app to download same picture over and over again and the whole list went haywire.)
My DiscussionInstanceFragment contains the RecyclerView in question and a nested ConstraintLayout that in turn contains an EditText for user input and a send button.
val v = inflater.inflate(R.layout.fragment_discussion_instance, container, false)
val lm = LinearLayoutManager(context)
lm.reverseLayout = true
v.disc_instance_messages_list.layoutManager = lm
v.disc_instance_messages_list.itemAnimator = null
v.disc_instance_messages_list.adapter = mPresenter.messageAdapter
This is the piece that handles the initialization of the RecyclerView. I'm most definitely setting the itemAnimator as null, but the animations just wont stop! I've tried setting the animateLayoutChanges xml attribute on the root ConstraintLayout and on the RecyclerView but neither of them worked. It's worth mentioning that I also checked whether the RecyclerView had an itemAnimator in different states of the program, and every time I check the animator, it is null. So what is animating my RecyclerView?!
I have faced the same issue
Try this in your child RecyclerView it works for me
RecyclerView childRC = itemView.findViewById(R.id.cmol_childRC);
layoutManager = new LinearLayoutManager(context);
childRC.setItemAnimator(null);
childRC.setLayoutManager(layoutManager);
childRC.setNestedScrollingEnabled(false);
childRC.setHasFixedSize(true);
now set your Adapter like this
ArrayList<Model> childArryList = new ArrayList<>();
childArryList.addAll(arrayList.get(position).getArrayList());
ChildOrderAdapter adapter = new ChildOrderAdapter(context, childArryList);
holder.childRC.swapAdapter(adapter, true);
hope this helps
I finally figured out what was causing this. In my DiscussionInstanceView I have a small view that is animated into and out of view with ConstraintLayout keyframe animations. This view only shows the download progress of the chat history and is used only once, when the discussion is first opened. BUT since I had a call to hiding that view every time my dataset got updated, I was forcing the ConstraintLayout to fire of an animation sequence thus making everything animate during the dataset update. I just added a simple check whether I was downloading the history or not and this problem got fixed.

ListView disappears before updating itself when I pull to refresh

I use a ListView with a PullToRefresh mechanism using SwipeRefreshLayout. I add the SwipeRefreshLayout dynamically in code to the ListView when I initialize.
SwipeRefreshLayout swipeRefreshLayout = new SwipeRefreshLayout(listView.getContext());
if (listView.getParent() != null) {
final ViewGroup parent = (ViewGroup) listView.getParent();
final int index = parent.indexOfChild(listView);
parent.removeViewAt(index);
parent.addView(swipeRefreshLayout, index);
listView.setVisibility(View.VISIBLE);
}
swipeRefreshLayout.addView(listView);
swipeRefreshLayout.setOnRefreshListener(...) { }
The above code adds the swipeRefreshLayout to the parent (at the position that the listView is currently in), and then adds the listView as the child of the swipeRefreshLayout.
When I pull to refresh, a network call is made - data is fetched, stored in the DB, and loaded using a CursorAdapter.
The problem :
When I pull to refresh, I see a blank screen for a second and the UI updates itself with all the items. But when the blank screen is showing and I touch the screen, it responds to click events and the ListView immediately shows.
I need the ListView to display all the time while data is being fetched (while the PTR view is showing) and update immediately when new data is available.
Is there something I'm doing wrong? I have tried running setRefreshing to true by posting a runnable to the SwipeRefreshLayout and fetching new data. I don't think this has got anything to do with the data fetch in particular.
The adapter is not being changed while the blank screen appears (which means that the ListView should still be visible).
Any ideas?
You're removing the view then re-adding it. The adapter should take care of redrawing the new data. Don't remove the view, instead when you refresh the data and its ready, call notifyDataSetChanged() on your adapter.

Categories

Resources