What is CoordinatorLayout?

Question

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.

Solution 1

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 :)

Solution 2

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:

Solution 3

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!.

Solution 4

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.

Solution 5

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

View more solutions

Comments

[CommonsWare]

android-developers.blogspot.com/2015/05/… It also has an extensive, albeit confusing, description in the JavaDocs (not presently available in direct-linkable form, but you can download a ZIP from developer.android.com/preview/download.html).

[eRaisedToX]

What actually is the advantage of using CordinatorLayout ?. What edge it has over others?

[Yogesh Seralia]

link is broken.

[Snake]

Wouldn't relative or constraint layout also have relationship between views ?if one moves up then the related view move up. Why coordinator is better ?

[Favour Felix Chinemerem]

@Snake 1. The CoordinatorLayout helps in arranging a view over another view, something neither a ConstraintLayout or a RelativeLayout can do. 2. It also helps to animate the transition of views. A good example is the transition of the "View Contact" activity/fragment in the Whatsapp app.

[Sujit]

FrameLayout on steroids 😂. Love it!