Develop Reference

Toolbar not responding to Listview scroll events

I have an activity which contains a custom toolbar and a simple listview. I want the toolbar respond when the listview is scrolled. However, it is not working.
Here is the .xml 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="com.abdralabs.talksee.HistoryActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/history_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/history_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/title"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/lv_history"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</ListView>
Here is the .java file
public class HistoryActivity extends AppCompatActivity {
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_history);
toolbar = (Toolbar)findViewById(R.id.history_toolbar);
/*
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
*/
toolbar.setTitle("History");
String[] rcArray = {"A","B","C","D","A","B","C","D","A","B","C","D","A","B","C","D","A","B","C","D","A","B","C","D","A","B","C","D"};
ArrayAdapter adapter = new ArrayAdapter<String>(this,
R.layout.list_history, rcArray);
ListView listView = (ListView) findViewById(R.id.lv_history);
listView.setAdapter(adapter);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
return super.onCreateOptionsMenu(menu);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
/*
switch (item.getItemId()){
case android.R.id.home:
NavUtils.navigateUpFromSameTask(this);
break;
}
*/
return super.onOptionsItemSelected(item);
}
}
What have I done wrong?
EDIT:
In response to rafsanahmad007's answer
I have applied the changes as per your suggestion but still there is no change.
When I scroll through the ListView there is no change to the size of the ToolBar. However, when I click on the ToolBar itself and make an up & down motion the ToolBar moves up & down too. What I want to achieve is, when I scroll the ListView downwards the ToolBar should collapse and when I scroll the ListView upwards the ToolBar should get to its normal size/position.
The following pictures depict how the ToolBar is responding currently.
As you can see in the above pics, the ListView is not being scrolled, but the ToolBar itself is being scrolled. What I want is, when I scroll the ListView the ToolBar should scroll only during that time. I hope I have clarified myself.

try this:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="80dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
</android.support.design.widget.AppBarLayout>
you can also get Help from Here

Android design Library AppBar scrolling behavior enterAlways

I am using the latest version of the design support library (23.1.1) and I am facing an issue when I use the CollapsingToolbarLayout with the enterAlways scroll flag. Basically, when you scroll back up, the view appears but if also leaves a empty white space at top.
Normal View:
After scrolling down and then back up (notice the whitespace below status bar):
MainActivity.java
public class MainActivity extends AppCompatActivity {
AppBarLayout appBar;
View expandedView;
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setTitle("");
initViews();
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
private void initViews() {
appBar = (AppBarLayout) findViewById(R.id.appBar);
appBar.addOnOffsetChangedListener(appBarOffsetChangedListener);
expandedView = findViewById(R.id.expandedView);
RecyclerView rv = (RecyclerView) findViewById(R.id.rv);
rv.setLayoutManager(new LinearLayoutManager(this));
rv.setAdapter(new DummyAdapter());
}
private AppBarLayout.OnOffsetChangedListener appBarOffsetChangedListener = new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
int maxOffset = appBar.getTotalScrollRange();
verticalOffset = Math.abs(verticalOffset);
if(verticalOffset > maxOffset)
return;
float percentage = verticalOffset / (float) maxOffset;
if(expandedView!=null)
expandedView.setAlpha(1 - percentage);
}
};
}
activity_main.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="com.media2359.fragmenttoolbarchange.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:id="#+id/expandedView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:paddingLeft="#dimen/toolbar_text_margin_left"
android:paddingTop="#dimen/toolbar_text_margin_top"
tools:background="#color/colorPrimaryDark">
<TextView
android:id="#+id/tvName"
style="#style/TextAppearance.AppCompat.Headline"
android:layout_width="#dimen/toolbar_text_width"
android:layout_height="wrap_content"
android:text="Hello" />
<TextView
android:id="#+id/tvTime"
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="#dimen/toolbar_text_width"
android:layout_height="wrap_content"
android:layout_below="#id/tvName"
android:layout_marginTop="7dp"
android:text="04 Feb, Tuesday evening" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/item_dummy" />
</android.support.design.widget.CoordinatorLayout>
Using enterAlwaysCollapsed along with enterAlways avoids this issue but I want the full view to come back because in the actual app, the expanded section is way smaller.
Another thing that I have noticed is that, the height of the whitespace is equal to the height to the toolbar.
EDIT 1
I replaced exitUntilCollapsed with snap and then there wasn't any white space but then the toolbar doesn't pin and scrolls away
EDIT 2
Looks like this is an issue with the Design Library: CollapsingToolbarLayout enterAlways not supported
Temporary Workaround: Cheesesquare: enterAlways produces wrong layout

Perhaps that's because of:
enterAlways
Which the codepath/android_guides says:
enterAlways: The view will become visible when scrolling up. This flag
is useful in cases when scrolling from the bottom of a list and
wanting to expose the Toolbar as soon as scrolling up takes place.
Maybe you wanna try this: (standard way)
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Honestly, I didn't see somebody is using enterAlways in CollapsingToolbarLayout in my whole development life.Especially, with those two flags:
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"
Otherwise, It could be a bug and needs the Google's staffs to answer about it.

Prevent CollapsingToolbarLayout collapse if not needed

Using:
compile 'com.android.support:design:23.0.0'
compile 'com.android.support:appcompat-v7:23.0.0'
compile 'com.android.support:cardview-v7:23.0.0'
compile 'com.android.support:recyclerview-v7:23.0.0'
With the project Cheesesquare updated.
Into the detail of cheese, I remove 2 cards (to have only one). Is there a way to prevent the collapsing of the toolbar that show a blank space?

To implement such behaviour in Cheesesquare example just modify android:layout_height param of the NestedScrollView to wrap_content.
It will prevent scrolling by content if it is small enough to fit on the screen.
And to prevent scrolling by CollapsingToolbarLayout you should programmatically set layout_scrollFlags parameter to the AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP value.
Here described how you can do this.

You can use below code for this:
public static void stopScroll() {
AppBarLayout.LayoutParams toolbarLayoutParams = (AppBarLayout.LayoutParams) collapsing_toolbar.getLayoutParams();
toolbarLayoutParams.setScrollFlags(0);
collapsing_toolbar.setLayoutParams(toolbarLayoutParams);
CoordinatorLayout.LayoutParams appBarLayoutParams = (CoordinatorLayout.LayoutParams) appbar.getLayoutParams();
appBarLayoutParams.setBehavior(null);
appbar.setLayoutParams(appBarLayoutParams);
}
public static void startScroll() {
AppBarLayout.LayoutParams toolbarLayoutParams = (AppBarLayout.LayoutParams) collapsing_toolbar.getLayoutParams();
toolbarLayoutParams.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
collapsing_toolbar.setLayoutParams(toolbarLayoutParams);
CoordinatorLayout.LayoutParams appBarLayoutParams = (CoordinatorLayout.LayoutParams) appbar.getLayoutParams();
appBarLayoutParams.setBehavior(new AppBarLayout.Behavior());
appbar.setLayoutParams(appBarLayoutParams);
}

In xml I have used property
app:layout_scrollFlags="snap" in <android.support.design.widget.CollapsingToolbarLayout
and following in the activity
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitle(null);
toolbar.setCollapsible(false);
It is working now.

A data-binding solution inspired by #Vishal's answer
<com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.appbar.CollapsingToolbarLayout
app:enableCollapsingScroll="#{listItems.size > 0}"
... />
</com.google.android.material.appbar.AppBarLayout>
#BindingAdapter("app:enableCollapsingScroll")
fun setCollapsingToolbarLayoutScrollEnabled(collapsingToolbarLayout: CollapsingToolbarLayout, enabled: Boolean?) {
val lp = collapsingToolbarLayout.layoutParams as AppBarLayout.LayoutParams
if (enabled.orFalse()) {
lp.scrollFlags = AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL or AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
} else {
lp.scrollFlags = AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP
}
collapsingToolbarLayout.layoutParams = lp
}

Here is my working code, to initially collapes the bar:
_appbar.setExpanded(false);
AppBarLayout _appbar = (AppBarLayout) findViewById(R.id.appbar);
_appbar.setExpanded(false);
here is the layout xml
<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:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
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="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
the reference is: AppBarLayout.setExpanded(boolean)

AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) activityUserGroupProfleBinding.collapsingToolbarLayout.getLayoutParams();
if (logic) {
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED);
} else {
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP);
}
activityUserGroupProfleBinding.collapsingToolbarLayout.setLayoutParams(params);

Show view when toolbar collapses

I have an activity with a CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout and Toolbar. So, basically, a view that collapses when scrolling a RecyclerView.
What I need to do is to show a custom view when the view of the expanded layout is hidden due to collapsing.
This is my 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: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="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:contentScrim="#2196F3"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/header"
layout="#layout/header_big_first_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.CollapsingToolbarLayout
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello!"/>
</android.support.v7.widget.CollapsingToolbarLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/categories_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
In the end, when the toolbar is expanded the view loaded with the element is shown. When it is collapsed it doesn't . When it disappears the TextView inside Toolbarshould be shown. Currently it shows all the time.
I've been looking in the events of CollapsingToolbarLayout to add a listener when it changes size so I can check if that is smaller than a value and show that view.
This can be kind of tricky to explain but I believe I made myself clear. I've been googling around and cannot find anyone trying to do the same.

Taking a look at the CollapsingToolbarLayout source, the content scrim animations are triggered via an OnOffsetChangedListener on the AppBarLayout. So you could add another one to trigger alpha animations on your text view:
mListener = new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if(collapsingToolbar.getHeight() + verticalOffset < 2 * ViewCompat.getMinimumHeight(collapsingToolbar)) {
hello.animate().alpha(1).setDuration(600);
} else {
hello.animate().alpha(0).setDuration(600);
}
}
};
appBar.addOnOffsetChangedListener(mListener);

Instead of trying to replicate when the scrim is supposed to show (collapsed) or not (expanded), a better way is to override the setScrimsShown method, which is called every time inside the CollapsingToolbarLayout's onOffsetChanged, and add a listener to it like this:
public class CollapsingToolbarLayoutWithScrimListener extends CollapsingToolbarLayout {
public CollapsingToolbarLayoutWithScrimListener(Context context) {
super(context);
}
public CollapsingToolbarLayoutWithScrimListener(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CollapsingToolbarLayoutWithScrimListener(Context context, AttributeSet attrs, int defStyleAttr) {
super(context,attrs,defStyleAttr);
}
private ScrimListener scrimListener = null;
#Override
public void setScrimsShown(boolean shown, boolean animate) {
super.setScrimsShown(shown, animate);
if (scrimListener != null)
scrimListener.onScrimShown(shown);
}
public void setScrimListener(ScrimListener listener) {
scrimListener = listener;
}
public interface ScrimListener {
void onScrimShown(boolean shown);
}
}

how to pin title in Toolbar inside CollapsingToolbarLayout

Here is my layout:
<android.support.design.widget.AppBarLayout
<android.support.design.widget.CollapsingToolbarLayout
...
<android.support.v7.widget.Toolbar
...
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I want title stays in Toolbar, not in CollapsingToolbarLayout. So I changed my code from:
mCollapsingToolbar = ...
mCollapsingToolbar.setTitle(title);
to:
mTitleBar = ...
setSupportActionBar(mTitleBar);
getSupportActionBar().setTitle(title);
But the title is not visible. My device is Nexus 6 5.1.0
Thanks in advance.
Update 1: I have changed code to this, still not work :(
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Update 2: Here is code snippet for those three views:
private void setUpAppBarLayout() {
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
appBarLayout.setBackgroundColor(extractBackgroundColor());
}
private void setUpCollapsingToolbarLayout() {
if (null == mCollapsingToolbar) {
mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
}
}
private void setUpToolbar(String title) {
mToolbar = (Toolbar) findViewById(R.id.tb_main);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
supportFinishAfterTransition();
}
});
mToolbar.inflateMenu(R.menu.menu_group_activity);
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
if (R.id.action_settings == item.getItemId()) {
...
return true;
} else {
return false;
}
}
});
mToolbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mRecyclerView.smoothScrollToPosition(0);
}
});
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
After called setSupportActionBar(mToolbar), both title and menu are invisible.

In order for the Toolbar title to work with the CollapsingToolbarLayout you need to set the ctl's title enabled to false
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);

The solution is easy. As Daniel Persson said, you just set collapsingToolbarLayout.setTitleEnabled(false);
or use the XML attribute app:titleEnabled="false"
and set the title with the inner Toolbar instead of the CollapsingToolbarLayout, i.e.: toolbar.setTitle(title);
It is very simple and it not required workarounds.

It actually looks like the title from the Toolbar is gone when you wrap it inside a CollapsingToolBarLayout, so the only solution I got for this issue is to create a new TextView and add it to the ToolBar, remember that Toolbar is a ViewGroup, so you can add widgets to it. It's not as clean as I would like, but it works for now.
TextView text = new TextView(this);
text.setText(title);
text.setTextAppearance(this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse);
toolbar.addView(text);
Hope I can find an xml-friendly solution for this soon, too.

The trick here is to set the titleEnabled = false of CollapsingToolbarLayout
<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"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Message"
app:titleMarginTop="13dp"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
Or through code:
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(false);

You need to enable actionBar.setDisplayHomeAsUpEnabled(true); in your code

Maybe this? Just add android:fitsSystemWindows="true" to AppBarLayout
<android.support.design.widget.CoordinatorLayout
...
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
...
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My Title"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
This is what you get