Develop Reference

CollapsingToolbarLayout pushes NestedScrollView down in android

I encountered a problem on first launch of a fragment. It seems like CoordinatorLayout adds a negative margin to NestedScrollView which is equal to CollapsingToolbarLayout's height in collapsed state (I tested it by changing the height's value). As a result RecyclerView which lives in the NestedScrollView cannot scroll up to show few of its bottom items.
There are some similar questions on SO (like this, this and this), but they don't provide a solution that worked for me, and moreover, they don't give any explanations of what can cause the issue.
One interesting note is that if I rotate, or turn the screen off and on it would rebuild the layout and afterwords it will show up correctly. Also, if I click on an item it will trigger something so then I would be able to scroll those hidden items. As a workaround it would be nice to call a function that rebuilds the layout correctly manually but I failed to figure out what it was (see what I tried to do below)
What I tried to do:
adding bottom margin equal to toolbar's height to NestedScrollView. Although it helped on first launch but after I clicked on an item or rotate the screen the extra margin would push the view up from the bottom of the screen.
I couldn't find any problem in my code while debugging.
calling getView.invalidate() didn't help as well.
Can somebody help me to figure out what can cause the issue, please?
fragment_player.xml
<?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="ru.orgin.glagol.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:stateListAnimator="#animator/appbar_always_elevated">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<include layout="#layout/player_view"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/player_toolbar_height"
app:layout_collapseMode="none"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<ViewAnimator
android:id="#+id/viewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inAnimation="#android:anim/fade_in"
android:outAnimation="#android:anim/fade_out">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="64dp"
android:layout_gravity="center"
style="?android:attr/progressBarStyle"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:nestedScrollingEnabled="false"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:layout_width="match_parent"
android:layout_height="64dp"
android:gravity="center"
android:layout_gravity="center"
android:text="#string/empty_history_books" />
<TextView
android:layout_width="match_parent"
android:layout_height="64dp"
android:gravity="center"
android:layout_gravity="center"
android:text="#string/error_loading_data" />
</ViewAnimator>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Update:
Still don't know the reason but it seems like adding minHeight attribute to CollapsingToolbarLayout does the trick.

Adding minHeight attribute prevents CollapsingToolbarLayout from unexpected behavior:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:stateListAnimator="#animator/appbar_always_elevated">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="#dimen/player_toolbar_height"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<include layout="#layout/player_view"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/player_toolbar_height"
app:layout_collapseMode="none"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

CollapsingToolbarLayout won't collapse

I am having issues with the expected scroll behavior of a collapsing toolbar layout within an app. To ensure I kinda knew what I was doing I created a simple test project and was able to achieve the desired result, but a NestedScrollView was used in that example and the content that required scrolling was just a RelativeLayout containing a CardView with a lot of text. In the real app the scroll content is a RecyclerView, which I assume is the problem. It is as if the RecyclerView is handling the scrolling and the parent CollapsingToolbar is left out of the loop.
Notice that the app:layout_behavior="#string/appbar_scrolling_view_behavior" is not currently in the layout. I have tried adding it to various places without the desired result.
Attached is an image of the app after a small amount of scrolling has been performed with the collapsing toolbar above not reducing it's height.
<?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"
tools:context=".ui.ArticleListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/theme_primary"
app:contentScrim="#color/theme_primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/empty_detail"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/logo" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>

According to your code what's missing is that you have to set the scrolling flag "scroll" to the imageview above the Toolbar.
I've done a similar thing and as you can see on the code below, all the views that are meant to react to the RecyclerView Scrolling have the scrolling flag and they are before the views that we don't want to scroll such asthe Toolbar:
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:id="#+id/collapsingToolbar"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
>
<include layout="#layout/movie_details_header_layout" android:id="#+id/headerLayout"
app:layout_scrollFlags="scroll"
/>
<android.support.v7.widget.Toolbar
android:layout_height="56dp"
android:layout_width="match_parent"
android:id="#+id/toolbar"
app:navigationIcon="#drawable/ic_arrow_back"
android:navigationContentDescription="Back"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

The project came using version 22.x of the compat libraries, updating to 23 seemed to fix everything.

Android Collapsing Toolbar not using inertia like Google Play App does

I'm using the Android Design Support Library to create an Activity with a Collapsible Toolbar with a nice fading effect, just like Google Play or Whatsapp's Contact profile. I will put the activity layout at the end but bear in mind this is just the default Collapsible Activity layout to which I added an ImageView to the AppBarLayout to create the Toolbar <-> Image fade effect.
My problem with this implementation presents itself as 2 symptoms I will describe:
The activity content is long, when I want to scroll up quickly with a fast swipe the scroll will stop before expanding the Toolbar. I want it to continue, when I'm at the bottom of my NestedScrollView and I do a quick finger swipe to go all the way to the top of my activity I want this scroll to go and expand the Toolbar, this is the way the Google Play app behaves or Whatsapp's profile does.
Similarly when the Toolbar is expanded there is no inertia to the scroll, a quick swipe down will scroll a tiny bit, again this is not how Google Play or Whatsapp profile behaves. Once the Toolbar is collapsed the scroll behaves as it always has in ScrollViews, ListViews, etc. A quick swipe will allow you to go the bottom or top (unless there is a lot of content).
Is the behaviour I describe supported by the Design Support Library?
activity.xml:
<?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=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="#dimen/app_bar_height_custom"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:src="#drawable/cuthbert"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:minHeight="100dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:src="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
content_scrolling.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_scrolling"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ScrollingActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/large_text"/>
</android.support.v4.widget.NestedScrollView>

Try to add these lines in :
<android.support.design.widget.CollapsingToolbarLayout
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"

Update support libraries to 26.0.0 ( especially design support library ). They finally fixed this issue after years of complaining.

Android Design Library: SwipeRefreshLayout don't detect swipe over CollapsingToolbarLayout

In my app I am using CollapsingToolbarLayout following NestedScrollView inside SwipeRefreshLayout. What I want from SwipeRefreshLayout is to detect swipe over from CollapsingToolbarLayout, but its detecting over from NestedScrollView and ignoring swipe on CollapsingToolbarLayout. Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/expanded_toolbar_title_margin_start"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profilePic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/ic_split_big_profile"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<include
android:id="#+id/toolbar_layout"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/transactions_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="500dp">
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/fab_margin_bottom"
android:layout_marginRight="#dimen/fab_margin_right"
android:onClick="addTxn"
android:src="#drawable/ic_action_add_transaction_light"
app:elevation="6dp"
app:fabSize="normal" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Has anybody used this sort of thing?

As stated in AppBarLayout docs, it has to be direct child of CoordinatorLayout
This view depends heavily on being used as a direct child within a
CoordinatorLayout. If you use AppBarLayout within a different
ViewGroup, most of it's functionality will not work.
Thus, I'm not sure where the SwipeToRefreshLayout has to be included to work together with the CollapsingToolbar, as NestedScrollView has to be direct child too.
Here is another response that helps to attach the SwipeRefreshLayout and activate it only when the appBar is uncollapsed, but they are not using a NestedScrollView, which doesn't work for me :(
EDIT I found a solution for my problem: The ListView I used, had to be set as nested scroll instead of put it inside a NestedScrollView, or replaced with RecycleView:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
listView.setNestedScrollingEnabled(true);
}
So, a solution for your issue should be to wrap the NestedScrollView inside the SwipeRefreshLayout.

How to Expand/Collapse android component in Material Design

How to Expand/Collapse android component like ImageView, GoogleMap .. etc
I am using Design support library to provide android.support.design.widget.CollapsingToolbarLayout to Collapse ToolBar.
But how to Collapse other component.
Also I Haven't depth knowledge of Design support library, If it is possible to Collapse component using CollapsingToolbarLayout then give me some sample or Example.
Thanks in advance.

Views inside a CoordinatorLayout negotiate with others in order to work together effectively by specifying these Behaviors
A CoordinatorLayout is a super cool feature of Material Design that helps to create attractive and harmonized layouts.
All you have to do is wrap your child views inside the CoordinatorLayout.
<?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.byte64.coordinatorlayoutexample.ScollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
and content_scrolling:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"
tools:showIn="#layout/activity_scolling">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/large_text" />
</android.support.v4.widget.NestedScrollView>
What this gives us is a layout that can be scrolled to collapse the Toolbar and hide the FloatingActionButton
Open:
Closed: