Develop Reference

CollapsingToolBarLayout and NestedScrollView smooth scroll issues

I'm using CoordinatorLayout with CollapsingToolBar and NestedScrollView. The elements are being inserted via RecyclerView. Whenever I try to scroll up or down the scroll isn't smooth, it's very slow, regardless the velocity of the gesture. I tried the solution here but it didn't solve my problem.
So I have no idea what causes this problem or how to solve it.
Here is my xml layout
<?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:id="#+id/main_screen_frame">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="225dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/toolbarImage"
android:layout_width="150dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/logo"
android:layout_gravity="center"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.SearchView
android:id="#+id/search_view_id"
android:layoutDirection="rtl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="#string/search_view_hint"
android:queryBackground="#color/colorWhite"
android:layout_gravity="right"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</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:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/search_panel_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layoutDirection="rtl">
<TextView
android:id="#+id/text_view_id"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAlignment="center"
android:text="#string/secondary_title"
android:layout_marginBottom="5dp"/>
</LinearLayout>
<FrameLayout
android:id="#+id/fragment_layout_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/search_panel_id"
android:layout_marginTop="10dp"
android:orientation="horizontal">
</FrameLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The FrameLayout is a place holder for different fragments with different scrollable RecyclerViews.
Thanks in advance.

Layout structure seems okay. So the problem might be here. android:src="#drawable/logo".
Try moving it to drawable-nodpi directory.
Also loading with Picasso / Glide will improve perfomance.

Solved my problem with this solution. The problem was that I was using RecycleView, that came from an injected fragment, inside of NestedScrollVoew. I guess they both contradict each other so that caused the slow scrolling.

recyclerViewsetNestedScrollingEnabled(false);
The above line makes recyclerview scrolling smoother in a NestedScrollView.

Android collapsable layout not working properly

I am using collapsable layout . Here is the main layout for that,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="#+id/main_content"
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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/bgheader"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:background="#drawable/scenary"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:attrs="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<FrameLayout
android:id="#+id/titleContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<.utils.CustomFontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Toolbar Title"
android:textColor="#ffffff"
attrs:customFont="handyman_bold"
android:textSize="8pt"
android:layout_marginLeft="-20dp"
android:id="#+id/toolbar_title"/>
</FrameLayout>
<ImageButton
android:id="#+id/btn_ToolBarRightBtn"
android:layout_width="32dp"
android:layout_height="28dp"
android:tag="0"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/icon_shopping"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="10dp"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#color/offwhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
Inside the ViewPager I have a recycler view. Here is what I see when I load the app ,
When I scroll up the recycler view I am seeing this,
I am not sure why I see the gap initially and later it is getting filled with the app primary color. What a I doing here?
Attached animated gif of my screen.
Thanks

One straightforward solution is to use design support library version 23.1.1 This issue happens for design support library 23.2.0 onwards.
compile 'com.android.support:design:23.1.1'
Second solution is removing the line android:fitsSystemWindows="true" from the CoordinatorLayout.
UPDATE :
in both case the toolbar is overlapping the image, so the portion under status bar is not visible
This is happening because CollapsingToolbarLayout class is a child of FrameLayout. So the views you pass in the framelayout will stack upon each other. that's why toolbar is overlapping the image. The simplest solution in your case I found is to put android:layout_marginTop="?attr/actionBarSize" in the ImageView.

There is no app:layout_behavior="#string/appbar_scrolling_view_behavior"in your FrameLayout
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/titleContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"

CoordinatorLayout + CollapsingToolbarLayout scrolling underneath the status bar

I have an odd problem with my layouts. I have a CoordinatorLayout with a CollapsingToolBarLayout in it. I have a transparent status bar to better display the image in the top. Thus I have fitsSystemWindow set on this ImageView. The problem I now have is that when the Toolbar is fully collapsed, the top part of the toolbar scrolls behind the system status bar. Is there a way to prevent this behavior?
Here are the screenshots:
Here is my layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordinatorLayout">
<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="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="140dp"
app:expandedTitleMarginBottom="90dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
app:layout_collapseMode="parallax"
android:id="#+id/icon"
android:transitionName="pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/missing_album_art"
android:tint="#AA000000"
android:fitsSystemWindows="true"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="20dp"
android:orientation="horizontal">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/smallicon"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/artist"
android:ellipsize="end"
android:singleLine="true"
android:textSize="24sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:id="#+id/date"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/list"
android:dividerHeight="2dp"
android:transitionName="bottom">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Also, I tweak the layout parameters a bit when creating the activity:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

Add android:fitsSystemWindows="true" to the root of your layout i.e. CoordinatorLayout
Most of the time, your app won’t need to draw under the status bar or the navigation bar, but if you do: you need to make sure interactive elements (like buttons) aren’t hidden underneath them. That’s what the default behavior of the android:fitsSystemWindows=“true” attribute gives you: it sets the padding of the View to ensure the contents don’t overlay the system windows.
Read more on this here.

Setting a gravity to a TabLayout inside a CollapsingToolbarLayout causes it to diassapear

I have the following XML 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:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="#drawable/bg_bucket_list">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="144dp"
app:expandedTitleMarginBottom="#dimen/quadruple_margin"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/bg_bucket_list" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:background="#color/black_40" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:animateLayoutChanges="true"
android:gravity="top">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginStart="#dimen/single_margin"
android:layout_marginTop="#dimen/quadruple_margin"
android:text="#string/my_places_for"
android:textColor="#color/white"
android:textSize="24sp"
android:visibility="gone" />
<TextView
android:id="#+id/sub_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/text"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginStart="#dimen/single_margin"
android:layout_marginTop="#dimen/quarter_margin"
android:text="#string/pick_category_or_business"
android:textColor="#color/white"
android:textSize="16sp"
android:visibility="gone" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:tabBackground="#color/transparent"
app:tabGravity="center"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/grey_400" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
app:contentInsetLeft="#dimen/triple_margin"
app:contentInsetStart="#dimen/triple_margin"
app:popupTheme="#style/Theme.AppCompat.NoActionBar"
app:theme="#style/Theme.AppCompat.NoActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
If you look at the TabLayout, the gravity assigned to it (bottom) causes it to disappear. If I remove that, it shows but fixed to the top.
The reason I don't have the CollapsingToolBarLayout matching the AppBarLayout in size is because I've been experimenting with putting the TabLayout in that space and setting it's flags independent of the CollapsingToolbarLayout directly as a descendant of the AppBarLayout.
Setting it independent works, but then I don't have the ImageView Background with the mask 60% black opacity mask anymore.
I tried what was suggested here: Similar question
There's no difference however.
EDIT: I figured it out and answered my own question here: Answer
The important thing is to recognize the CollapsingToolBarLayout extends FrameLayout, so you can put more than 1 in An AppBarLayout which extends LinearLayout. You set the scroll behaviour by using the scroll flags available to an AppBarLayout's children views.

android:fitsSystemWindows not working on Toolbar

I'm using android library Android-ObservableScrollView from ksoichiro. I use his sample Flexible Space with viewpager and i modify it.
But there's some problem. You can see in my xml there is 2 android:fitsSystemWindows. One in LinearLayout, and the other in Toolbar. In LinearLayout working good. but in Toolbar is not working. Why this happen?
Thank you. Sorry for my bad english
theres my xml code:
<FrameLayout 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">
<com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:scaleType="centerCrop"
android:src="#drawable/bridge" />
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:background="?attr/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_height">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_margin="#dimen/abc_action_bar_default_padding_material"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:minHeight="?attr/actionBarSize"
android:textColor="#android:color/white"
android:textSize="20sp" />
</FrameLayout>
<com.bright.nongkrongyuk.ui.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/black"
app:sliding_textColor="#drawable/sliding_tab_profile" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light" />
</LinearLayout>
</com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</FrameLayout>

The android:fitsSystemWindows attribute sets a padding. This means the fitting applies to the child views. You would have to apply this either to your FrameLayout or put the Toolbar into a nested Layout
It's really tricky to make a proper fullscreen layout with views fitted to the screen. I subclassed Fragment where I can declare a content-view which will get padding depending on Status- and/or Navigationbar