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>

Android NestedScrollView smooth scroll in CoordinatorLayout

I am using the sample ScrollingActivity (included in the SDK) for testing parallax behavior. The sample uses a NestedScrollView in a CoordinatorLayout. When I scroll up from the bottom of the screen; the scroll stops at toolbar (even if my scroll has high velocity). As you can see in the attached image, multiple scrolls are needed to show the expanded AppBarLayout.
I need a smooth scroll for users to see expanded AppBarLayout. Interestingly, this issue does not happen if I use RecyclerView instead of NestedScrollView.
I am using build tool 23.0.3. Here is the layout 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="me.deepakmishra.swipetests.ScrollingActivity">
<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" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_gravity="fill_vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="me.deepakmishra.swipetests.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<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>
<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>

I could not achieve this using CoordinatorLayout, essentially because I was not able to get an event which encapsulates velocity and position at the same time. CoordinatorLayout is providing velocity and position in separate callbacks, and using them is resulting in a stuttered movement.
I implemented parallax effect in a traditional fashion with custom handlers to track all scroll/fling operations.

Add android:fillViewport="true" and android:layout_gravity="fill_vertical" to your NestedScrollView. Hope this will help you.

Can't fit appbar and the activity in the same screen

I'm building a android app and im using the android material design app bar. I wanted to fit the activity in the screen with the appbar and I cant do it.
I have this line of code:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
This line allow me to fit the activity in the screen but some content is below the screen. Both appbar and the content are different xml files (don't know if they are consider as fragments). Can someone help to fit the content in the screen without being on top of the appbar?
If I use this line:
And without it:

There is solutions to your problem.
case 1: if you does not want to scroll or collapse tabs and toolbar(i.e. your content is not scroll-able):
You should not use app:layout_behavior="#string/appbar_scrolling_view_behavior", instead of it set layout_marginTop to root view of content up-to height of(toolbar+tabs). If you are using standard heights then it is 48+48 = 96dp (you should check and verify these dimensions).
case 2:
If you have scroll able content or want to scroll able content, then just use NestedScrollView as a root viewGroup of content and stop worrying about behavior. It will work correct automatically.

try this way this worked me fine
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Hope this will helps you

FloatingActionButton is adding extra margin above NestedScrollView in CoordinatorLayout

I'm struggling with strange behaviour of margin with FloatingActionButton in CoordinatorLayout. FAB adds extra margin which disappears after certain actions.
I followed Cheesesquare example to create detail view. I have exactly the xml same structure. The only difference is that I'm using this view for a fragment instead of raw activity.
This occurs most of the times but sometimes it doesn't. Occurs only once for fragment object, once it fixes itself it works well. On my second phone it doesn't occur. After removing FAB it's ok. When I change sth in calendar, it also causes margin to fix itself.
Attaching gif with layout lines enabled so you can see the margins.
For reference:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content2"
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:background="#color/white"
android:fitsSystemWindows="true"
tools:context="com.habitsteacher.android.view.fragment.show.ShowHabitFragment">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="72dp"
app:expandedTitleMarginEnd="24dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<TextView
android:id="#+id/intentionText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="16dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="48dp"
android:layout_marginRight="24dp"
android:layout_marginStart="48dp"
android:ellipsize="end"
android:fitsSystemWindows="true"
android:maxLines="2"
android:textColor="#color/icons"
android:textSize="#dimen/abc_text_size_subhead_material"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.25"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_show_habit"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</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:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/habit_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:orientation="vertical"
android:paddingTop="32dp">
<android.support.v7.widget.CardView
android:id="#+id/calendarWrapper"
android:layout_width="match_parent"
android:layout_height="343dp"
android:layout_margin="#dimen/card_margin">
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floating_button_edit_habit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:src="#drawable/ic_mode_edit_white_24dp"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Any thought what could be the reason, or how to investigate this deeper?

It looks like CoordinatorLayout doesn't work properly inside a fragment which is added as non-first to the activity. This looks like a bug in SDK but I couldn't locate the root cause precisely.
As it works properly only when the layout is located on the first added fragment to the activity, I moved fragment with this layout to separate activity and is works properly now.
Still, it's avoiding this behaviour not fixing it so any answer is still appreciated.

Animating logo along with collapsing toolbar within CoordinatorLayout

I want to implement collapsible toolbar with a logo in the following manner:
Flexible Space with overlapping content, like shown here (have this already);
Parallaxed pattern in this space that gets scrimmed with solid color (have this too)
A horizontally-centered logo, which must appear right above the content but float upwards as toolbar collapses:
In action it should be something like Pesto's leaves here (not necessarily resizable, but that would be a plus):
Here's my layout:
<android.support.design.widget.CoordinatorLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
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="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
<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.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="64dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivityFragment"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<!-- card content -->
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The problem is, wherever I try to place the logo picture, either it doesn't move like I need it too, or everything breaks. It feels like a custom Behavior might be required. Unfortunately neither of the tutorials I found on the new Design library explain how to extend it — only how to use provided stuff. There's no source code of it released, the decompiled code has no comments and is extremely tangled, and the fact that I'm not yet very comfortable with Android's layouting internals makes it even worse.
Please help?

Okay, I sorta did it!
My solution is horrible, so I'll still be expecting for better ones :)
I went on and created a custom view CollapsingLogoToolbarLayout, which is a subclass of CollapsingToolbarLayout. The latter class is where title transition is taken care of — so in my subclass I placed the logic that changed properties of the logo view, namely its translationY based on "expanded-ness" fraction. Gist with code is here. Now after I found suitable offset parameters, my layout looks like this:
...
<com.actinarium.random.common.CollapsingLogoToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:logoViewId="#+id/collapsing_logo"
app:collapsedViewOffset="0dp"
app:expandedViewOffset="-56dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
<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.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/collapsing_logo"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/random_logo"/>
</FrameLayout>
</com.actinarium.random.common.CollapsingLogoToolbarLayout>
...