Develop Reference

CollapsingToolBarLayout has dual toolbar

I am having issues with implementing CollapsingToolbarLayout. I have this problem:
Yes, I've got to place the view in the layout, but it collapses below the original toolbar (or ActionBar for that matter) as shown in the image below. I have no idea how to fix this.
Thanks for any help. I am using Android Studio 2.1.1.
Here is my layout file:
<?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=".ArticleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/app_bar_layout"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/featuredImage"
android:src="#mipmap/ic_launcher"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:contentDescription="#string/article_image"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/article_container" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#mipmap/ic_share_variant" />
</android.support.design.widget.CoordinatorLayout>

I found out where I went wrong. I had left out the theme statement in the manifest. All I had to do was add the line android:theme="AppTheme.NoActionBar" to my activity in the manifest.
However, this brought up two new issues:
The new ToolBar scrolls out of view (does not stick to the top.)
The back button that should lead me to my previous activity is gone. However, I'll ask this as a separate question if I do not get the solutions from researching.

Top of content in CollapsingToolbarLayout obscured by Toolbar background colour

I'm seeing an issue with my app when using the Android design support library in that the CollapsingToolbarLayout appears to have a theme-coloured background bar at the top, even when there is enough space (and therefore it should be 'transparent').
Any ideas what I'm doing wrong?
<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:id="#+id/main_content"
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:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="400dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent" android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- content -->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

I'm having very similar layout in my app and it's working well for me. Comparing mine layout to yours, my guess is you should remove background attribute from your Toolbar. Furthermore, I use one of the default themes for Toolbar (#style/ThemeOverlay.AppCompat.Dark). I see you're using your own theme, which might be causing problem as well. (I set StatusBar color to transparent in Java code, if you're interested in that too).

How to hide the ImageView at the end of collapsing of CollapsingToolbarLayout?

I use ImageView inside CollapsingToolbarLayout and need to have control,over ImageView,hide it at the end of collapsing of CollapsingToolbarLayout and do some over ImageView,Please any ideas could help me.
There are such options
app:layout_scrollFlags="scroll|exitUntilCollapsed"
but not any options like "exitEndCollapsed".

I spent nearly two days trying to get exactly this working. I've read a lot of guides and others. now I finally resolved that! Those are steps I did:
First of all you need to move your ImageView in front of your Toolbar (still inside of CollapsingToolbarLayout. Next, you have to add app:contentScrim="?attr/colorPrimary" into tour CollapsingToolbarLayout (It does that nice scrim effect at the end of scrolling.
At the end, you have to add android:background="#android:color/transparent" into your Toolbar.
And that's all... This way it worked for me. Hope it will help you.
Here is part of my activity_main.xml:
<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:id="#+id/sceneRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="168dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingBottom="16dp"
android:paddingStart="16dp"
android:text="AppBar Title"
android:textSize="25dp" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">

In your image view just add ,
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0"

Toolbar elevation/shadow (for pre lollipop) when using CollapsingToolbarLayout

Below is the code I am using to have a collapsing toolbar. It works. But at the same time I am trying to have toolbar elevation which is not working in pre lollipop devices, so I am trying to do that by applying a view with a shadow drawable. It works, but in this case, has an unintended effect as the shadow is visible all the time (see below)
I want the shadow to be visible only when only the toolbar is visible
Any advise?
<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"
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="256dp"
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:expandedTitleMarginStart="72dp"
app:expandedTitleTextAppearance="#style/ExpToolbarTitleStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/backdropimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img"/>
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/profPic"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:scaleType="fitCenter"
android:src="#drawable/imgprf"
app:riv_border_color="#color/icons"
app:riv_border_width="2dip"
app:riv_corner_radius="30dip"
app:riv_mutate_background="true"
app:riv_oval="true"/>
</RelativeLayout>
<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/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<View
android:id="#+id/toolbar_shadow"
style="#style/ElevationFix"
app:layout_scrollFlags="exitUntilCollapsed"
android:layout_width="match_parent"
android:layout_height="6dp"/>
<android.support.v4.view.ViewPager .........
.........
.........
</android.support.design.widget.CoordinatorLayout>

This is a bug, you can find here is Assigend as Small-Priority to Chris Banes (Android Developer).
https://code.google.com/p/android/issues/detail?id=182083

I suggest you to add the custom shadow view as foreground in your fragment container.
i did same thing in my code like:
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
**android:foreground="#drawable/header_shadow"**>
You can do one more thing put
<item name="header_shadow" type="drawable">#null</item>
attibute in value-21 style.xml and before api 21 add it into your styles.xml like this..
<item name="header_shadow" type="drawable">#drawable/bottom_shadow</item>

CoordinatorLayout with Tabs in android?

I am new for CoordinatorLayout i want to use coordinatorLayout in my application but it cause some problem in display CollapsingToolbarLayout view.
i want to design view like whatsApp screen Tabs in Coordinatorlayout
My XML Code
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="32dp"
app:expandedTitleMarginStart="24dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<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/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
// child view
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>`

I Found Solution for Tabs in 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"
android:id="#+id/tabanim_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/tabanim_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/tabanim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
/***
Here You can add custom layout
**/
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout is delicate sometimes, I suggest you to follow the next example using it as a base and adding more complexity step by step if you need:
https://gist.github.com/RicardAparicio/f41523daaa0edbe0b4399549fff4da3f
Hope it helps.

"but it cause some problem in display" doesn't say what kind of problem You had, glad You found the solution though.
There is indeed problem in both 22.2.1 and 23.0.1 support libraries with TabLayout and ViewPager in CoordinatorLayout while using fitsSystemWindows="true". While using RecyclerView and scrolling it up TabLayout header goes into status bar while it's background color is not being pinned.
I might only imply that above was one of Your problems, if yes then removing fitsSystemWindows is not best solution as application will loose a lot of it's look in 5.0+ Android.
It is not good solution either but I managed to fix this issue by adding nested android.support.design.widget.CoordinatorLayout, but if You use DrawerLayout there, then nothing is needed as shown in this example: https://github.com/chrisbanes/cheesesquare