Develop Reference

Paging library when used inside a nestedscrollview loads all data

I am using paging library to load data and populate my recyclerview which is placed inside a nestedscrollview. But it is like, pagination works automatically until all the data fetched from API. I know this is because of the nestedscrollview. But unfortunately my layout needs scrollview as i have a top section other than recyclerview in this fragment.
This is my layout
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
//have a layout here which scrolls with recyclerview
<Recyclerview />
</ConstraintLayout>
</NestedScrollView>
Everything works fine when i do not use nestedscrollview. There is an open issue in googlesamples git repo regsrding this problem.
https://github.com/googlesamples/android-architecture-components/issues/215
Is anyone have idea how can we implement pagination when a recyclerview is inside a scrollview with pagination library from Android jetpack. I know we can implement traditional kind of pagination attaching listener to nestedscrollview, but i am looking to implement pagination with architecture component library.
https://developer.android.com/topic/libraries/architecture/paging/

Using the below code will solve the issue.
Here is the view hierarchy:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar_layout"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Put here elements that you need above the recycler view -->
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- RecyclerView -->
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:scrollbars="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Note: Be sure that you have given id to CoordinatorLayout and AppBarLayout so that it will retain scroll position on the back stack.

The problem is recyclerview inside nested scrolview. Paging library has nothing to do with it. The behavior would be same if you try to load data on scroll listener of recyclerview.

The paging library does not work well with nestedScroolView. So you have to change your NesteScrollView to ScroolView with android:nestedScrollingEnabled="true", something like this:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
//have a layout here which scrolls with recyclerview
<Recyclerview />
</ConstraintLayout>
</ScrollView>

How to fix footer properly which is inside CoordinatorLayout

I tend to further elaborate from this
Android - footer scrolls off screen when used in CoordinatorLayout
and
https://code.google.com/p/android/issues/detail?id=177195
I wish to hide TabLayout while performing scrolling on RecyclerView. That's why I have the following layout.
<CoordinatorLayout>
<CollapsingToolbarLayout>
<TabLayout>
<ViewPager>
<RecyclerView>
<Footer>
For my situation, I have a ViewPager which contains multiple fragments.
Most of the fragments, contains RecyclerView and footer. They look like the following
<LinearLayout>
<RecyclerView />
<LinearLayout id="#+id/footer" />
</LinearLayout>
Unfortunately, the footer is movable when scrolling, although I would like it to be static.
Note, it is important to have app:layout_behavior to place in ViewPager instead of RecyclerView. If not, TabLayout will not appear.
My implementation is as follow
my_fragment.xml
<?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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="?attr/portfolioTabIndicatorColor" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="org.yccheok.xxx.CustomScrollingViewBehavior"
/>
</android.support.design.widget.CoordinatorLayout>
The very key class is org.yccheok.xxx.CustomScrollingViewBehavior, which is copied and pasted from https://stackoverflow.com/a/33396965/72437
org.yccheok.xxx.CustomScrollingViewBehavior is the best solution I can find so far. However, it is far from perfect, as it yields the following behavior.
It causes flickering, when you scroll up a little, and release your finger. Please refer to the following video.
https://youtu.be/8RvCZJeQvS0
I was wondering, based on proposed solution at https://stackoverflow.com/a/33396965/72437, is there any further improvement I can done on CustomScrollingViewBehavior class, to avoid flickering effect?

I was able to achieve what I want, by following tutorial at
https://mzgreen.github.io/2015/02/15/How-to-hideshow-Toolbar-when-list-is-scroling%28part1%29/
http://mzgreen.github.io/2015/02/28/How-to-hideshow-Toolbar-when-list-is-scrolling%28part2%29/
The key ideas are
Don't use CoordinatorLayout
Place TabLayout and RecyclerView within FrameLayout, so that TabLayout will overlay on the top of RecyclerView
Add top padding on RecyclerView. Having android:clipToPadding="false" is important as well.
To hide/ show TabLayout during scrolling, attach HidingScrollListener to RecyclerView.
The shortcoming for this solution is that, requiresFadingEdge will no longer work on RecyclerView, due to the top padding.

Scroll second child in AppBarLayout

I'm trying to obtain this effect where if the user scroll a RecyclerView a certain layout scroll up together with the recycler and disappear behind a Toolbar.
A similar behavior could be obtained using the CoordinatorLayout, this would be possible by setting
app:layout_behavior="#string/appbar_scrolling_view_behavior"
on the said Recycler, and doing
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
Also, If I put a second child inside the AppBarLayout, and set app:layout_scrollFlags to it, the effect obtained is the same, with both layout scrolling together with the Recycler.
What I'm trying to achieve is to keep the first child (The toolbar) fixed in position, and let the second child (a LinearLayout) to scroll and hide behind the toolbar. Unfortunately I couldn't get to this behavior.
Is it possible without using 3rd part library?
Thanks in advance and sorry for my english.

Finally I figured out a way to achieve this behavior, by including the CoordinatorLayout in an LinearLayout and making the second child(LinearLayout) become the first, by moving the Toolbar to the extrnal(root) level
Hierarchy before:
<CoordinatorLayout>
<AppBarLayout>
<ToolBar>
<LinerarLayout>
Hierarchy after:
<LinearLayout>
<ToolBar>
<CoordinatorLayout>
<AppBarLayout>
<LinearLayout>
An exmaple:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="48dp" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorSecondaryLight"
android:orientation="vertical"
app:layout_scrollFlags="scroll"/>
</com.google.android.material.appbar.AppBarLayout>
.
.
.
.
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
Hope that helps!

android Place content below toolbar

I have this layout:
<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/coordinatorLayout"
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"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_favorite_outline_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
Setting #string/appbar_scrolling_view_behavior attribute shifts the RecyclerView by the height of the Toolbar.
But what if I need the first element of the RecyclerView to be aligned to the status bar.
I want the Toolbar to cover (be above) the first element.
In other words, I don't want any offset which #string/appbar_scrolling_view_behavior behaviour entails.
Could you please tell me how to do that?

I had the same problem and I just wrapped the AppbarLayout and the rest of my views (in your case the recyclerview) in a RelativeLayout and it works fine. I don't know if there are any downsides with that approach.

The offset is not by #string/appbar_scrolling_view_behavior behaviour it's due to AppBarLayout it pushes the content down.
I'm not sure if there is any other better solution. But I'd suggest to remove the AppBarLayout to have your content go under the Toolbar. Moreover you might be need the scrolling behaviour for that you can check the library below.
It's been used by lots of apps like Jair Music Player even WhatsApp too uses it.
Library:
Android Observable Scroll View

Nested scrollview inside gridview place is taking only somepart

I have:
1.Coordinator layout
2.appbar layout (child of Coordinator layout)
3.Collapsing toolbar layout (child of app bar)
4.NestedScrollView (child of coordinator)
I want to put a grid view inside NestedScrollView so that user can scroll over the entire screen space.
My problem is that currently the gridview occupies a small portion of the NestedScrollView and not full space of NestedScrollView and scrolls inside that portion,like in this image:
As you can see my gridview height is limited upto only that highlighted portion in sky blue color, i want that to occupy the entire screen space below that image(which is my Collapsing toolbar).i tried different ways but nothing works out.
my xml file is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/app_bar"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="196dp"
android:background="#3f51b5"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/index"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:id="#+id/gridView"
android:verticalSpacing="1dp"
android:horizontalSpacing="1dp"
android:numColumns="2"
android:stretchMode="columnWidth"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />

GridView already has scrolling built in, so it conflicts with a NestedScrollView. You should be using a RecyclerView with a GridLayoutManager and appbar_scrolling_view_behavior layout behavior in place of the NestedScrollView.

well i had the same issue , the following worked for me.
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">

It is true, that GridView conflicts with the NestedScrollView and the correct solution would be to use the RecyclerView, but I needed a quick workaround with such setup and came across a solution using a custom class extending the GridView:
https://gist.github.com/jiahuang/2591977
Then you just have to replace your GridView with the custom class and set the parameter of NestedScrollView as in Apoorv's answer:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">

Apoorv Singh's answer helped me, but not fully. You can put a GridView inside a NestedScrollView, but only the 1st row will show up. You need to add the android:fillViewport="true" inside the NestedScrollView definition in order for everything to display properly.
But, when I scroll down, it doesn't scroll past the bottom of the screen. I have a grid with 10 rows, there are multiple rows not on screen, but I cannot scroll down to view them now.
Answer:
This worked for me now. Use RecyclerView with GridLayoutManager instead of GridView. As Recycler view is compatible with Collapsing toolbar as well. And when you use RecyclerView inside NestedScrollView, it works well. Everything sizes correctly, as well as scrolls correctly.

Inside NestedScrollView add this one line code
android:fillViewport="true"