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
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.