Smooth scroll and Fling with NestedScrollView,AppBarLayout and CoordinatorLayout
Solution 1
When i was burning my midnight oil this library came like batman
https://github.com/henrytao-me/smooth-app-bar-layout
According to which the behavior can be improved by following these steps:
1.Change
android.support.design.widget.AppBarLayout
to
me.henrytao.smoothappbarlayout.SmoothAppBarLayout and set android:id
2.Remove
app:layout_behavior="@string/appbar_scrolling_view_behavior"
3.Add header to your NestedScrollView or RecyclerView
Which actually made it to work like charm.
The final setup looks like
<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.v4.widget.NestedScrollView
android:id="@+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="@dimen/app_bar_height">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:text="@string/text_short" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="@string/text_long" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="@+id/smooth_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/ic_menu_arrow_back"
style="@style/AppStyle.MdToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
</android.support.design.widget.CoordinatorLayout>
If you still face any issue while implementing this ask here i would love to help and mark this up if this answer helps.
Solution 2
Use support-library 26.0.1 version.
This problem has been solved by google from the support library after version 26.0.0
https://developer.android.com/topic/libraries/support-library/revisions.html#26-0-1
Comments
-
Harry Sharma almost 2 years
I am working on an application where I'm using AppBarLayout with CollapsingToolbarLayout and NestedScrollView. I have successfully implemented this and it is working fine.
Now what i am trying to do is, that on fling(fast swipe up) on the Nestedscrollview it should scroll completely to top. Similarly, on fling(fast swipe down) towards the bottom of the screen, it must scroll all the way to the bottom smoothly. However now, it only gets stuck in between which makes it look ugly. I have tried many available solutions available here but nothing worked for me. My current setup is below.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:zhy="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:ignore="RtlHardcoded"> <android.support.design.widget.AppBarLayout android:id="@+id/main.appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/main.collapsing" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/placeholder" android:layout_width="match_parent" android:layout_height="246dp" android:scaleType="fitXY" android:tint="#11000000" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.9" /> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" android:padding="10dp"> <FrameLayout android:id="@+id/back_frame" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left|center_vertical" android:paddingBottom="5dp" android:paddingLeft="5dp" android:paddingRight="10dp" android:paddingTop="5dp"> <ImageView android:id="@+id/back_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha" /> </FrameLayout> <FrameLayout android:id="@+id/frameLayoutheart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|center_vertical" android:paddingBottom="5dp" android:paddingLeft="10dp" android:paddingRight="5dp" android:paddingTop="5dp"> <ImageView android:id="@+id/favbtnicon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/heart_profile" /> </FrameLayout> </FrameLayout> <FrameLayout android:id="@+id/main.framelayout.title" android:layout_width="match_parent" android:layout_height="100dp" android:layout_gravity="bottom|center_horizontal" android:orientation="vertical" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.3"> <LinearLayout android:id="@+id/main.linearlayout.title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="top" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal"> <TextView android:id="@+id/profileName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:inputType="textNoSuggestions" android:singleLine="true" android:text="Ankita arora" android:textColor="@android:color/white" android:textSize="25sp" android:textStyle="bold" /> <ImageView android:id="@+id/onlinestatus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="29dp" android:src="@drawable/online" android:visibility="visible" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal"> <TextView android:id="@+id/age" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:inputType="textCapSentences" android:text="asdas" android:textColor="@android:color/white" android:textSize="13sp" /> <TextView android:layout_width="4dp" android:layout_height="4dp" android:layout_gravity="center" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="@drawable/white_dot" /> <TextView android:id="@+id/sex" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:inputType="textCapSentences" android:text="asdas" android:textColor="@android:color/white" android:textSize="13sp" /> <TextView android:id="@+id/loc_point" android:layout_width="4dp" android:layout_height="4dp" android:layout_gravity="center" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="@drawable/white_dot" /> <TextView android:id="@+id/loc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:inputType="textCapSentences" android:text="asdas" android:textColor="@android:color/white" android:textSize="13sp" /> </LinearLayout> </LinearLayout> </FrameLayout> </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:scrollbars="none" app:behavior_overlapTop="10dp" app:layout_behavior="@string/appbar_scrolling_view_behavior" > ------content-------------- </android.support.v4.widget.NestedScrollView> <android.support.v7.widget.Toolbar android:id="@+id/main.toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/pinkColor" android:visibility="invisible" app:contentInsetEnd="0dp" app:contentInsetStart="0dp" app:layout_anchor="@id/main.framelayout.title" app:theme="@style/ThemeOverlay.AppCompat.Dark" app:title=""> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:id="@+id/back" android:layout_width="25dp" android:layout_height="25dp" android:layout_gravity="left|center_vertical" android:layout_marginLeft="4dp" android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha" android:visibility="invisible" /> <Space android:layout_width="@dimen/image_final_width" android:layout_height="@dimen/image_final_width" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginLeft="8dp" android:gravity="center" android:orientation="vertical"> <TextView android:id="@+id/main.textview.title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:text="@string/quila_name2" android:textColor="@android:color/white" android:textSize="20sp" /> <TextView android:id="@+id/status" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:layout_marginTop="-4dp" android:text="@string/quila_name2" android:textColor="@android:color/white" android:textSize="12sp" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.Toolbar> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/profileimg" android:layout_width="@dimen/image_width" android:layout_height="@dimen/image_width" android:layout_gravity="center_horizontal" app:border_color="@android:color/white" app:border_width="2dp" app:finalHeight="@dimen/image_final_width" app:finalYPosition="2dp" app:layout_behavior="com.sdl.apps.yaarri.views.AvatarImageBehavior" app:startHeight="2dp" app:startToolbarPosition="2dp" app:startXPosition="2dp" />
One of the most accepted answers, shown below did not work for me either.
Unable to scroll AppBarLayout and collapsing toolbar with NestedScrollView smoothly
-
Raphael Royer-Rivard over 7 yearsI tried your solution, but when I remove the layout_behavior, the AppBar disappears... Do you know why?
-
Raphael Royer-Rivard over 7 yearsBut what do you mean in your step 2? You said to remove the layout_behavior
-
Harry Sharma over 7 yearsOh sorry i miss understood your question..are you using this with nestedscrollview or recyclerview...??
-
Raphael Royer-Rivard over 7 yearsIt's alright, I'm glad you even consider helping me haha. I'm using nestedscrollview
-
Harry Sharma over 7 yearsHave you added the header..to nestedscrollview..? As i ahve mentioned..If still its unclear..go through the given sample..it works perfectly..I am sure you are missing something... :)
-
Raphael Royer-Rivard over 7 yearsBy header, you mean the paddingTop of its layout child?
-
Raphael Royer-Rivard over 7 yearsI also noticed that in the examples of your github, I was missing the SmoothCollapsingToolbarLayout, but adding it did not make the disappeared AppBar reappear.
-
Harry Sharma over 7 yearsHave you run the samples given at github..?? Run them without making any change...They work perfectly...If still you get problem mail me ur code at [email protected]... I will make it work... :) Happy
-
Raphael Royer-Rivard over 7 yearsI did not... Finally I decided to create my own AppBarLayout.Behavior and apply it to the NestedScrollView. And it works perfectly :) If you are curious, you can go check it at stackoverflow.com/a/40711920/1084822
-
Chad Mx over 7 years@RaphaelRoyer-Rivard Your AppBarLayout disappears because you removed app:layout_behaviour. One of the things this declaration does is to tell your coordinator layout to place your scroll view BELOW your AppBarLayout. Because you have your nestscrollview's height as match_parent, and you removed the behaviour decleration, your AppBarLayout has no room in the parent view.
-
Raphael Royer-Rivard over 7 years@ChadMx Oh I see, that sounds fair. But I still don't understand why Harry Sharma is asking to remove the app:layout_behavior while he still has his NestedScrollView's height as match_parent...
-
Harry Sharma over 7 years@RaphaelRoyer-Rivard coz i have implemented with my own behavior..see the working example.it works without any flaw..
-
Juan Mendez over 7 yearsI've been even finished a tutorial related to appbarlayout/nestedscrolllayout, and I want to try the 3rd party library you mentioned. :)
-
Harry Sharma over 7 yearsYeah try it...it will help others too :)
-
Jimit Patel about 7 yearsAny other solution apart from using 3rd party library?