collapsing toolbar flickrs a bit when collapsed

[suhaibroomy]

in collapsed position the collapsing toolbars becomes visible for a split second in expanded mode. i have made a video as well but youtube skips that frame i dont know why. will email you the video if you want. I really wanna use your library as support library sucks big time. Lemme know if you will be fixing it and if you need any help from my side

[henrytao-me]

Can you post your layout here? Which version of SupportDesign and SmoothAppBarLayout are you using?

[suhaibroomy]

<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:fitsSystemWindows="true">

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" />

<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
    android:id="@+id/smooth_app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="@bool/fitSystemsWindow">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMargin="@dimen/activity_horizontal_margin"
        app:expandedTitleTextAppearance="@style/Base.TextAppearance.AppCompat.Title.Toolbar"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax">

            <com.cube26.osp.music.ui.customviews.kenburnsview.KenBurnsView
                android:id="@+id/iv_album_art"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/black_24" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/parallax_view_gradient" />

        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentInsetLeft="?attr/actionBarSize"
            app:contentInsetStart="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
            app:titleTextAppearance="@style/AppTheme.Toolbar.Title"
            style="@style/AppTheme.Toolbar.Title"/>

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

<View
    android:id="@+id/shadow_top"
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:layout_gravity="bottom"
    android:background="@drawable/shadow_gradient" />

<ImageView
    android:id="@+id/iv_back"
    android:layout_width="?attr/actionBarSize"
    android:layout_height="?attr/actionBarSize"
    android:padding="@dimen/activity_horizontal_margin"
    app:srcCompat="@drawable/ic_arrow_back_white_36dp" />

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

Recycler view is containted in the fragment_container. Header is added in that

[suhaibroomy]

https://drive.google.com/file/d/0B181lwJ5g8kibEktQmhCbzM1Wjg/view?usp=sharing

take a look at this video. flickrs at 00:13

[henrytao-me]

Which version of SupportDesign and SmoothAppBarLayout are you using?

[suhaibroomy]

I am using 23.3.0 of smoothappbar. Tested it with 23.3.0 and 23.4.0 of design support. Same results on both.

[henrytao-me]

Based on your implementation, do you think there are any differences between your code and the demo code? It's better if either I can have access to your repo or you can reproduce it on my sample repo in order to troubleshoot it.

[suhaibroomy]

https://drive.google.com/file/d/0B181lwJ5g8kiemhIcGpXM1dYTEU/view?usp=sharing

This is video of demo code. I added fit systems window to your 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:fitsSystemWindows="true">

  <android.support.v7.widget.RecyclerView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
      android:fitsSystemWindows="true"/>

  <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
    android:id="@+id/smooth_app_bar_layout"
    android:layout_width="match_parent"
      android:fitsSystemWindows="true"
    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"
        android:fitsSystemWindows="true"
      app:layout_scrollFlags="scroll|exitUntilCollapsed">

      <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="@android:color/transparent"
        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>

[henrytao-me]

Hi @suhaibroomy

If you want to support fitSystemWidnows, Please check out branch issue-114 or see my commit above.

[suhaibroomy]

hey @henrytao-me

Thanks for your quick help. I am afraid it didnt fix the issue for me. Although i am not able to reproduce it now in your sample. I think i am doing something wrong. I have to use fitsystemswindow in framelayout that has my recyclerview else my app bar doesnt cover status bar. so i have to give item_header height as 256dp as against 232dp in yours. i think if i am able to fix this it might work. any suggestions about this would be great help

[suhaibroomy]

i was trying out things in your sample. I tried with this layout and it is happening again. I removed framelayout. any specific reason for keeping recycler view inside framelayout

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:fitsSystemWindows="true">

<android.support.v7.widget.RecyclerView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"/>

<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
  android:id="@+id/smooth_app_bar_layout"
  android:layout_width="match_parent"
  android:layout_height="@dimen/app_bar_height"
  android:fitsSystemWindows="true">

  <android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
      android:background="@color/mdColor_blue_accent_dark"
      app:contentScrim="@color/mdColor_blue"
      android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:background="@android:color/transparent"
      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>

[henrytao-me]

Hi @suhaibroomy

If you remove android:fitsSystemWindows in RecyclerView, everything works fine except some extra space in the header of RecyclerView (which equals statusbar height). This issue is also appeared in original AppBarLayout based on my test. (However, as I remember, it didn't have that issue before. I tried it few months ago). That's why I recommend to subtract header space of RecyclerView by 24dp if you fitSystemWindows is true. Please note that, fitSystemWindows also works on Android 4.x but I recommend you set it to true on Android 5.x and above only.

Hope it helps. Cheers, Henry

[suhaibroomy]

As i told you if i remove android:fitsSystemWindows from my code, android doesn't give this attribute to app bar as well which is kinda strange. I was digging into it as to why it is happening. i noticed you enable transparent status bar from code whereas i am doing it as a property of my activity theme. when i applied this property to your activity's theme same thing happened. i had to give android:fitsSystemWindows to framelayout to make it work. anyways for some reason nothing is working in my code. i will try to fix this with android:fitsSystemWindows to framelayout in your code. Any suggestions where shall i start

[henrytao-me]

Hi @suhaibroomy

I can help to look into your code if we can arrange a time. What's your timezone? Mine is GMT+7. Let's do teamviewer then.

[suhaibroomy]

sure.mine is GMT +5:30. its sunday tomorrow. if we can do it in the morning that would be better. my email is suhaibroomy91@gmail.com. same is configured with teamviewer. ping a suitable time on email

[mrhether]

Did you guys figure this out? I also have this issue and it seems to be related to recyclerView.addItemDecoration the glitching deals with the extra space that may be added with this method.

[suhaibroomy]

This issue still persists. i am not using any itemdecoration

[mrhether]

It has to do this recyclerview.computeVerticalScrollOffset() which estimates the offset based on the heights of the views.

[mrhether]

maybe try

  RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL) {

            @Override
            public int computeVerticalScrollOffset(RecyclerView.State state) {

                View firstView = recyclerView.getLayoutManager().findViewByPosition(0);
                if (firstView != null) {
                    return - (int) firstView.getY();
                }
                return super.computeVerticalScrollOffset(state);
            }

        };

[borgwald]

having the same issue with designlibrary 24.1.1 and smooth-appbar-layout 24.0.0.0. I dont use CollapsingToolbarLayout. Its a normal Coordinatorlayout with toolbar and slidingtablayout inside smoothappbarlayout. but i am using a recyclerview with linearlayoutmanager. i think it has something to do with recyclerview and smoothappbarlayout. since smoothappbarlayout version 1.0.0 this library seems to have its difficulties with recyclerviews. with support-version 23.2.1 and smoothappbarlayout version 0.2.3 i have no issues.

[henrytao-me]

Hi @borgwald

Please use smooth-appbar-layout:24.1.1.0 ;)

[borgwald]

thanks. tried 24.1.1.0. but flickering-bug still happens. reverted back to support-version 23.2.1 and appbarlayout-version 0.2.3.

[andyxialm]

I have the same issue with @borgwald.

[suhaibroomy]

will you be able to look into it if i make a try to reproduce this in a sample app @henrytao-me ?

[henrytao-me]

Sure. @suhaibroomy I couldn't reproduce in sample app. Still dont know why. I am very appreciate if you can help.

[henrytao-me]

Hi @suhaibroomy

Let's verify this issue together. I am up for a call via Hangout tomorrow, around 8 PM to 9 PM (GMT + 7) which is 6:30 PM to 7:30 PM your time if I am right.

Let me know if you are OK.

[suhaibroomy]

Hi @henrytao-me

Sorry i just checked your comment. I am only free on sundays i am afraid. we can do a hangout session or i can also try to replicate this on my sample app which ever you may prefer

Thanks

[borgwald]

are there any updates on this issue?

[henrytao-me]

Hi all, I still don't have any updates yet. Sorry about that.

[henrytao-me]

Hi @borgwald @suhaibroomy Please try out latest version. I fixed it. Thanks to @teddychoi for reporting issue with sample project here. https://github.com/henrytao-me/smooth-app-bar-layout/issues/139 Turn out, it's an issue with RecyclerView. onScrolling return dx > 0 while computeVerticalScrollOffset() return the same value with previous one.

For now, I close this issue. Please reopen it if you need any further help. Thanks all.

[suhaibroomy]

Hey the issue still persists in 24.2.0.2. tried it out with 24.1.0 and 24.2.0 versions of support library. Also fitsystemswindow is not working with this update(also tried with above two versions of support libraries). I have also filed an issue with support library team. seems to be an issue with collapsing toolbar layout. check it out here https://code.google.com/p/android/issues/detail?id=221419

[henrytao-me]

Are there any chances that I can look into your app?

[henrytao-me]

@suhaibroomy

Regarding to fitSystemWindows issue in 24.2.0. It needs to call setOnApplyWindowInsetsListener on parallax view in order to make it work. Checkout my code and screenshot from my app below. If you can provide me access to your current app, I will assist better. I promise your code will be secured. I will delete it immediately right after the issue is fixed for you. It's more interesting for me to help looking into the issue.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:fresco="http://schemas.android.com/apk/res-auto">

  <data>

    <variable
      name="viewModel"
      type="com.squar.mychat.ui.home.profile.HomeProfileViewModel" />
  </data>

  <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="@bool/isFitSystemWindows">

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

      <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

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

        <View
          android:layout_width="match_parent"
          android:layout_height="@dimen/backgroundGradientSize"
          android:layout_gravity="bottom"
          android:background="@drawable/background_gradient_bottom_top" />

        <android.support.design.widget.FloatingActionButton
          android:layout_gravity="bottom|end"
          android:layout_marginBottom="@dimen/fabMargin"
          android:layout_marginEnd="@dimen/fabMargin"
          android:layout_marginRight="@dimen/fabMargin"
          android:theme="@style/AppTheme.Button.Orange"
          app:fabSize="normal"
          app:srcCompat="@drawable/ic_chat_accent"
          style="@style/MdFloatingActionButton" />
      </FrameLayout>

      <com.squar.mychat.widget.BottomBar
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    </LinearLayout>

    <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
      android:id="@+id/smooth_app_bar_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:fitsSystemWindows="@bool/isFitSystemWindows"
      app:sabl_target_id="@id/recycler_view_fragment_home_profile">

      <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="@bool/isFitSystemWindows"
        app:contentScrim="?attr/mdColor_primaryPalette"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

        <RelativeLayout
          android:id="@+id/cover_wrapper"
          android:layout_width="match_parent"
          android:layout_height="@dimen/profileCoverHeight"
          android:fitsSystemWindows="@bool/isFitSystemWindows"
          app:layout_collapseMode="parallax">

          <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/cover"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            fresco:backgroundImage="@android:color/black"
            fresco:placeholderImage="@drawable/sample_cover"
            fresco:placeholderImageScaleType="centerCrop" />

          <View
            android:id="@+id/status_bar"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_alignParentTop="true" />

          <ImageView
            android:id="@+id/btn_setting"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_below="@id/status_bar"
            android:layout_margin="@dimen/mdLayoutSpacing"
            android:background="@drawable/background_opacity_circle_dark"
            app:srcCompat="@drawable/ic_setting_white"
            style="@style/MdIcon" />

          <ImageView
            android:id="@+id/btn_cover"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_margin="@dimen/mdLayoutSpacing"
            android:background="@drawable/background_opacity_circle_dark"
            app:srcCompat="@drawable/ic_camera_white"
            style="@style/MdIcon" />

          <TextView
            android:id="@+id/btn_edit_profile"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="20dp"
            android:layout_toLeftOf="@id/btn_cover"
            android:layout_toStartOf="@id/btn_cover"
            android:background="@drawable/background_opacity_square_dark"
            android:gravity="center"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:text="Edit Profile"
            android:textAllCaps="true"
            android:textColor="@android:color/white"
            style="@style/MdText.Caption" />
        </RelativeLayout>

        <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:background="@android:color/transparent"
          app:layout_collapseMode="pin"
          style="@style/MdToolbar">

          <RelativeLayout
            android:id="@+id/toolbar_content"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">

            <ImageView
              android:id="@+id/btn_setting_2"
              android:layout_alignParentEnd="true"
              android:layout_alignParentRight="true"
              android:layout_centerVertical="true"
              android:background="?attr/selectableItemBackgroundBorderless"
              app:srcCompat="@drawable/ic_setting_white"
              style="@style/MdIcon" />

            <ImageView
              android:id="@+id/avatar"
              android:layout_width="@dimen/mdListAvatarSize"
              android:layout_height="@dimen/mdListAvatarSize"
              android:layout_centerVertical="true"
              android:padding="@dimen/mdListAvatarPadding"
              android:scaleType="fitCenter"
              app:srcCompat="@drawable/ic_blank_avatar" />

            <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_centerVertical="true"
              android:layout_toEndOf="@id/avatar"
              android:layout_toLeftOf="@id/btn_setting_2"
              android:layout_toRightOf="@id/avatar"
              android:layout_toStartOf="@id/btn_setting_2"
              android:orientation="vertical"
              android:paddingEnd="0dp"
              android:paddingLeft="@dimen/mdLayoutSpacing"
              android:paddingRight="0dp"
              android:paddingStart="@dimen/mdLayoutSpacing">

              <TextView
                android:id="@+id/title"
                android:text="Oliver"
                style="@style/MdToolbar.Title" />

              <TextView
                android:id="@+id/subtitle"
                android:text="23, Female, live in Yangon, Myanmar"
                style="@style/MdToolbar.Subtitle" />
            </LinearLayout>
          </RelativeLayout>
        </android.support.v7.widget.Toolbar>
      </android.support.design.widget.CollapsingToolbarLayout>
    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
  </android.support.design.widget.CoordinatorLayout>
</layout>

  @Override
  public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    ((AppCompatActivity) getActivity()).setSupportActionBar(mBinding.toolbar);
    mBinding.collapsingToolbarLayout.setTitleEnabled(false);
    mBinding.collapsingToolbarLayout.setTitle("");
    ((AppCompatActivity) getActivity()).getSupportActionBar().setTitle("");
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      ViewCompat.setOnApplyWindowInsetsListener(mBinding.coverWrapper, (v, insets) -> insets.consumeSystemWindowInsets());
      mBinding.statusBar.getLayoutParams().height = MdCompat.getStatusBarSize(getActivity());
    }

    mStatusBarSize = MdCompat.getStatusBarSize(getActivity());
    mActionBarSize = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? MdCompat.getActionBarSize(getActivity()) : 0;
    mBinding.smoothAppBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
      verticalOffset = Math.abs(verticalOffset);
      int min = mBinding.coverWrapper.getHeight() - mStatusBarSize - 2 * mActionBarSize;
      float alpha = verticalOffset > min ? (verticalOffset - min) * 1.0f / mActionBarSize : 0;
      mBinding.toolbarContent.setAlpha(Math.min(alpha, 1f));
    });
    ...
  }

[longden]

Still an issue on 24.2.1. I'm using a nested scroll view with a relative layout and recycler view inside. Only happens when flinging.

[henrytao-me]

Hi @longden

Can you post your layout here? If you put RecyclerView inside NestedScrollView, then the scrolling is on NestedScrollView, isn't it? You may need to disable your RecyclerView like this recyclerView.setNestedScrollingEnabled(false);

[henrytao-me]

I have tried a screen with horizontal RecyclerView inside vertical RecyclerView using above way. It works.

[longden]

@henrytao-me After playing around with it for a while I found I wasn't using your custom NestedScrollView which fixes the flickering.

[henrytao-me]

It's good to know @longden. My custom NestedScrollView only support adding multiple OnScrollChangeListener. Depending on your usecase but in general, it plays the same as original NestedScrollView.

[longden]

@henrytao-me Thank you for your help.

I had a quick look around because I wondered why changing it would fix it. From the quick look I had it seems that the implementation of mNestedScrollView.getViewTreeObserver().addOnScrollChangedListener() introduces some lag (also a potential memory leak because off the add) which might be the cause of the visual flickering. If I force the NestedScrollView to use the built in setOnScrollChangeListener then there is no flickering even when using the base v4 NestedScrollView.

Is there a use case to using getTreeObserver() and adding a scroll listener when NestedScrollView has an OnScrollChangeListener ?