Develop Reference

Android material components bottom app bar cut off

I have tried to implement the material components bottom app bar, following these guidelines and doing a refactor to AndroidX + updating my AppTheme.
Material components - bottom app bar
So far so good, all working, but the button is cut off in my fragment.
The xml preview however shows this, which seems like everything is fine:
Here is my xml code:
<androidx.coordinatorlayout.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">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:elevation="2dp"
app:fabAlignmentMode="center"
app:fabCradleVerticalOffset="10dp"
app:fabCradleMargin="10dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
app:layout_anchor="#id/bottombar"
app:layout_anchorGravity="top|center"
app:srcCompat="#drawable/marker" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I even increased the fabCradleMargin and the fabCradleOffset - otherwise the button is completely in the bottom and not at all floating in that half circle as it is supposed to...
anyone got any clues for this? Thanks a lot!

So I noticed it has to do with the height of the bottom app bar. If i manually set it to 80dp, the Fab shows as it is supposed to.
I tried around a bit more and noticed this manual height setting is only necessary in fragments. I only placed the bottom app bar in a fragment to test it anyways.
So now I implemented it the same way as in the guideline in my MainActivityand then set up a function showFab(Boolean enable) that can then be called in different fragments based on the need.
Works like a charm, if anyone faces the same issues. I guess this might be as it is not supposed to be implemented in a single fragment only.

Android - How to place fab-menu(from yavski library) between 2 layouts

I'm using floating action menu from yavski library and I tried to place it between 2 layout just like in this question:
But when I did it with fab - menu from yavski library, it did not work...
What should I do?
EDIT
I'm adding the button between header and "cardview"(link).
When I slide down in this and I use default library for fab, it works well (Button disappear and appear when slide up). But when I use the special one, it at start looks good, but when i slide down, instead of disappearing it slides down too...
And the last problem is, that when the button is clicked, it moves a bit upwards...

"A simple library marrying together FAB + ..."
I dont use this special library your mentioned but with the default one it works like this and if the guy that created the projected worked well it should too:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/white">
//Content
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:onClick="process"
android:src="#drawable/ic_add"
app:layout_anchor="#id/ANCHOR_VIEW"
app:layout_anchorGravity="bottom|right|end"
app:backgroundTint="#color/accent"/>
</android.support.design.widget.CoordinatorLayout>

FAB from design support library does not move upward when snackbar is shown

This post says:
When you add a FloatingActionButton as a child of your
CoordinatorLayout and then pass that CoordinatorLayout to your
Snackbar.make() call - instead of the snackbar displaying over the
floating action button, the FloatingActionButton ... automatically
move upward as the snackbar animates in and returns to its position
when the snackbar animates out
I've made exactly as described there but FAB does not move upward. (Snackbar can be swiped out, it means that CoordinatorLayout knows about it.)
Upd
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:fitsSystemWindows="true">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/action_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.ActionBar"/>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/action_toolbar"/>
</RelativeLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginTop="?attr/actionBarSize"
android:background="#color/theme_primary_darker_color"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"/>
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/toolbar_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_navigation_white_24dp"
android:layout_margin="16dp"
android:visibility="gone"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#id/action_toolbar"
app:layout_anchorGravity="bottom|right|end"
app:pressedTranslationZ="12dp"/>
</android.support.design.widget.CoordinatorLayout>
Code:
mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
...
Snackbar.make(mCoordinatorLayout, R.string.waypoint_deleted, Snackbar.LENGTH_LONG).show();

I've written sample project based on the code you posted and I had to change three things to make FloatingActionButton aware of the Snackbar.
Set 'minifyEnabled' property of my build to false - looks like Proguard strips out some annotations (e.g. Behaviours) which are necessary to coordinate FloatingActionButton. You'll need to add some Proguard rules in your release build where Proguard is enabled.
Pass the FloatingActionButton as a first argument of Snackbar.make(), not the CoordinatorLayout itself as mentioned here.
Remove app:layout_anchor="#id/action_toolbar" and replace app:layout_anchorGravity="bottom|right|end" with the app:layout_gravity="bottom|right|end" from the layout (not sure if it's suitable for you).
If it doesn't work for you, you can try to write your own Behavior class as described in the article mentioned above.

I had a similar problem where my fab button wouldn't move down. Took me a while but it was because I had animations off in the developers option. Hope you got it working even though I know this post is a bit dated.

I was having the issue where the fab would not return to its original location after the snackbar disappeared. Make sure Animator duration scale is turned on. A good default is 1x.
The setting can be found in:
Settings app --> Developer Options
Dev Settings app (on emulators)
This setting along with other animation settings were turned off on one of my emulators. Turning it back on got the fab working correctly.

Android appcompat toolbar stretches when searchview gets focus

I'm updating an app to use the new Toolbar instead of the regular ActionBar.
In my app the user must be able to select a contact from their contact list. To do so, I've added a SearchView to the menu.
The contacts are already in the list; the SearchView is used to filter the list using the ArrayAdapter.getFilter() method.
It all worked fine using the ActionBar, but the Toolbar's height gets stretched to just behind the keyboard. Using the XML inspection from Android Device Monitor I can see the ListView exists behind my keyboard.
It almost seems as if the SearchView wants to display suggestions, but I have no such thing configured. Any idea what's going wrong?
The images illustrate the problem. They show the normal, expanded and focused state of the SearchView.
This is my XML menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_forwarding_contact_search"
app:showAsAction="always"
android:title="#string/forwarding_contact_search"
app:actionViewClass="android.support.v7.widget.SearchView"
android:icon="#drawable/abc_ic_search_api_mtrl_alpha"/>
</menu>
Edit
Giving the Toolbar a fixed height doesn't solve the problem, because it will make SearchView disappear when it has focus. Changing the gravity of either item seems to have no effect on the SearchView.

I had the same problem than OP, I tried the android:fitsSystemWindows="true" solution, but it was half resolved: the searchview didn't expand anymore but the notification bar (top of screen) became totally white (like the layout background) instead of red (my app theme).
I found an alternative way and it's working like a charm, so for those who are stuck, try this:
In your manifest, just add this line in your activity section:
android:windowSoftInputMode="adjustPan"
Example:
<activity
android:name=".MainActivity"
android:windowSoftInputMode="adjustPan"
android:label="My main activity" >
</activity>

Ok, I figured it out. There was no problem with the SearchView, because the same happened with ordinary EditTexts which were placed normally inside a layout xml. The Toolbar wasn't the problem either.
I created an empty activity and played around with anything I changed in my app and finally came to my theme. On KitKat and later I had <item name="android:windowTranslucentStatus">true</item> set on the theme, so the navigation drawer would appear behind the status bar.
Disabling/removing this would resolve the issue. This reminded me of the android:fitsSystemWindows="true" property. It is set on the Toolbar, but not in the layout xml of the main activity that contains the DrawerLayout.
I guess the DrawerLayout sets itself to fit the system windows.
E.g. there's no fitSystemWindows property here:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DashboardActivity">
The activity where the problem occurred did not have a NavigationDrawer, it was a new activity. Setting android:fitsSystemWindows="true" on the root node of the layout of the activity made things work fine.
So, for anyone to read this: if you have <item name="android:windowTranslucentStatus">true</item> in your theme, make sure any root node containing a toolbar contains a android:fitsSystemWindows="true".
Working sample:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
</LinearLayout>
</LinearLayout>

I had same issue like this but did't help above answers but after lots of search found something.
may help you too.!!
after add this attribute in toolbar
android:layout_height="?attr/actionBarSize"
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/myPrimaryColor"
android:minHeight="#dimen/abc_action_bar_default_height_material" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/myTextPrimaryColor"
android:layout_gravity="center" />
</android.support.v7.widget.Toolbar>

The accepted answer works fine, however I needed an alternative that would allow to view the Toolbar under translucent status bar.
The problem is that Toolbar uses paddings to cover for system components. As a result, the paddingBottom of the Toolbar is being set to soft keyboard's height whenever the keyboard appears. Solution was to reset the padding before calling super.onMeasure in my custom Toolbar class:
public class MyToolbar extends Toolbar {
(...)
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setPadding(getPaddingLeft(), getPaddingTop(), getPaddingRight(), 0);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}

It seems like a old question but I want to address the real cause about this issue.
In fact, the fitsSystemWindows does not only add statusBar insets into your views padding, but also keyboard's height. So, when keyboard showed, your toolbar(which is the view who consumes window insets) will gain a bottom padding equals to your keyboard's height.
Move fitSystemWindows to root node do solve this problem, but sometimes we can't do that, for example we need toolbar's background to fill the statusbar.
So, the real solution for this issue, I think, is to tell view only consume top insets. Luckily, Android do offer a method for us to do that.
private static final View.OnApplyWindowInsetsListener CONSUME_TOP_INSET_LISTENER = new View.OnApplyWindowInsetsListener() {
#RequiresApi(api = Build.VERSION_CODES.KITKAT_WATCH)
#Override
public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
int b = v.getPaddingBottom();
int l = v.getPaddingLeft();
int r = v.getPaddingRight();
v.setPadding(l, insets.getSystemWindowInsetTop(), r, b);
int il = insets.getSystemWindowInsetLeft();
int ir = insets.getSystemWindowInsetRight();
int ib = insets.getSystemWindowInsetBottom();
return insets.replaceSystemWindowInsets(il, 0, ir, ib);
}
};
public static void makeViewConsumeTopWindowInsetsOnly(#NonNull View view) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT_WATCH) {
view.setOnApplyWindowInsetsListener(CONSUME_TOP_INSET_LISTENER);
}
}
Add above code to some place, and call this method with the view you want to consumes top insets.

I ran into a similar issue and setting showAsAction="always|collapseActionView" inside the Search Menu Item (menu.xml) solved the stretching of the toolbar for me.

I had the same issue with a SearchView on a Toolbar with a TextView and Spinner in it. Closing the SearchView (either by pressing the Toolbar back button or by switching to a different tab in the ViewPager) caused the Toolbar to stretch out to just below the top of the keyboard.
I solved it by placing an extra layout around the views in my Toolbar.
Before:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
After
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>

simplest solution without changing xml and keeping translucent system bar is to add:
kotlin:
toolbar.setOnApplyWindowInsetsListener { toolbar, windowInsets ->
toolbar.updatePadding(
windowInsets.systemWindowInsetLeft,
windowInsets.systemWindowInsetTop,
windowInsets.systemWindowInsetRight,
0
)
windowInsets.consumeSystemWindowInsets()
}
please check if your fitsSystemWindows=true are placed correctly.

I would like to share my experience but before that I want to dropped this comment. So far, I really find this CoordinatorLayout shenanigans buggy and not worthy of being dropped in the SDK. Its just buggy. When it behaves like this erratically, the architecture on the xml layout is not much of a help to figure out whats going on. I followed the examples religiously and none of them worked.
Having said that, I am using the build tools version v24.0.2 (The latest as of this writing) and my situation may be of different than the rest. So I am putting this answer along with other answers here.
In my case, I am using this library for NavigationDrawer
As some answers here pointed out, its the navigation drawer. I tried not using that library and still having the problem. I have CoordinatorLayout as the parent layout of my two activities and programatically inserts the NavigationDrawer as instructed by the library author. The expanding Toolbar the size of the screen when focusing on an EditText is still there. Therefore, in my case, the problem is not coming from there.
Here's what I did in my case:
I removedfitsSystemWindows from the CoordinatorLayout layout of the activity. Contrary to what other people suggested here.
I am pasting my entire activity layout here:
<?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:id="#+id/coordinatorlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.HomeScreenActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="64dp"
app:expandedTitleMarginEnd="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_homescreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"/>
</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">
<FrameLayout
android:id="#+id/framelayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
<!--
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_homescreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
-->
</android.support.design.widget.CoordinatorLayout>
I did this on another activity and it works as expected. I don't have the expanding Toolbar anymore. But this problem occurred. I am about to pull my hair out. The status bar became white. Phoenix Wang solution on that post fix it for me and I quote his answer:
I found the answer in this link:Status Bar Color not changing with
Relative Layout as root element
So it turns out we need remove the
<item name="android:statusBarColor">#android:color/transparent</item> in
styles.xml(v21). And it works just fine for me.
My only concern is how will this solution holds in the upcoming updates. CoordinatorLayout should not be behaving like that.

In case you are using an EditText inside Toolbar, adding "flagNoExtractUi" in imeOptions , will solve the stretching edit area.
EditText for Search Action without stretching:
android:id="#+id/toolbar_editText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:inputType="text"
android:imeOptions="actionSearch|flagNoExtractUi"
android:singleLine="true" />

How does the Android L contacts app collapse its toolbar?

I've been trying to reproduce the way that the Contacts app on version 5.0 collapses the toolbar when the listview is scrolled.
Gallery of screenshots demonstrating the desired interaction
Note the collapse of the toolbar in stages, where it displays search+last contact, fades last contact, collapses last contact, collapses search, leaving only the tabs.
So far, I have a toolbar sitting above a recyclerview in a LinearLayout, and the toolbar is used as an actionbar, not standalone.
I can't figure out how to intercept the touch event on the recyclerview and make it shrink the toolbar, and then return the scroll event to the recyclerview. I tried putting the entire thing in a scrollview, but then the recyclerview couldn't calculate it's height properly and displayed no content. I tried overriding onscroll on the recyclerview, and found that it will only notify me when a scroll event started, and provide me with the first visible card id.
The way that looks right, but I can't get working for the life of me, is this:
getSupportActionBar().setHideOnContentScrollEnabled(true);
Which returns:
Caused by: java.lang.UnsupportedOperationException: Hide on content scroll is not supported in this action bar configuration.
Using a traditional actionbar, putting a toolbar below it, and setting hideoncontentscrollenabled also didn't work, scrolling never triggered the hide method on the actionbar.
-- edit --
I was able to get hideOnContentScrollEnabled working on a listview with a traditional actionbar, but the behavior is not the same as the contacts app. This is clearly not the method they used-- it simply triggers .hide() on the actionbar when a fling event occurs on a listview, which is notably different from the contacts app, which drags the toolbar along with the scroll event.
-- /edit --
So I abandoned that route, and put fill_parent on the cardview height, and animated a collapse on the toolbar. But how do I trigger it so that it follows the touch event and then returns the touch event to the recyclerview?
activity_main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:background="#color/colorPrimary"
/>
<fragment android:name="me.myapplication.FragmentTab"
android:id="#+id/tab_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
fragment_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="8dp"
android:background="#eeeeee"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
styles.xml
...
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
MainActivity.java
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
// Disable the logo in the actionbar, as per material guidelines
toolbar.getMenu().clear();
toolbar.setTitle("My toolbar");
setSupportActionBar(toolbar);

I haven't investigated the source code yet but this guy seems to have made life easy yet enlightening.
https://github.com/ksoichiro/Android-ObservableScrollView
EDIT
Google has just released Android Design Library. Please take a look as it contains all the effects of collapsing toolbars and much more.

Well, I have no idea how they do it, but... why don't you take a peek to the source code? Luckily for us, the Contacts app is still open-source on Android L (others weren't as lucky as Contacts, like Mail, which does not work anymore on L; or Keyboard, which they stopped updating anymore since the launch of their propietary Google Keyboard).
Anyway, here's the source code I think you should look at:
https://github.com/android/platform_packages_apps_contacts/blob/master/src%2Fcom%2Fandroid%2Fcontacts%2Factivities%2FActionBarAdapter.java
Note the method update(boolean skipAnimation) in Line 311, which calls animateTabHeightChange(int start, int end) (Line 437).
My guess is all the magic happens there ;-)

As of June 2015, your desired effect can be accomplished via the so called CollapsingToolbarLayout of the new design support library.
Based on the sample code here, I am figuring that:
the search cardview is child of the toolbar
the missed call cardview belongs to the collapsingtoolbar with the collapseMode attribute set to pin
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="112dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="false"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways">
<!-- Search layout -->
<android.support.v7.widget.CardView
</android.support.v7.widget.CardView>
</android.support.v7.widget.Toolbar>
<!-- Last call card view-->
<android.support.v7.widget.CardView
app:layout_collapseMode="pin">
</android.support.v7.widget.CardView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/primary_color"
app:layout_scrollFlags="scroll"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

No third party library is required now! Android is officially providing library. You can collapse the toolbar and do many other tweaks.
Check this android-developer's blog
And don't forget to add this dependency in your build.gradle file.
compile 'com.android.support:design:22.2.0'

I found this library that seems to do what you're looking for: https://github.com/kmshack/Android-ParallaxHeaderViewPager and this https://github.com/flavienlaurent/NotBoringActionBar
You can play the video to see the behavior: https://www.youtube.com/watch?v=sCP-b0a1x5Y
It might not be the 'new' standard way of doing it with ToolBar, but it might give you an idea by inspecting the code. It seems to attach a OnScrollListener to the scrolling content and then trigger changes on the size of the bar.

For me https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling%28part3%29/ has helped. A source code is found here: https://github.com/mzgreen/HideOnScrollExample/tree/master/app/src/main.
A RecycleView in your layout should look like:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Note that after starting an application 2 toolbars appear (actionbar and toolbar). So in your activity.java you should write so:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Hide ActionBar.
supportRequestWindowFeature(WindowCompat.FEATURE_ACTION_BAR);
getSupportActionBar().hide();
setContentView(R.layout.your_activity_layout);
...
The toolbar is customized as shown here: https://stackoverflow.com/a/26548766/2914140. I mean, it appears without title and any other elements, so you can add them in a layout.

Android's Contact app doesn't have an easy plug-and-play solution that you can grab for use in your own app.
It does a full implementation, essentially doing it the same way you would do it if you were implementing it from scratch. For context, before looking at the code, keep in mind how the views are laid out:
https://github.com/android/platform_packages_apps_contacts/blob/lollipop-release/res/layout/quickcontact_activity.xml
The MultiShrinkScroller is a FrameLayout which intermediates the scrolling behavior, but the main stuff is in a LinearLayout, so reducing the height of the higher views will "scroll" the lower views upwards.
The key file for the implementation is this one:
https://github.com/android/platform_packages_apps_contacts/blob/lollipop-release/src/com/android/contacts/widget/MultiShrinkScroller.java
public void scrollTo(int x, int y) {
final int delta = y - getScroll();
boolean wasFullscreen = getScrollNeededToBeFullScreen() <= 0;
if (delta > 0) {
scrollUp(delta);
} else {
scrollDown(delta);
}
updatePhotoTintAndDropShadow();
updateHeaderTextSizeAndMargin();
//... other stuff
}
private void scrollUp(int delta) {
// Collapse higher views first
if (getTransparentViewHeight() != 0) {
final int originalValue = getTransparentViewHeight();
setTransparentViewHeight(getTransparentViewHeight() - delta);
setTransparentViewHeight(Math.max(0, getTransparentViewHeight()));
delta -= originalValue - getTransparentViewHeight();
}
// Shrink toolbar as needed
final ViewGroup.LayoutParams toolbarLayoutParams
= mToolbar.getLayoutParams();
if (toolbarLayoutParams.height > getFullyCompressedHeaderHeight()) {
final int originalValue = toolbarLayoutParams.height;
toolbarLayoutParams.height -= delta;
toolbarLayoutParams.height = Math.max(toolbarLayoutParams.height,
getFullyCompressedHeaderHeight());
mToolbar.setLayoutParams(toolbarLayoutParams);
delta -= originalValue - toolbarLayoutParams.height;
}
// Finally, scroll content if nothing left to shrink
mScrollView.scrollBy(0, delta);
}
updatePhotoTintAndDropShadow(); and updateHeaderTextSizeAndMargin(); handle the change in tint and text as it gets collapsed so that it turns into the look and feel of a regular ActionBar/ToolBar.
You could grab the MultiShrinkScroller file itself and adapt it for your own use, but there are probably easier implementations nowadays (including those from Android's design library).