NestedScrollview + Coordinator Layout + SmartTabLayout having viewpager with fragments scroll infinite issue

Question

Below are two images for strange behaviour

NestedScrollview has infinite space and it scrolls and scrolls

<android.support.v4.widget.NestedScrollView 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="wrap_content"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_gravity="fill_vertical">


<android.support.design.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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:descendantFocusability="blocksDescendants">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        tools:ignore="ExtraText">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_top"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:titleTextColor="@color/theme_color" />


        <android.support.v7.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/cardviewLogin"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            app:cardCornerRadius="@dimen/eighteen_dp"
            app:cardUseCompatPadding="true">


            <io.tnine.lifehacks_.customviews.MyTabLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/viewpagertab"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/tab_height_"
                android:clipToPadding="false"
                android:paddingLeft="4dp"
                android:paddingRight="4dp"
                app:stl_defaultTabTextColor="@color/select_color"
                app:stl_defaultTabTextHorizontalPadding="18dp"
                app:stl_defaultTabTextSize="@dimen/sixteen"
                app:stl_dividerColor="@color/transparent_black_hex_11"
                app:stl_dividerThickness="0dp"
                app:stl_indicatorColor="@color/tab_background"
                app:stl_indicatorCornerRadius="18dp"
                app:stl_indicatorGravity="center"
                app:stl_indicatorInterpolation="smart"
                app:stl_indicatorThickness="36dp"
                app:stl_underlineColor="@color/transparent_black_hex_11"
                app:stl_underlineThickness="0dp" />

        </android.support.v7.widget.CardView>


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.NestedScrollView>

This is the xml layout file.What i want to achieve is that when the user scrolls the recyclerview in one of the fragment contained in viewpager the whole screen should autoscroll that is happening by the way but the nestedscrollview scrolls and scrolls. Kindly help.

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

It's probably because you are using NestedScrollView outside the CoordinatorLayout.

Try using NestedScrollView inside the CoordinatorLayout and ViewPager inside the NestedScrollView.

CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout is intended for two primary use cases:

As a top-level application decor or chrome layout

As a container for a specific interaction with one or more child views

https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout

Take a look: ViewPager in a NestedScrollView

score 0 · Answer 2 · answered Aug 06 '18 at 12:35

You can make this work without using NestedScrollView .

Use the code below:

<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/whiteColor">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/tab_background"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar_top"
                    android:layout_width="match_parent"
                    android:layout_height="?android:attr/actionBarSize"
                    app:elevation="0dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:titleTextColor="@color/theme_color" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_margin="@dimen/fourDp"
                    android:orientation="horizontal"
                    android:padding="@dimen/fourDp">

                    <ImageView
                        android:id="@+id/batman"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:gravity="center_horizontal"
                        android:padding="@dimen/ten_dp"
                        android:text="@string/sign_in"
                        android:textSize="@dimen/sixteen" />

                    <ImageView
                        android:id="@+id/google"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_vertical" />

                </LinearLayout>

            </LinearLayout>
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.v7.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="@dimen/eighteen_dp"
            app:cardUseCompatPadding="true">

            <io.tnine.lifehacks_.customviews.MyTabLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/viewpagertab"
                android:layout_width="match_parent"
                android:layout_height="@dimen/tab_height_"
                android:clipToPadding="false"
                android:paddingLeft="4dp"
                android:paddingRight="4dp"
                app:stl_defaultTabTextColor="@color/select_color"
                app:stl_defaultTabTextHorizontalPadding="18dp"
                app:stl_defaultTabTextSize="@dimen/sixteen"
                app:stl_distributeEvenly="true"
                app:stl_dividerColor="@color/transparent_black_hex_11"
                app:stl_dividerThickness="0dp"
                app:stl_indicatorColor="@color/tab_background"
                app:stl_indicatorCornerRadius="18dp"
                app:stl_indicatorGravity="center"
                app:stl_indicatorInterpolation="linear"
                app:stl_indicatorThickness="@dimen/fortydp"
                app:stl_underlineColor="@color/transparent_black_hex_11"
                app:stl_underlineThickness="0dp"
                app:tabGravity="fill"
                app:tabMode="scrollable" />
        </android.support.v7.widget.CardView>

    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </android.support.design.widget.CoordinatorLayout>

But this will not make your CollapsingToolbarLayout collapse. For that you should add the following code in your RecyclerView .

 hacksRecycler.isNestedScrollingEnabled = true

set nestedscrolling to true and Voila..!!

NestedScrollview + Coordinator Layout + SmartTabLayout having viewpager with fragments scroll infinite issue

2 Answers2