What is CoordinatorLayout?

What is a CoordinatorLayout? Don't let the fancy name fool you, it is nothing more than a FrameLayout on steroids

To best understand what a CoordinatorLayout is/does, you must first of all understand/bear in mind what it means to Coordinate.

If you Google the word

Coordinate

This is what you get:

I think these definitions helps to describe what a CoordinatorLayout does on its own and how the views within it behave.

A CoordinatorLayout (a ViewGroup) brings the different elements (child Views) of a (̶a̶ ̶c̶o̶m̶p̶l̶e̶x̶ ̶a̶c̶t̶i̶v̶i̶t̶y̶ ̶o̶r̶ ̶a̶n̶ ̶o̶r̶g̶a̶n̶i̶z̶a̶t̶i̶o̶n̶)̶ layout into a harmonious or efficient relationship:

With the help of a CoordinatorLayout, child views work together harmoniously to implement awesome behaviours such as

drags, swipes, flings, or any other gestures.

Views inside a CoordinatorLayout negotiate with others in order to work together effectively by specifying these Behaviors

A CoordinatorLayout is a super cool feature of Material Design that helps to create attractive and harmonized layouts.

All you have to do is wrap your child views inside the 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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"> <android.support.design.widget.AppBarLayout    android:id="@+id/app_bar"    android:layout_width="match_parent"    android:layout_height="@dimen/app_bar_height"    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="match_parent"        android:fitsSystemWindows="true"        app:contentScrim="?attr/colorPrimary"        app:layout_scrollFlags="scroll|exitUntilCollapsed">        <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" />        <TableLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"/>    </android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><include layout="@layout/content_scolling" /><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"    app:layout_anchor="@id/app_bar"    app:layout_anchorGravity="bottom|end"    app:srcCompat="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>

and content_scrolling:

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.NestedScrollView      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" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity" tools:showIn="@layout/activity_scolling"> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_margin="@dimen/text_margin"    android:text="@string/large_text" /> </android.support.v4.widget.NestedScrollView>

What this gives us is a layout that can be scrolled to collapse the Toolbar and hide the FloatingActionButton

Open:

Closed:

Here it is you are looking for.

from docs

the Design library introduces CoordinatorLayout, a layout which provides an additional level of control over touch events between child views, something which many of the components in the Design library take advantage of.

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

in this link you will see the demo videos of all above mentioned views.

hope this helps :)

An additional point to note. Since OP specifically asked

Also, many of the support design libabry classes like FloatingActionButton, SnackBar, AppBarLayout etc. behaves differently when used inside CoordinatorLayout.

And I guess it is because of this.

CoordinatorLayout is a super-powered FrameLayout.

FAB Button, SnackBar works on the concept of FrameLayout, and since CoordinatorLayout itself has functionality of FrameLayout, it might make other views to behave differently!.