What is CoordinatorLayout?

Just had a look at the demo app of new Android support design library. It's provided by Chris Banes on github. Throught the app, CoordinatorLayout is used Heavily. Also, many of the support design library classes such as FloatingActionButton, SnackBar, AppBarLayout etc. behaves differently when used inside CoordinatorLayout.

Can someone please shed some lights on what is CoordinatorLayout and how it is different from other ViewGroups in android, or at least provide correct path towards learning 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!.

CoordinatorLayout is essentially the frame layout with lot of capabilities which is obvious from the name, it automates the coordination among its children and helps build beautiful views. Its implementation can be seen in Google Play Store App.How the toolbar collapses and changes colors.

The best thing about CoordinatorLayoutis the behavior we give to its direct or indirect descendants. You must have seen while scrolling all the UI gets into motion. Its highly likely the behavior is working its magic.

To give a quick snap-shot of what's useful in the Android Documentation :

Use CoordinatorLayout to simply control the relational behavior of your views ,

For instance if you want your ToolBar to collapse or hide. Google made it really easy by introducing AppBarLayout & CollapsingToolbarLayout, which both work best under a CoordinatorLayout.

The other most-used situation is when you want a FloatingActionButton to stick to the bottom of your CollapsingToolbar and move around with it, putting them under a coordinatorLayout and use app:layout_anchor="@id/YourAppBarId" for the glue(!) and app:layout_anchorGravity="bottom|end" as position will be enough for you to see the magic work!

By using this layout as a context , the child views will have better collaboration and behave in an intelligent way because they will be aware of each other through the CoordinatorLayout context , this means your FloatingAction Buttons will no longer get overlapped by a snackBar etc.

these were just a quick summary of most useful parts , so if you want to save more time in animating your app it will be worth it to have little deeper dive in the subject.

see the Google Scrolling view activity template

One thing that is important to note is that CoordinatorLayout doesn’t have any innate understanding of a FloatingActionButton or AppBarLayout work - it just provides an additional API in the form of a Coordinator.Behavior, which allows child views to better control touch events and gestures as well as declare dependencies between each other and receive callbacks via onDependentViewChanged().

Views can declare a default Behavior by using the CoordinatorLayout.DefaultBehavior(YourView.Behavior.class) annotation,or set it in your layout files by with the app:layout_behavior="com.example.app.YourView$Behavior" attribute. This framework makes it possible for any view to integrate with CoordinatorLayout.

Available now! The Design library is available now, so make sure to update the Android Support Repository in the SDK Manager. You can then start using the Design library with a single new dependency:

compile 'com.android.support:design:22.2.0' Note that as the Design library depends on the Support v4 and AppCompat Support Libraries, those will be included automatically when you add the Design library dependency. We also took care that these new widgets are usable in the Android Studio Layout Editor’s Design view (find them under CustomView), giving you an easier way to preview some of these new components.

The Design library, AppCompat, and all of the Android Support Library are important tools in providing the building blocks needed to build a modern, great looking Android app without building everything from scratch.

The CoordinatorLayout is a super-powered FrameLayout.

By default, if you add multiple children to a FrameLayout, they would overlap each other. A FrameLayout should be used most often to hold a single child view. The main appeal of the CoordinatorLayout is its ability to coordinate the animations and transitions of the views within it. Using XML only, you can describe a layout where a FAB moves out of the way of an incoming Snackbar, for example, or have a FAB (or any other View really) that is apparently attached to another widget and moves on-screen with the widget.

Here is the main source tutorial.