Develop Reference

FAB not properly displaying with CollapsingToolbar in Fragment

I have a main Activity, which includes a TabLayout inside a CollapsingToolbar. One of my Tabs is a Fragment which contains a FAB in the bottom right hand corner. The issue is that when I go to this Tab, the Collapsing Toolbar is fully open and the FAB is hidden. I can only see it when I Collapse the ToolBar. Is there a way to fix this?
I know that I can place the FAB within my CollapsingToolBar layout, which is in my MainActivity, but I want to/need to keep it in the Fragment Layout instead.
Here is my MainActivity Layout:
<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="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
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:elevation="24dp"
android:layout_height="match_parent"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_image"
android:alpha="0.5"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="top"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/AppTabLayout"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:fillViewport="true"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.markfeldman.tasktrack.activities.MainActivity">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Here is my Fragment Layout:
<FrameLayout
android:id="#+id/tasks_container"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.markfeldman.tasktrack.fragments.Tasks">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:fabSize="normal"
android:elevation="6dp"
app:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_add_black_24dp"
android:layout_gravity="end|bottom"
app:pressedTranslationZ="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp" />
</FrameLayout>
This is what it looks like when I first navigate to my tab and the ToolBar is NOT collapsed:
And Here I pull the ToolBar Up:
I can add marginBottom padding to have it be visible at first but then it looks odd when I Collapse the Toolbar. Any suggestions?

Move FAB to activity layout:
<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="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
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:elevation="24dp"
android:layout_height="match_parent"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_image"
android:alpha="0.5"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="top"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/AppTabLayout"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:fillViewport="true"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.markfeldman.tasktrack.activities.MainActivity">
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:fabSize="normal"
android:elevation="6dp"
app:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_add_black_24dp"
app:pressedTranslationZ="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
<!--NEXT 2 LINES SHOULD HELP-->
app:layout_anchor="#id/content"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout not collapsing when using viewpager

I have search all questions here related to my question but none helped so far. What I am trying to achieve is to have the middle toolbar collapse when the the fragment in the ViewPager is scrolled down and the TabLayout will just pin. Here's the structure of my main layout file. Nothing happens when I scroll down.
Please help me. Any help would be greatly appreciated
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="72dp"
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<RelativeLayout android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="top"
android:paddingRight="20dp"
android:paddingLeft="20dp"
android:layout_height="wrap_content">
<TextView android:id="#+id/tv_song_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_alignParentLeft="true"
android:textSize="20sp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Bloody Stream"/>
<TextView android:id="#+id/tv_artist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tv_song_name"
android:textSize="15sp"
android:fontFamily="Sans-serif-light"
android:textColor="#9E9E9E"
android:text="by Coda"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:layout_below="#+id/tool_bar"
android:layout_gravity="center_horizontal"
android:layout_alignParentStart="true"
android:fitsSystemWindows="true"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_file_download_white_24dp" />

The scrolling container in your Fragment must support nested scrolling. This means you should use either a NestedScrollView or a RecyclerView.

Seems like I have to include the toolbar that has the navigation back button inside the CollapsingToolbarLayout. It's working as what I intended now. Thank you for all the answers.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/smooth_appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="wrap_content"
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
app:titleEnabled="false"
android:fitsSystemWindows="true"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="72dp"
android:layout_marginTop="?android:attr/actionBarSize"
app:layout_collapseMode="parallax">

How to create this type of layout using coordinatorLayout , AppbarLayout ,CollaspingToolbarLayout

Anyone please guide me how to make this type of layout i have tiny knowledge about this.
it has
1> FloatingActionButton
2> 1 ImageView usging in CollapsingToolbarLayout to parallex
3>1 TabLayout with ViewPager
I am not able to create middle layer of layout in which 2nd ImageView and its relevant text and FloatingButton anchored.
here is the layout
<
<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.express.entertain.profileapp.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
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="wrap_content"
android:fitsSystemWindows="true"
app:statusBarScrim="#color/colorPrimary"
app:contentScrim="#color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/poster"
android:id="#+id/poster"
android:scaleType="centerCrop"
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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/tablayout"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewpager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<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"
android:clickable="true"
app:fabSize="mini"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|right"
android:src="#android:drawable/ic_dialog_email"
/>
</android.support.design.widget.CoordinatorLayout>

Unexpected toolbar behavior using AppBarLayout on Ice Cream Sandwich API 15

Here is my main 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="4dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:titleTextAppearance="#style/ToolbarTitle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/CustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:layout_scrollFlags="enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</FrameLayout>
<fr.castorflex.android.circularprogressbar.CircularProgressBar
android:id="#+id/base_progressSpinner"
android:layout_gravity="center"
android:layout_width="72dp"
android:layout_height="72dp"
android:indeterminate="true"
android:visibility="invisible"
app:cpb_color="#color/spinner"
app:cpb_rotation_speed="1.0"
app:cpb_sweep_speed="1.0"
app:cpb_stroke_width="4dp"
app:cpb_min_sweep_angle="10"
app:cpb_max_sweep_angle="300"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_request"
android:visibility="gone"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/request_fab_icon"
android:layout_margin="#dimen/big_padding"
android:clickable="true"
app:backgroundTint="#color/fab"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="source.bigdx.com.bigdxsource.util.ScrollAwareFABBehavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_contact"
android:visibility="gone"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="end|bottom"
app:borderWidth="0dp"
android:src="#drawable/contact_fab_icon"
android:layout_margin="#dimen/big_padding"
android:clickable="true"
app:backgroundTint="#color/fab"/>
</android.support.design.widget.CoordinatorLayout>
On API 16 and up there is no issue. When content is scrolled the toolbar shifts up until collapsed like it should.
However on API 14/15 when scrolled the content does not scroll, only the toolbar. when toolbar is collapsed the content then scrolls but will not overlap where the toolbar was.
I have tried changing many things like styles and values in layout above but can't make it work like it does on API 16+ devices.
Update
It seems wrapping it in a CollapsingToolbarLayout fixes it but shouldn't be needed.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:titleTextAppearance="#style/ToolbarTitle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/CustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:layout_scrollFlags="enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

It is the problem with CoordinatorLayout in ICS. Try using different Layout and the toolbar will show up

Android AppBarLayout pushes ViewPager down

I have below xml file which has 1)Toolbar 2)TabLayout 3)Custom View and 4) ViewPager. When i put Toolbar, TabLayout, Custom View inside AppBarLayout, it pushes ViewPager down as like this:
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"
android:id="#+id/feed_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_tool_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/Widget.AppCompat.ActionBar.TabText"
app:layout_scrollFlags="scroll|enterAlways"
app:statusBarScrim="?attr/colorAccent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_alt"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary_color"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="none"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/feed_sliding_tabs_alt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/accent_color"
app:tabTextColor="#color/accent_color_per_70" />
<LinearLayout
android:id="#+id/activity_feed_fl_canli_skor"
android:layout_width="match_parent"
android:layout_height="52dp"
android:background="#drawable/mac_back"
android:orientation="vertical">
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/activity_feed_alt_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_feed_new_post"
android:theme="#style/FabTheme"
android:visibility="invisible"
app:backgroundTint="#color/primary_color"
app:borderWidth="0dp"
app:layout_anchor="#id/feed_coordinator_layout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
When i scroll down, Toolbar gets hidden which is good. But My ViewPager overflows main screen and bottom of ViewPager is not visible. What can i try?
When i scroll up Toolbar gets invisible and ViewPager is pulled up and fully visible in screen. But Toolbar only responds to scroll of 1st page of ViewPager. trick: For now i put paddingBottom to frament inside ViewPager

This is not an actual solution but for time being I added this line of code in view pager and its working:
android:paddingBottom="?attr/actionBarSize"
so my full layout is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
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">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingBottom="4dp"
android:paddingTop="4dp" />
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#mipmap/ic_search" />