When the header is collapsed and we remove items in the RecyclerView and we scroll back to the top, the header still appears collapsed with the empty space created by the item. We need to scroll twice to make the header appear again.

Would it be possible to achieve to make the header follow the new height of the RecyclerView after a item removal ?

I'm using a RecyclerView with android:clipToPadding="false" and android:paddingTop="@dimen/image_height"

@henrytao-me Thanks so much for this amazing and useful library!

Hi,

The Smooth app bar has a scroll problem when the row height of the recyclerview items are animated. The problems appears for the Enter Always scroll-mode, where the appbar exits completely and only enters when recyclerview is scrolled to the top.

I have created a branch with sample code which illustrates the problem (more on this below): https://github.com/arberg/smooth-app-bar-layout/tree/debug_appbar_scroll_on_layout_change

I can reproduce the problem like this:

• Expand the height of the top row in onClickListener by animating from normal small size to eg. 2x screen size. I set update layoutHeight and run requestLayout on each frame.
• After expansion I scroll down to bottom part of top row, so appbar scrolls completely out of view.
• Shrink the top row again
• Scoll up to top:
  Problem: Now appbar does not appear immediately but I have to scroll further, to make appbar appear.

The problem can also be reproduced in another way, which perhaps illustrates the root cause. Instead of animating the rows I just expand immediately onBind. If the expanded state is cached in adapter, then the appbar behaves correctly. If the expanded state is not cached in adapter, so that when an expanded view is reused it will still be expanded, then it causes problems.

• Expand top row, in onclicklistener
• Scroll down until the top viewholder is reused and an expanded row comes into view
• click expanded row to shrink it
• scroll up to top again
  Problem: Again appbar does not appear immediatly after reating top row.

Sample code is here
https://github.com/arberg/smooth-app-bar-layout/tree/debug_appbar_scroll_on_layout_change

In SimpleAdapter set
ENABLE_ANIMATION = true;
ENABLE_CACHED_STATE = true;
to get 1. mentioned animated behavior.

Set both to false, to get the second mentioned behavior.

PS: I changed build.gradle a bit for minSdk for animation and debugVariant so I could debug.
PPS: Click 'Enter Always' to and follow guide above to reproduce problems. For |enterAlwaysCollapsed quick return, then the problem is visible also then reaching top row.

Best Alex

Hi. I noticed some small issues.

First, the app_name string resource should be removed from the library module in order to avoid same resource name conflictions.

Second, <application> tag in AndroidManifest.xml of the library module should be removed also. It will conflict with user application and we need to specify tools:replace="android:label" in user app's AndroidManifest.xml.

Thanks.

Hi! Would love to see a example of a parallax header with a viewpager and tabs.

Best regards, Ali.

Well, i run ViewPager + Tabs + ToolBar example .. worked nice .
but all ViewPager content is RecyclerView with a header to hold the position.
I just try to use Android-PullToRefresh or android-Ultra-Pull-To-Refresh ..if add a header to RecyclerView it will effect the refreshLayout position..
However,google support design package appbarlayout support it all well ..just some scrolling tricks..
Can this library will support the widget?

Hello.

I think, it will be nice to use text scaling like in default implementation of CollapsingToolbarLayout instead of setTextSize in SmoothCollapsingToolbarLayout. Current implementation leads to text jerks.
There is a helper class (CollapsingTextHelper) that handle it in the design library.

Thanks for useful library.

Is there any sample to use this via scroll view? How to add header to scrollview?
Thanks

Currently if we are using a SwipeRefreshLayout, our SmoothAppBarLayout is not moving. It could be cool to add this support.

What do you think?

Hi, I am using this library to make my app bar smooth but after implementing the same code, my view pager is static and it is not scrolling. Even my CollapsingToolbarLayout is not scrolling now.

Below is the XML code I used:

<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:layout_width="match_parent"
    android:fitsSystemWindows="@bool/isFitSystemWindows"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager_hotel"
        android:layout_width="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_height="match_parent" />

    <LinearLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:orientation="vertical"
        app:layout_anchor="@id/pager_hotel"
        app:layout_anchorGravity="bottom">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:id="@+id/txt_data1"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dimen_45"
            android:background="@android:color/white"
            android:gravity="center"
            android:text="@string/dash"
            android:textColor="@color/textColorPrimary"
            android:textSize="@dimen/font_20" />

        <Button
            android:id="@+id/btn_book"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dimen_45"
            android:background="@drawable/selector_red_button"
            android:gravity="center"
            android:text="@string/dash"
            android:textColor="@android:color/white"
            android:textSize="@dimen/font_20" />

    </LinearLayout>

    <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="@bool/isFitSystemWindows"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="@bool/isFitSystemWindows"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/img_hotel"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@null"
                android:fitsSystemWindows="@bool/isFitSystemWindows"
                android:scaleType="fitXY"
                android:src="@drawable/ic_launcher"
                app:layout_collapseMode="parallax" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@color/colorPrimary"
                android:elevation="@dimen/dimen_8"
                app:tabMode="fixed" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>

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

I used the same ViewPagerRunnableAdapter and below is one of my fragment code that I used in adapter:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nsv_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="fill_vertical"
    android:fillViewport="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="@dimen/dimen_10">

        <TextView
            android:id="@+id/txt_hotel_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/dash"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/textColorPrimary" />

        <com.ms.square.android.expandabletextview.ExpandableTextView
            android:id="@+id/expand_text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_5"
            app:animDuration="200"
            app:maxCollapsedLines="4">

            <TextView
                android:id="@id/expandable_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="@dimen/font_12"
                android:textColor="@color/textColorPrimary" />

            <ImageButton
                android:id="@id/expand_collapse"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|bottom"
                android:background="@android:color/transparent"
                android:contentDescription="@null"
                android:padding="@dimen/dimen_20" />
        </com.ms.square.android.expandabletextview.ExpandableTextView>

        <LinearLayout
            android:id="@+id/ll_hotel_facilities"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_marginTop="@dimen/dimen_10"
            android:gravity="center"
            android:orientation="vertical">

            <!--<View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@android:color/darker_gray" />-->

            <TextView
                android:id="@+id/txt_hotel_facilities"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/dash"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/textColorPrimary"
                android:textStyle="bold" />

            <LinearLayout
                android:id="@+id/ll_hotel_facilities_data"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />

        </LinearLayout>

        <View
            android:layout_width="0dp"
            android:layout_height="@dimen/dimen_90" />

    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

And the Java code:

public class HotelDescriptionChildFragment extends HotelDetailBaseFragment
        implements
        ObservableScrollView {

    private TextView mTxtHotelName;
    private ExpandableTextView mTxtHotelDescription;
    private TextView mTxtHotelFacilities;
    private LinearLayout mLlHotelFacilities;
    private LinearLayout mLlHotelFacilitiesData;

    private NestedScrollView mParentView;

    /**
     * Returns new instance of this fragment
     *
     * @return HomeFragment instance.
     */
    public static HotelDescriptionChildFragment newInstance() {
        return new HotelDescriptionChildFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_child_hotel_description, container, false);

        mParentView = (NestedScrollView) view.findViewById(R.id.nsv_scroll_view);

        mTxtHotelName = (TextView) view.findViewById(R.id.txt_hotel_name);
        mTxtHotelDescription = (ExpandableTextView) view.findViewById(R.id.expand_text_view);
        mTxtHotelFacilities = (TextView) view.findViewById(R.id.txt_hotel_facilities);
        mLlHotelFacilities = (LinearLayout) view.findViewById(R.id.ll_hotel_facilities);
        mLlHotelFacilitiesData = (LinearLayout) view.findViewById(R.id.ll_hotel_facilities_data);

        loadLocalLabels();

        return view;
    }

    @Override
    public void loadLocalLabels() {
        mTxtHotelFacilities.setText(mDbHelper.getTranslationValue(TranslationConstants.ht_facilities));
    }

    /**
     * Returns a view with divider line
     *
     * @return divider view.
     */
    private View getDividerView() {
        LinearLayout dividerLayout = new LinearLayout(mContext);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        params.setMargins(10, 5, 10, 5);
        dividerLayout.setLayoutParams(params);
        dividerLayout.setBackgroundColor(ContextCompat.getColor(mContext, android.R.color.darker_gray));
        dividerLayout.setPadding(0, 0, 0, 1);

        return dividerLayout;
    }

    @Override
    public View getScrollView() {
        if (isAdded())
            return mParentView;
        return null;
    }
}

I tried to debug the code and getScrollView() always returned null.
Can you please help in this?
Thanks.

Implementing ViewPager is quite tricky.

Step:

• Checkout example Smooth ViewPager
• Scroll 1st page to x offset
• Move to 2nd page, scroll to y offset
• Back to 1st page, scroll down
• It should not move AppBarLayout down.

However, thing is more complicated when you just scroll half of AppBarLayout. What should AppBarLayout move when you scroll up and down after switching tab?

Hi, I would like to know is there any posibility to use spacing header out of adapter because I have adapter which has already sticky headers and I cant add extra spacing header. Even I add in XML Layout it is not working. Thanks man ;)

Hello,

i am trying to not fully expand my smoothappbarlayout. reason: my imageview inside collapsingtoolbarlayout can contain full sized images in portraitmode and i want to expand my smoothappbarlayout max half size of screen, maintainig the ability to expand further until the whole image is visible.

i tried it with Appbarlayout.Behavior:

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) getAppBarLayout().getLayoutParams();
AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
behavior.setTopAndBottomOffset(0);
behavior.onNestedPreScroll(getCoordinatorLayout(), getAppBarLayout(), null, 0, getOffset(), new int[2]);
params.setBehavior(behavior);
getAppBarLayout().setLayoutParams(params);

this does expand my smoothappbarlayout only to the specified offset, but it also breaks overall scrolling behavior with smoothappbarlayout + collapsingtoolbarlayout + recyclerview

for better understanding: whats app is using a similar layout in their profileoverview of other users.

Thank you very much guys you saved my day.

I have questions

I want to implement ui like "scroll exituntilcollapse" but I want to use viewpager instead of recyclerview, How can I achieve that?

and another, in the sample, viewpager exituntilcollapse, when I move to second tab dog which has recyclerview instead of nestedscrollview, scrolling behavior looks like to have snap attribute. How can I avoid snap?

This library is already published as AAR format, so it is better to use consumerProguardFiles function instead of mentioning about Proguard in README.

Hi Henry! me again, sorry I have another problem, I was trying to figure it out how to solved but I'm not making too much progress.

Is the same code from this fork:
https://github.com/juliooa/smooth-app-bar-layout/tree/feature/custom-view-header

Here is a video of the problem:
https://www.youtube.com/watch?v=w2UFKPpLAoE&feature=youtu.be

The problem just happened when the header is not totally collapsed or expanded. I was trying to force all the recycleviews to go back to the original position if any of the tabs starts to detach from the collapsed position, like the behavior when is fully expanded; but well, not luck until now.

Thanks again Henry.

It's my layout xml content:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/cl_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_gank"
    tools:context="me.drakeet.meizhi.ui.GankActivity.GankFragment">

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

    <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:id="@+id/header_appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/gank_header_height">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/CollapsingToolbarTitleStyle"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="parallax">

                <me.drakeet.meizhi.widget.VideoImageView
                    android:id="@+id/iv_video"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/theme_primary_darker"
                    android:scaleType="centerCrop"/>

                <ImageView
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_play"/>

            </FrameLayout>

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

    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>

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

And my screenshot when using smooth app bar layout:

As you see, some dispeard items lost,It was supposed to be like this:

Here is certainly a number of issues, perhaps you can look at my Adapter of my RecyclerView to get the reason and fix it, it is open source:

https://github.com/drakeet/Meizhi/blob/master/app/src/main/java/me/drakeet/meizhi/ui/adapter/GankListAdapter.java

Thank you very much, and I will try to fix it with you ^ ^

hard to decscribe.. just like this
Video
when you do short and quick fling ...

Hello, the 'snap' flag isn't supported, is it? I wanted to recreate an appbar similar to play store's one and i need the snap function... I've managed to create a behavior but it didn't work... any ideas ?

thank you

Hello, first of all thank you for this improvement of AppBarLayout. I managed to create a simple activity with collapsing toolbar and a nestedscrollview under it. I have encountered a problem when using tablayout: everything is setted fine, but when i scroll a fragment (tab) the AppBarLayout remains expanded, static.
What do i have to change when passing from AppBarLayout to SmoothAppBarLayout in case of Tablayout? Thank you and sorry for my bad english

I am having trouble implementing smooth collapsing toolbar.

My Layout looks like this

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context="com.stream.mk.tv.ViewActivity">

    <android.support.design.widget.AppBarLayout
        android:fitsSystemWindows="true"
        android:layout_height="240dp"

        android:layout_width="match_parent" >
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/colapsing"


            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"



            >
            <ImageView
                android:id="@+id/imagearticle"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"

                android:src="@drawable/b"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:background="?attr/colorPrimary"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:theme="@style/AppTheme.AppBarOverlay"
                app:layout_collapseMode="pin"/>







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

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp" />
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"


        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:behavior_overlapTop="64dp"
    >
        <android.support.v7.widget.CardView

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="10dp"
            app:contentPadding="10dp"
            app:cardCornerRadius="2dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textarticle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
            android:textSize="16sp"

        android:text="@string/large_text" />

    </RelativeLayout>

</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout> 

Now, when I to add smoothappbar and add padding to Nested scroll my whole View scrolls with toolbar , I want toolbar to stay pinned . How to achieve that ?

Google updated their support-design library to v7:23.1.0 and it seems like smooth nested scrollview doesn't work correctly now.

Header can moves separately from the main view. Watch this video
http://tinypic.com/player.php?v=2q24cwn%3E&s=8#.VikCNvkrKUk

Reverting to v7:23.0.1 fix the issue.

snap not works. for example:

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="158dp"
android:background="@drawable/main_header_background"
app:contentScrim="@color/transparent"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|span|enterAlwaysCollapsed">

    <include layout="@layout/slideshow_main"
        android:layout_height="158dp"
        android:layout_width="match_parent"
        app:layout_collapseMode="parallax" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="@color/transparent"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:layout_collapseMode="pin"/>

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

Hi,
I encountered a problem.
When I set windowSoftInputMode to "adjustResize|stateHidden" in my Activity, and focus edittext in NestedScrollView - AppBarLayout isn't scrolled, and parent of edittext is moved under AppBarLayout. But if I swipe on NestedScrollView and after that I focus edittext, than everything works fine and AppBarLayout is scrolled correctly. Is it a bug, or I'm doing something wrong here?

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <me.henrytao.smoothappbarlayout.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/contentParent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <View
                android:id="@+id/stub"
                android:layout_width="match_parent"
                android:layout_height="200dp" />
            <EditText
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="8dp"/>
            <EditText
                android:layout_width="match_parent"
                android:layout_height="50dp" />
            <EditText
                android:layout_width="match_parent"
                android:layout_height="50dp" />
            <EditText
                android:layout_width="match_parent"
                android:layout_height="50dp" />
        </LinearLayout>
    </me.henrytao.smoothappbarlayout.widget.NestedScrollView>
    <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/photo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Hi, it would be great to see an example of a parallax header with a transparent statusbar.

Hi, i'm using this library with android-advancedrecycleview's expandable list function. I get two different behaviours when i use with your library and android appbar layout. The videos below explain it.

Using your library
Video: https://vid.me/ArFg
Xml: https://gist.github.com/osiloke/03ba1f060ec8434a3786
Using support library
Video: https://vid.me/IptD
Xml: https://gist.github.com/osiloke/d125d57a653a434f13d1

As you can see from the second video. The full grouped list shows.
Any help, is great help

RecyclerView scrolls (intermediate list) AppBarLayout this state when collased
Calling the scrollToPosition (0)
AppBarLayout is not expanded
If forced to call a appBarLayout.setExpanded () it seems one normally seen
When you scroll through the list it disappears immediately.

If you hide the appbar a bit (scrolling up half way) and then fling fast down, the recycler view scrolls good but the app bar stays on the same place.

Hi, Thanks for your awesome library. According to your 3 steps, I just add your library from gradle compile "me.henrytao:smooth-app-bar-layout:0.2.1" and change the Remove app:layout_behavior="@string/appbar_scrolling_view_behavior".
Add header to your scroll view or recyclerView. Or set paddingTop and clipToPadding="false".

When I wanna build, it is looking for AppStyle.MdToolbar. I would appreciate if you don't mind helping me to resolve this issue.

Thanks and Best Regards

https://github.com/worldline/FoldableLayout

Steps to reproduce:

1. Start activity with SmoothAppBarLayout, CollapsingToolbarLayout with app:layout_scrollFlags="scroll|exitUntilCollapsed" and a long list of items below
2. Scroll to the bottom of list
3. Rotate phone to the side
4. Rotate phone back
5. verify that list bottom is displayed (unfortunately this cannot be reproduced in Sample application as it does not preserve list position between orientation changes)
6. verify that toolbar is show collapsed as it should (we are using exitUntilCollapsed)
7. scroll up a little bit

What happens:
Toolbar is suddenly shown in expanded state.

What should happen:
Toolbar should stay collapsed. It should only expand once list is scrolled all the way to the top.

Workaround:

1. Add a class in the app

   public class PersistentAppBarLayoutBehavior extends me.henrytao.smoothappbarlayout.SmoothAppBarLayout.Behavior
   {
   public PersistentAppBarLayoutBehavior()
   {
       super();
   }
   
   public PersistentAppBarLayoutBehavior(Context context, AttributeSet attrs)
   {
       super(context, attrs);
   }
   
   @Override
   public Parcelable onSaveInstanceState(CoordinatorLayout parent, AppBarLayout appBarLayout)
   {
       Bundle behaviorState = new Bundle();
       behaviorState.putInt("mCurrentScrollOffset", mCurrentScrollOffset);
       behaviorState.putInt("mCurrentTranslationOffset", mCurrentTranslationOffset);
       behaviorState.putInt("mQuickReturnOffset", mQuickReturnOffset);
   
       behaviorState.putParcelable("super", super.onSaveInstanceState(parent, appBarLayout));
   
       return behaviorState;
   }
   
   @Override
   public void onRestoreInstanceState(CoordinatorLayout parent, AppBarLayout appBarLayout,
                                      Parcelable state)
   {
       Bundle behaviorState = (Bundle) state;
       behaviorState.setClassLoader(appBarLayout.getContext().getClassLoader());
   
       mCurrentScrollOffset = behaviorState.getInt("mCurrentScrollOffset");
       mCurrentTranslationOffset = behaviorState.getInt("mCurrentTranslationOffset");
       mQuickReturnOffset = behaviorState.getInt("mQuickReturnOffset");
   
       Parcelable superState = behaviorState.getParcelable("super");
   
       super.onRestoreInstanceState(parent, appBarLayout, superState);
   }
   }
   

2. change me.henrytao.smoothappbarlayout.SmoothAppBarLayout behavior <me.henrytao.smoothappbarlayout.SmoothAppBarLayout android:id="@+id/layoutAppBar" app:layout_behavior="your.package.PersistentAppBarLayoutBehavior">

3. you may need to add ids to all the elements in the layout

EDITED 2016-02-09: small fix in workaround

hi henry,
Really great work. I have a viewpager with five fragments and each fragment have collapsingtoolbarlayout and recyclerview. when i go to bottom and come back to the top of fragment, header content is not visible.
Please help me with this problem.

please find attached screenshots for better idea.

Hello.
I found a bug with the height SmoothAppBarLayout.
Here's a screenshot:
http://i9.pixs.ru/storage/0/3/4/Screenshot_4811339_20581034.png
It shows how RecyclerView gets on SmoothAppBarLayout.
My code layout activity:

<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.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

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

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:layout_gravity="center"
                android:src="@drawable/img1"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:layout_collapseMode="pin"/>

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

    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>

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

i used device: android 4.2.2 (api 17)
i used libraries:
com.android.support:support-v4:23.1.0
com.android.support:appcompat-v7:23.1.0
com.android.support:design:23.1.0
me.henrytao:smooth-app-bar-layout:1.0.0

In new version of design library was added setExpanded() method which expands AppBar, however scroll and translation are not reset on this event. Need to add event to reset mCurrentScrollOffset, mCurrentTranslationOffset when AppBarLayout expands, otherwise there is wrong behaviour

I am trying to set title to toolbar but it is showing blank...

        if (null != getSupportActionBar()) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setTitle("MyToolbar");
        }```

Layout: 

```<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/primary"
                app:layout_collapseMode="pin" />

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

    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>```

This is not really an issue, but i just wanted to let you know that i have been searching through recyclerview and nestedscrollview and i have found the real bug in those views. Check out this issue https://code.google.com/p/android/issues/detail?id=195800. In comment #3 is a replacement of nestedscrollview and a subclass of recyclerview which correctly dispatch any rest velocity to the nestedscrollingparent aka Coordinatorlayout which then applies the fling to the appbar as well. Please all star this issue because i posted it two weeks ago and it still has not even been assigned

why can not use minifyEnabled true???

Hello,

I have a long heightened SmoothAppBarLayout that it's height is computed after getting some data from an API, and a ViewPager that contains RecyclerViews.

Here is the xml of my layout

<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.view.ViewPager
        android:id="@+id/v_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:id="@+id/v_app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/v_collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">


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

                <com.application.view.HomeTeasersView_
                    android:id="@+id/v_home_teasers_view"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/toolbar_background"
                    android:paddingTop="?actionBarSize" />
            </LinearLayout>

            <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/v_toolbar"
                style="@style/Toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="enterAlways" />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/v_tab_layout"
            style="@style/TabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="enterAlways"
            app:tabGravity="fill"
            app:tabMode="scrollable" />

    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
</android.support.design.widget.CoordinatorLayout>

The problem happens when the HomeTeasersView become too long that I cannot see the ViewPager, I'm stuck with unscrollable content, although If I switched to Google AppBarLayout scrolling works normally on that part, any idea why is that happening?

If anything is not clear, I would be more than happy to elaborate.

I have my toolbar/appbar layout is in activity and in fragment i have either recyclerView or LinearLayout where the first view is imageView header of certain height say 200dp. here i want to have toolbar to be transparent and change its background alpha to primary color when scroll down and back to transparent background when scroll up

It will be greate if you add new this feature.

Thnaks

I always scroll to the bottom of RecyclerView as soon as it has data like this:

vRecyclerView.scrollToPosition(adapter.getItemCount() - 1);

I am trying to use Smooth Parallax and this causes problems. Toolbar doesn't collapse when it is scrolled to the bottom, so you have to scroll up and then back down for it to disappear.

What I want is simple. When activity starts, RecyclerView is scrolled to the bottom and Toolbar collapses, so that ImageView is not visible, only normal Toolbar is. Then when user scrolls to the top, parallax happens.

Is this possible?

I know this library is solving a different problem, but if this was possible, it would be awesome!

The data of my adapter of the ViewPager is fetched from a asynchronized API so setAdapter will be called after the BaseBehavior's onMeasureChild. So that the first page of the ViewPager does not work.
Once I switched between pages of the ViewPager everything works fine.

Hi,
I try to add listview instead of RecyclerView, but Smootappbarloyout sample not working.
List scroll behind appbarlayout.
How can I fix this ?

Thanks.

Hi @henrytao-me, I was wondering if you could help me figure this out - I have a fairly complicated layout that exitsUntilCollapsed to the tabs indicators (the thin 2dp strip beneath the TabLayout) as you scroll down, then enterAlwaysCollapsed with the full tabs bar as you scroll up (if you are not yet at the top, which will expand the full app bar with the header and tabs, etc).

With the exact same layout and scroll flags, just changing from the normal AppBarLayout to SmoothAppBarLayout in the xml changes this expand/collapse behavior. I have some screenshots below:

Default AppBarLayout, Scrolling down vs Scrolling up:

SmoothAppBarLayout, Scrolling down vs Scrolling up (doesn't quick return the tabs bar):

Here's my layout for SmoothAppBarLayout: https://gist.github.com/lishiyo/faec5177411427b7d8f5

The only difference in the layouts is swapping SmoothAppBarLayout for normal AppBarLayout, plus a minHeight as required by SmoothAppBarLayout - it appears that with SmoothAppBarLayout, my custom action bar (height of 56dp) covers my tabs when scrolling up. Is there a way to preserve my old behavior - i.e. exitUntilCollapsed to the 2dp tabs indicators, then quick return to the full tabs bar?

I have another question as well re: scrolling from inside SmoothAppBarLayout. The header fragment that I instantiate to place into the appbar has child image views, text views, etc. The problem is that its textview's click listener now appears to capture any touch events, including scroll. So if I try to scroll from inside my textview, it won't scroll at all - I have to touch outside of it to scroll normally.

The only way I've been able to get this fully scrollable is by wrapping my header fragment in a layout that always returns true for onInterceptTouchEvent, but that defeats my original click listener in the textview since now nothing can pass through to the children. Is there a way to let the parent SmoothAppBarLayout or the viewpager handle all scroll events, while SmoothAppBarLayout child views still get click events? Everything was working fine with my normal v23 AppBarLayout (i.e. can scroll from anywhere inside it, click listeners also work properly).

So sorry for bombarding you with questions - I've been stackoverflowing for days now to try to figure this out. I tried to modify both my header fragment and the child textview's onInterceptTouchEvent and onTouchEvent in various ways such as here (http://stackoverflow.com/questions/9965695/how-to-distinguish-between-move-and-click-in-ontouchevent/29933115#29933115) but that hasn't worked.

Hey,

When the recyclerview has only a few items and does not fill up the screen then the collapsing toolbar does not work. It stays in the expanded state and does not allow the recyclerview to scroll, due to the fact that all of the recycler items are visible onscreen at once.
I verified that with the design support library the toolbar will collapse up even if the recyclerview only has one item.

Any suggestions?

Thank you!

I noticed a bug, occurring also in the sample app. Lets say I have two tabs in a ViewPager with RecyclerViews. I scroll the first one to the bottom. Then I swipe. Then I scroll the second one to the bottom. Swipe back to the first one. Here if I try to scroll up (to scroll to the top) the RecyclerView doesn't move, but the collapsing toolbar is moving instead. In this case the RecyclerView should move first and handle the gesture and when it reaches it's top, then the collapsing bar should expand.

Here I uploaded a video to give you a better idea of what is happening: https://www.youtube.com/watch?v=PywDGfZYTis

P.s: By the way good job with the library. I think it is the best I found so far.

Hi, Hope your fever had gone and you are better. When I scroll down few pages, then when I wanna scroll up before reaching first row of recyclerview the smoothappbarlayout is scrolling down to the position. Can you tell me what is wrong? I have done exactly what you mention before. I have implemented by using viewpager.

<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="fill_parent"
    android:layout_height="fill_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:id="@+id/smooth_app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="356dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#000000"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/cover"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/upload_vapp_cover"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:background="@android:color/transparent"
                android:gravity="top"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:titleMarginTop="13dp" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                style="@style/MyCustomTabLayout"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_gravity="bottom"
                android:background="#ffffff"
                app:tabIndicatorColor="#ffffff" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Hi, I used that lib and all is ok.

my xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eaeaea"
android:id="@+id/root">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:background="#eaeaea"/>

       <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/app_bar_layout">

        <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="240dp">
             <!-- my stuff-->
        </FrameLayout>

        <include layout="@layout/view_tab_layout"/>

    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>

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

I have NesedScrollView at Viewpager and I do scrollView.scrollTo(0, 5000) scroll view scrolled but app bar layout didn't.

What I am doing wrong?

If we use a long title it shows ellipsis in expanded state which is normal, but in collapsed state it should show full text as in standard coordinator layout

Hi,
After removing app:layout_behavior, my cards are scrolling on top of the AppBar.
Please refer to the screenshot for more info.

Please help me!!

Hi there! Thanks so much for making this. I was wondering, is there a way to support variable/dynamic appbarlayout heights, where my appbar wraps a placeholder fragment that when swapped can end up any height?

<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="50dp">
            <!-- Header placeholder -->
            <FrameLayout
                android:id="@+id/header_fragment_placeholder"
                app:layout_scrollFlags="scroll"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
// ...
<ViewPager />

^^My xml. In your examples it seems that SmoothAppBarLayout is a fixed height, rather than wrap_content. I set a minimum height as I'm using a viewpager, but the recyclerviews in the viewpager are being cropped at the top - it's clear the SmoothAppBarLayout height doesn't include the instantiated header fragment height. Is it possible to do so?

In the Smooth ViewPager Parallax example, the image starts fading very early. Is there any workaround to modify the offset that triggers the toolbar to collapse. The default value seems to be 2 times the size of the toolbar.