Android: CoordinatorLayout

In this post I will let you know about the new layout introduced in Android Design Support Library.

The CoordinatorLayout is a super-powered FrameLayout. It is similar to Frame Layout yet its behavior attribute makes it different from other layouts. If you have used a FrameLayout before, you should be very comfortable using CoordinatorLayout. If you haven’t used a FrameLayout, do not worry, it is pretty straightforward.

CoordinatorLayout is intended for two primary use cases:

- As a top-level application decor or chrome layout

- As a container for a specific interaction with one or more child views

By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.

Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.

Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. This can be used to place floating views relative to other arbitrary content panes.

Children can specify insetEdge to describe how the view insets the CoordinatorLayout. Any child views which are set to dodge the same inset edges by dodgeInsetEdges will be moved appropriately so that the views do not overlap.

-Dependency:

For using CoordinatorLayout in you app import Android Support Library into your project, by adding the following dependency to your app build.gradle file:

           dependencies {

               ......

                   compile 'com.android.support:design:23.0.0'

          }

Above Support Library also includes others views namely Snackbar, CollapsingToolbar, FloatingActionButton etc out of which some of them we will be using today.

1. To show the use of CoordinatorLayout, we will simply make layout containing a FAB button which will automatically slides out of the way when a Snackbar is displayed. The CoordinatorLayout is the root layout. Within it, we have a button, that is centered on screen, and a FAB, that’s positioned at the bottom right of the screen, with a little margin to ensure we abide by the material design guidelines.

The layout class is as follows:

<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/coordinatorLayout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.sample.foo.usingcoordinatorlayout.FabAndSnackbarActivity">

    <Button

        android:id="@+id/showSnackbarButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="@string/show_snackbar"/>

    <android.support.design.widget.FloatingActionButton

        android:id="@+id/fab"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom|right"

        android:src="@android:drawable/ic_popup_disk_full"/>

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

2. Now create a class FabAndSnackbarActivity.java and add the following code:

public class FabAndSnackbarActivity extends AppCompatActivity {

    private Button mShowSnackbarButton;

    private CoordinatorLayout mCoordinatorLayout;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_fab_and_snackbar);

        mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);

        mShowSnackbarButton = (Button) findViewById(R.id.showSnackbarButton);

        mShowSnackbarButton.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Snackbar.make(mCoordinatorLayout,

                        "This is a simple Snackbar", Snackbar.LENGTH_LONG)

                        .setAction("CLOSE", new View.OnClickListener() {

                            @Override

                            public void onClick(View v) {

                                // Custom action

                            }

                        }).show();

            }

        });

    }

}

3. Now compile it and run your program. You will observe that the FAB button automatically slides up and out of the way for the Snackbar, when it is shown, and slides down and back to it’s position, when the snackbar is exiting from view. 

That's all. Share and comment if any issues.