Develop Reference

Toolbar covers page when clicked

My Activity is built on layout android.support.design.widget.CoordinatorLayout which contains toolbar. In the activity i have three webview which loads google.com, as soon i click the search-bar(to input the keyboards), toolbar extends itself to search-bar, but as soon as i click back key(which removes the cursor from the search bar), toolbar goes to normal size.
Here is 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:id="#+id/coordinatorLayout"
android:layout_height="match_parent"
android:layout_width="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.v7.widget.Toolbar
android:id="#+id/tool_bar"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true" />
<com.taadu.slidechat.adaptor.SlidingTabLayout
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.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#+id/tabs">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
I have tried to define some numbers in android:layout_height of AppBarLayout but this makes my tabs go away, but then also toolbar size is not normal, it is always short of it's regular height.
I have searched whole stackoverflow, but couldn't find any relevant data.

Your question is a bit unclear... But if I got it correctly, try to set your layout_height to ?attr/actionBarSize.
Your layout will look like this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true" />
<com.taadu.slidechat.adaptor.SlidingTabLayout
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.support.design.widget.AppBarLayout>
<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.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

Hiding view below toolbar in coordinator layout

I'm working on creating a layout that works as follows:
Toolbar at the top
Toolbar below top toolbar
RecyclerView
And when I scroll, I want to hide the toolbar in between top toolbar and recyclerView. My Layout is as follows:
<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="SomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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="wrap_content"
android:elevation="4dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
android:minHeight="0dp"
android:id="#+id/info_bar"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
With these changes, both the toolbars become hidden when scrolling.
I just need to hide the second toolbar.
EDIT : If I can't get this to work, I'll be attaching a scroll listener to my recyclerView and resolving this that way. But I was wondering if there is a cleaner solution with scroll behaviors

Moved the top toolbar out of the coordinatorlayout and thus resolved this issue.
(Thanks to a colleague)
<LinearLayout 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.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/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.CoordinatorLayout
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">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
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_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>

If I understood properly, then you might want to collapse hole collapseableToolbar when it is scrolled up, instead it is showing some (20dp) space between ToolBar and listItem. for me it took half of the day, and problem is just a boolean value in coordinatorLayout. Just change "fitsSystemWindows" value from true to false.
with this you can hide image of the collapseToolBar upon scrolling.
<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="false"
tools:context="com.thedeveloperworldisyours.imagecollapsingtoolbarlayout.ScrollingActivity">

Rotation issue with CoordinatorLayout and DrawerLayout

I have set up a DrawerLayout and a CoordinatorLayout in order to use a modern layout with a NavigationView and collapsing toolbar.
It works just fine until the device is rotated. Then the main_content is moved to a new permanent location. If I remove the appbar_scrolling_view_behavior from the main_content FrameLayout rotation works, but the content is no longer aware of the Toolbar.
Any advice?
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00">
<!-- ACTIONBAR START -->
<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"
android:background="#ff0000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<!-- ACTIONBAR END -->
<!-- MAIN CONTENT START -->
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#0000ff"/>
<!-- MAIN CONTENT END -->
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView ...>
<!-- NavigationView code omitted ... -->
</android.support.v4.widget.DrawerLayout>
fragment_main.xml (loaded into main_content)
<FrameLayout 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"
tools:context=".fragments.MainFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"/>
</FrameLayout>

A few points that should collectively resolve your problem:
The height of the AppBarLayout determins the expanded size of the collapsing toolbar, whilst the Toolbar determins the collapsed size. As such, you should set the AppBarLayout height to something more than the Toolbar (i.e. 280dp) to see the collapsing behaviour.
Immediately inside the AppBarLayout should be a CollapsingToolbarLayout, which contains the Toolbar and, optionally, other views too (normally an ImageView with a parallax collapse mode)
For the toolbar to collapse and expand correctly, it relies on a ViewGroup that supports nested scrolling (RecyclerView or NestedScrollView. As such, in your example you should try either changing main_content from a FrameLayout to a NestedScrollView, or conversely change the FrameLayout that forms the root layout of Fragment into a NestedScrollView.
Here is an example:
<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_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/coordinator_layout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="240dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar_layout"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/header_image"
android:src="#drawable/header_image"
android:scaleType="centerCrop"
android:contentDescription="#string/header_image"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Toolbar is white when expand

I have got AppBarLayout with Toolbar and CoordinatorLayout.
I have got RecyclerView inside this FrameLayout.
I made TabLayout.setVisibility(GONE);
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/colorText"
app:tabSelectedTextColor="#color/colorText"
app:tabIndicatorColor="#color/colorText"
app:tabIndicatorHeight="6dp" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
My issue is white Toolbar sometimes when its back from top edge.
When white color is appear and I drag more down it is back to normal Toolbar color.
I don't know where is problem.

It is an issue with the new v 23.0.0 library. If you use v 22.2.1 or lower you wont have that issue.

CollapsingToolbarLayout doesn't work well with NestedScrollView

I made an activity where image should collapse with toolbar and only text below would be visible. But When Toolbar being collapsed, there shows up a large gap between Toolbar and NestedScrollView
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:background="#color/white"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
app:elevation="5dp"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:toolbarId="#+id/toolbar"
android:id="#+id/collapsing"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.noframe.farmisagronom.util.ResizibleImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
android:minHeight="100dp"
android:maxHeight="400dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nesteview"
app:layout_anchorGravity="top"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
.....
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
And this activity looks really good.
But when i scroll up the NestedScrollView this goes out of control.
This little space between toolbar and text is getting on my nerves.
note that if there is large text in NestedScrollView problem won't show up, but if NestedScrollView + collapsed tool bar doesn't take all phone screen, then there is a gap between them.

Adding:
android:layout_gravity="fill_vertical"
to the NestedScrollView worked for me.