Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Abrupt scrolling with NestedScrollView in ViewPager Fragment inside a CoordinatorLayout Android

I am facing a major scrolling problem with ViewPager inside CoordinatorLayout.

The current scene:

  1. app:appbarScrollingViewBehaviour is set on ViewPager.
  2. The ViewPager fragment has NestedScrollView as its root parent.
  3. The fragment layout contains Horizontal RecyclerView.
  4. When I scroll up by touching over RecyclerView, the app bar doesn't scroll, instead only nested scrolling occurs.
  5. When I scroll by touching rest of the view, the CoordinatorLayout scrolls. 6) Also the nested scrolling stops midway and cuts off the content.

What I have tried already:

  1. Putting ViewPager inside NestedScrollView and set app:appbarScrollingViewBehaviour attribute to NestedScrollView. This completely cuts off the fragment content as RecyclerView cannot decide its height.
  2. Setting setAutoMeasureEnabled(true) on RecyclerView, still not able to fix height.
  3. And many other approaches.

    Please help with this issue. The current behavior can be seen in uploaded .gif. I am also posting my code for Activity layout and fragment layout and RecyclerView row layout.

Thank you

activity.xml:

<android.support.design.widget.CoordinatorLayout  
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:Customs="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/new_color_primary_skim">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/transparent">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:elevation="0dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:minHeight="?attr/actionBarSize">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_height="?attr/actionBarSize">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center_vertical"
                    android:src="@drawable/ic_arrow_back" />



   <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal"
                    android:gravity="center_vertical"
                    android:text="Workout"
                    android:textColor="#FFFFFF"
                    android:textSize="19sp"
                    android:textStyle="bold"
                    Customs:font="LatoRegular.ttf" />
            </FrameLayout>

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


            <com.github.mikephil.charting.charts.LineChart
                android:id="@+id/workout_insights_graph"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_below="@+id/toolbar"
                app:layout_scrollFlags="scroll|snap"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_collapseMode="parallax"
                android:animateLayoutChanges="true" />

            <com.fitsquare.app.fitsquare.Entity.Customs.SlidingTabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_below="@+id/diet_insights_graph"
                android:layout_height="50dp"
                android:layout_gravity="bottom"
                android:background="@color/transparent" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|top"
            android:layout_marginRight="-50dp"
            android:layout_marginTop="-50dp"
            android:src="@drawable/workout_translucent" />

    </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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_height="wrap_content">
      </android.support.v4.view.ViewPager>


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

pager_fragment.xml:

<?xml version="1.0" encoding="utf-8"?>


<android.support.v4.widget.NestedScrollView    
xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:Customs="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingLeft="7dp"
        android:paddingRight="7dp"
        android:paddingTop="10dp">


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


            <LinearLayout
                android:layout_width="100dp"
                android:layout_height="4dp"
                android:layout_marginTop="10dp"
                android:alpha="0.5"
                android:background="@drawable/round_gray_dark"
                android:orientation="horizontal"></LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">


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


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal">


   <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Target Calories to burn : "
                            android:textColor="@color/white"
                            android:textSize="14sp"
                            Customs:font="LatoRegular.ttf" />



<com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="2300"
                            android:textColor="@color/white"
                            android:textSize="14sp"
                            android:textStyle="bold"
                            Customs:font="LatoRegular.ttf" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal">



 <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Burned calories : "
                            android:textColor="@color/white"
                            android:textSize="14sp"
                            Customs:font="LatoRegular.ttf" />


   <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="2300"
                            android:textColor="@color/white"
                            android:textSize="14sp"
                            android:textStyle="bold"
                            Customs:font="LatoRegular.ttf" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal">


    <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Total workout time : "
                            android:textColor="@color/white"
                            android:textSize="14sp"
                            Customs:font="LatoRegular.ttf" />



   <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="20 mins"
                            android:textColor="@color/white"
                            android:textSize="14sp"
                            android:textStyle="bold"
                            Customs:font="LatoRegular.ttf" />
                    </LinearLayout>


                </LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="100dp"
                android:layout_height="4dp"
                android:layout_marginTop="10dp"
                android:alpha="0.5"
                android:background="@drawable/round_gray_dark"
                android:orientation="horizontal"></LinearLayout>
        </LinearLayout>


        <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
            android:id="@+id/textView27"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Today"
            android:textColor="@color/white"
            android:textSize="21sp"
            Customs:font="LatoRegular.ttf" />

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="4dp"
            android:layout_marginTop="5dp"
            android:alpha="0.5"
            android:background="@drawable/round_gray_dark"
            android:orientation="horizontal"></LinearLayout>


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

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
      </android.support.v7.widget.RecyclerView>


            <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                android:id="@+id/textView31"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tomorrow"
                android:textColor="@color/white"
                android:textSize="21sp"
                Customs:font="LatoRegular.ttf" />

            <LinearLayout
                android:layout_width="100dp"
                android:layout_height="4dp"
                android:layout_marginTop="5dp"
                android:alpha="0.5"
                android:background="@drawable/round_gray_dark"
                android:orientation="horizontal"></LinearLayout>


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


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:orientation="horizontal">


       <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Target Calories to burn : "
                        android:textColor="@color/white"
                        android:textSize="14sp"
                        Customs:font="LatoRegular.ttf" />


      <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="2300"
                        android:textColor="@color/white"
                        android:textSize="14sp"
                        android:textStyle="bold"
                        Customs:font="LatoRegular.ttf" />
                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:orientation="horizontal">


      <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Total workout time : "
                        android:textColor="@color/white"
                        android:textSize="14sp"
                        Customs:font="LatoRegular.ttf" />


      <com.fitsquare.app.fitsquare.Entity.Customs.CustomFontTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="20 mins"
                        android:textColor="@color/white"
                        android:textSize="14sp"
                        android:textStyle="bold"
                        Customs:font="LatoRegular.ttf" />
                </LinearLayout>
            </LinearLayout>

        </LinearLayout>
    </LinearLayout>

  <!--  <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:src="@color/transparent" />-->
</FrameLayout>

</android.support.v4.widget.NestedScrollView>
like image 730
Prince Bansal Avatar asked May 11 '16 19:05

Prince Bansal


1 Answers

I found the solution and solved the problem myself. As the horizontal RecyclerView was a child of Nested Scroll View, it wasn't transferring scroll events to CoordinatorLayout. I just solved it by disabling nested scrolling using this line of code.

recyclerView.setNestedScrollingEnabled(false);

like image 74
Prince Bansal Avatar answered Sep 27 '22 22:09

Prince Bansal