17

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

Community
  • 1
  • 1
Harry Sharma
  • 2,090
  • 1
  • 12
  • 35
  • can you explain your requirement in detail?? you said `Nestedscrollview it should scroll completely to top and same should work towards downside smoothly but it gets stuck in between` but what gets stuck?? is it your `toolbar` or contents inside `nestedScrollView`? – himanshu1496 Jun 30 '16 at 10:09
  • No toolbar is not inside nestedScrollView.There are normal view which are inside it. When i give a fling to Nestedscrollview it should scroll completely to top and Appbarlayout should get completely collapse but here it gets stuck in between.dat means it does not completely scroll to top. – Harry Sharma Jun 30 '16 at 10:16
  • I used [this](https://stackoverflow.com/a/39415170/4510961) and It works perfectly and no external Library needed ;) – jeldrik schmuch Jun 27 '17 at 07:03

2 Answers2

10

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.

Harry Sharma
  • 2,090
  • 1
  • 12
  • 35
  • I tried your solution, but when I remove the layout_behavior, the AppBar disappears... Do you know why? – Raphael Royer-Rivard Nov 15 '16 at 02:18
  • 1
    But what do you mean in your step 2? You said to remove the layout_behavior – Raphael Royer-Rivard Nov 15 '16 at 15:37
  • Oh sorry i miss understood your question..are you using this with nestedscrollview or recyclerview...?? – Harry Sharma Nov 16 '16 at 05:17
  • It's alright, I'm glad you even consider helping me haha. I'm using nestedscrollview – Raphael Royer-Rivard Nov 17 '16 at 22:53
  • Have 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... :) – Harry Sharma Nov 18 '16 at 05:27
  • By header, you mean the paddingTop of its layout child? – Raphael Royer-Rivard Nov 18 '16 at 18:51
  • I also noticed that in the examples of your github, I was missing the SmoothCollapsingToolbarLayout, but adding it did not make the disappeared AppBar reappear. – Raphael Royer-Rivard Nov 19 '16 at 00:49
  • Have 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 hsharma0052@gmail.com... I will make it work... :) Happy – Harry Sharma Nov 20 '16 at 10:45
  • I 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 http://stackoverflow.com/a/40711920/1084822 – Raphael Royer-Rivard Nov 21 '16 at 16:01
  • @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. – Chad Mx Dec 02 '16 at 21:45
  • @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... – Raphael Royer-Rivard Dec 06 '16 at 20:14
  • @RaphaelRoyer-Rivard coz i have implemented with my own behavior..see the working example.it works without any flaw.. – Harry Sharma Dec 08 '16 at 05:07
  • I've been even finished a tutorial related to appbarlayout/nestedscrolllayout, and I want to try the 3rd party library you mentioned. :) – Juan Mendez Dec 12 '16 at 01:41
  • Yeah try it...it will help others too :) – Harry Sharma Dec 12 '16 at 05:18
  • Any other solution apart from using 3rd party library? – Jimit Patel Feb 18 '17 at 12:30
5

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

Eniz Bilgin
  • 101
  • 2
  • 4