Scroll stuttering while using coordinator layout with recyclerview - android

I'm having a problem with Coordinatorlayout and ViewPager implementation.
In order to reproduce this you have to scroll down vigorously and while it's still happening try to scroll the list of items up - a sort of shaky stutter effect can be visible as if CoordinatorLayout was trying to scroll the view in separate direction than its child (RecyclerView).
You can view my layout here:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:id="#+id/headerContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabControl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="4dp"
app:tabMaxWidth="500dp">
</android.support.design.widget.TabLayout>
<LinearLayout
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="vertical"
android:visibility="gone" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Just to provide some further details:
headerContainer contains ConstraintLayout with some stuff like bunch of textviews, button - pretty usual.
tabContainer contains LinearLayout with list of items (recyclerview)

Add this to the recyclerView in the fragment of your ViewPager..
recyclerView.setNestedScrollingEnabled(false);
This is happening because of the app:layout_behavior="#string/appbar_scrolling_view_behavior" behavior of the viewpager.. this is causing the nestedScrolling.. that is why you feel the shaky effect..

Add this line to your RecyclerView
Recyclerview.setNestedScrollingEnabled(false);

Related

Why ViewPager doesn't scroll inside CoordinatorLayout?

What im trying to do?
Hello, I am trying to develop the view of a user profile in my Android application, for this I am using a CoordinatorLayout, in it, I am introducing a RecyclerView as a scrolleable element.
My actual problem
The problem is that although my RecyclerView activates the CoordinatorLayout when it is scrolled, if in each ViewHolder within my RecyclerView I add a ViewPager and try to scroll from it my CoordinatorLayout doesn't work.
What have I tried before?
At the beginning my RecyclerView was embedded in a fragment, which I thought to reuse in several views but seeing that it did not work I simplified it by taking my RecyclerView out of the fragment and adding it to my CoordinatorLayout as its direct child.
Some time later after reading various articles on StackOverflow I tried wrapping my RecyclerView with a NestedScrollView but that didn't work either.
Coordinator Layout with nested Recycler View:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:background="#3F51B5"
android:fitsSystemWindows="true"
android:theme="#style/Theme.CoordinatorQuestion.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.CoordinatorQuestion.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#673AB7"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".ScrollingActivity" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Post View Holder inside Recycler View:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purple_200"
android:orientation="vertical"
android:paddingTop="40dp">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#9C27B0"
/>
<View
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="40dp" />
</androidx.appcompat.widget.LinearLayoutCompat>
Media View Holder inside ViewPager2 (If you try to scroll pressing the image, CoordinatorLayout does not move):
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.AppCompatImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#drawable/ic_launcher_background"
android:src="#drawable/ic_launcher_foreground" />
Some util info
Here is a video in which I visually show my problem: https://github.com/RafaelAmoMoralDev/CoordinatorQuestion/blob/main/coordinatorquestion.mp4?raw=true
And here is the repository in which if you wish you can download a small project in which to see a sample code of my problem: https://github.com/RafaelAmoMoralDev/CoordinatorQuestion
¡Thanks in advance!

RecyclerView inside NestedScrollView inside CoordinatorLayout

I have such layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_margin="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/avatar_placeholder"
/>
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_marginLeft="20dp"
android:id="#+id/list"
android:orientation="horizontal"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
As you can see there are CoordinatorLayout with NestedScrollView inside it. And inside of the NestedScrollView there are horizontal RecyclerView. So this layout behaves as follows:
As one can see, problem is in RecyclerView. When I drag it up, Toolbar doesn't hide. In the same time when I dragging up the ImageView Toolbar hides. How to fix that?
did you enable nested scrolling on your recycler ?
recylcer.nestedScrollingEnabled(true)
I had a pretty similar problem, but my recycler was vertical, you can refer to my answer here : Here

Recycler view Inside NestedScrollView with CoordinatorLayout

Below is the code snippet, can someone please help me? My collapsing toolbar is not collapsing at all. Intended behavior is : as I scroll up, the toolbar should collapse from 168dp to 56dp. But it is not collapsing at all.
Thanks in advance.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/one_primaryColor"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="168dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
app:layout_collapseMode="pin">
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:contentDescription="#string/app_name"
app:layout_collapseMode="parallax"
android:src="#drawable/logo" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView...
EDIT:
I played with your layout. You have to use NestedScrollView in order to make your layout follow scroll behavior of CollapsingToolbarLayout. Following is the working xml code:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/one_primaryColor">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="168dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/logo" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
But there is an issue with this approach. If you put RecyclerView inside NestedScrollView when root parent is CoordinatorLayout. Recycler's content won't be displayed, although all the adapter methods are called. Reason behind is the nesting of scroll layout inside scroll. Most probably Recycler's layout is not rendered due to this reason. For that, work around has been followed from this post.
In your code, use WrappingLinearLayoutManager class as layout manager for recycler view.
//Your custom adapter
Adapter adapter = new Adapter(cursor);
adapter.setHasStableIds(true);
mRecyclerView.setAdapter(adapter);
mRecyclerView.setNestedScrollingEnabled(false);
int columnCount = getResources().getInteger(R.integer.list_column_count);
WrappingLinearLayoutManager wrappingLinearLayoutManager =
new WrappingLinearLayoutManager(columnCount, LinearLayout.VERTICAL);
mRecyclerView.setLayoutManager(wrappingLinearLayoutManager);
This should solve your problem. If it still doesn't work, I can upload it somewhere for you.
Just in case anybody else bumped into the same problem, I'm gonna post the solution to my issue. The problem was with the support-library version, I was using 22.0.0. In this version, the SwipeRefreshLayout does not support CollapsibleToolbar behavior, it was a bug that got resolved in the 23.0 version. So, I updated my support - libaries to 23.0.0 and it got resolved! yeay!

implementing a custom behavior on recyclerview inside coordinatorlayout

I have 3 views in my layout file with CoordinatorLayout as the root view : AppbarLayout, RecyclerView and a Footer(not visible all the time). Recyclerview implements the default behavior appbar_scrolling_view_behavior, that ideally, brings recyclerview below the appbarlayout. But the recyclerview and footer overlap. To Prevent that, I had to write a custom behavior so that when footer is visible, Recyclerview should make space for the footer. But now, the default behavior of appbar_scrolling_view_behavior is gone and now appbarlayout and recyclerview overlap.Here is the Image of the layout
Link to the custom behavior i implemented:
https://github.com/Mandeep221/CustomBehaviorForRecyclerview/blob/master/CustomBehavior.java
My Question: How can i implement 2 things(simultaneously in one behavior):
get the recyclerview below the appbarlayout inside the co-ordinatorlayout
get the recycelerview to make space for the footer if the footer is visible.
If you can suggest some workaround, that would also be great! Thanks alot!
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:scrollbars="vertical"
app:layout_behavior="prokure.it.prokure.Search.NewSearch.CustomBehavior" />
<prokure.it.prokure.FooterBarLayout
android:id="#+id/footerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//footer child views
</LinearLayout>
</prokure.it.prokure.FooterBarLayout>
</android.support.design.widget.CoordinatorLayout>
Don't keep the android.support.design.widget.CoordinatorLayout as root layout.
Add a RelativeLayout as a root layout. Then add android.support.design.widget.CoordinatorLayout with property layout_alignParentTop and layout_above="#+id/footerBar" and set prokure.it.prokure.FooterBarLayout as align parent bottom as second child of RelativeLayout.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/footerBar">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:scrollbars="vertical"
/>
</android.support.design.widget.CoordinatorLayout>
<prokure.it.prokure.FooterBarLayout
android:id="#+id/footerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//footer child views
</LinearLayout>
</prokure.it.prokure.FooterBarLayout>
</RelativeLayout>
Another simpler way is to add following lines to your prokure.it.prokure.FooterBarLayout
app:layout_anchor="#id/list_recycler_view"
app:layout_anchorGravity="bottom"
and keep prokure.it.prokure.FooterBarLayout inside coordinator layout.
Make sure to add an empty cell at the end of the recycler view so that prokure.it.prokure.FooterBarLayout does not overlap with last cell of RecyclerView.

CoordinatorLayout inside ViewPager inside CoordinatorLayout scrolling issue

I have an outer CoordinatorLayout that has, as AppBar, the Toolbar and a TabLayout bar and, as content, a ViewPager with appbar_scrolling_view_behavior:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:id="#+id/main_content"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".MainActivity" >
<android.support.design.widget.AppBarLayout android:id="#+id/appbar"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways|snap">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout android:id="#+id/tabs"
android:layout_width="match_parent" android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager android:id="#+id/container"
android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton android:id="#+id/fab"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="end|bottom" android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
When a tab is selected, the ViewPager is updated with a FrameLayout containing another CoordinatorLayout.
This one should display a collapsable Google Map fragment on top of a RecyclerView (showing a vertical list of items).
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:id="#+id/nearby_content"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".MainActivity" >
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<fragment
android:id="#+id/mapFragment"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_overlapTop="184dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
The expected behavior is that when the user touches inside the map, the map itself should receive the gesture and therefore pan the view.
While if the user scrolls upwards starting the gesture from inside the visible part of the list, the list (RecyclerView) should slide over the collapsing Map, until the AppBar is reached. At that point further scrolling up should slide only the list.
The problem arises when the gesture is not too much slow: part of the scrolling (roughly the equivalent of the TabLayout height) is consumed by the RecyclerView before it reaches the AppBar.
Also, after scrolling all the way up the list, scrolling down first expands the map and then slides the list (leaving the first part of the list hidden), when it should do the viceversa.
Before scrolling up
After scrolling all the way up and down a bit
I'm not very sure about the answer but you can try adding android:nestedScrollingEnabled="false" inside your recycler view:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_overlapTop="184dp"
android:nestedScrollingEnabled="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Hope it helps.

Categories

Resources