INTRODUCTION TO COORDINATOR LAYOUT ON ANDROID

At this year’s I/O developers conference, Google introduced a new Android Design Support Library to help developers use material design in their apps. It contains many important material design building blocks and it works for API level 7 and higher. If you somehow missed it check out the google android blog post right here: http://android-developers.blogspot.com/2015/05/android-design-support-library.html.

MEET ANDROID COORDINATORLAYOUT

Among all the goodies the one that looks really interesting is the new “super-powered” FrameLayout called CoordinatorLayout. As you may have guessed from its name, the super power of this layout is the ability to coordinate dependencies between child views.

All you need to do is to wrap views inside CoordinatorLayout. Let’s dive into the code. The demo is very simple; it contains Floating Action Button which triggers a Snackbar.

First, add Support Design Library in gradle:
compile 'com.android.support:design:22.2.0'

Now lets create a simple layout for our activity

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout>

And the main activity class:

public class MainActivity extends AppCompatActivity {

  @Override  
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        Snackbar.make(view, "Hello Snackbar", Snackbar.LENGTH_LONG).show();
      }
    });
  }
}

Demo time:

That’s pretty cool, huh?

But what happens if you want to use other FAB implementation? FAB implementation from Support Library doesn’t have menu options so let’s try an alternative open source FAB librarycreated by one of Base’s developers.

compile 'com.getbase:floatingactionbutton:1.9.1'

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        app:fab_icon="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout>

The CoordinatorLayout doesn’t work out of the box in that case. That’s because our view doesn’t have a default CoordinatorLayout.Behavior implementation. The solution? We’ll either have to wait until someone adds it…

…or we can do this ourselves by writing custom Behavior implementation for that view in our project.

VIEWS LEARN HOW TO BEHAVE

That’s the real power of this framework, you don’t have to have access to the view’s class to make your own behavior for that view. You can also change a default behavior for any view.

First we need to extend Behavior class:

public class FloatingActionButtonBehavior extends CoordinatorLayout.Behavior<FloatingActionButton>

To make that class inflatable from XML we need to add constructor with Context and AttributeSet parameters.

public FloatingActionButtonBehavior(Context context, AttributeSet attrs) {}

Next step is to override method layoutDependsOn() and return true if we want to listen for changes. In our case we want to listen only for Snackbar objects changes.

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
  return dependency instanceof SnackbarLayout;
}

Now let’s go to the actual behavior implementation. Method onDependentViewChanged is called each time depended view changes inside CoordinatorLayout. In this method we can read the current Snackbar view state. We want to move FAB up when Snackbar shows up. To do this we need to translate the Y of the FAB view to the height of the Snackbar view. Snackbar animation starts with Y translation set to Snackbar height and to get the right translation value we need to subtract Snackbar height from its translate Y value. According to documentation we should return true when the object changes its position on the screen.

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
  float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
  child.setTranslationY(translationY);
  return true;
}

Last part is to tell the CoordinatorLayout to use FloatingActionButtonBehavior for that view. We can do this in 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        app:layout_behavior="com.getbase.coordinatorlayoutdemo.FloatingActionButtonBehavior"
        app:fab_icon="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout>

And that’s it. The proof:

If you want to define a default behavior to your view just add DefaultBehavior annotation with path to your Behavior class.

The code from this blog post is also available on github:https://github.com/ggajews/coordinatorlayoutwithfabdemo

Happy coding!

https://lab.getbase.com/introduction-to-coordinator-layout-on-android/