CoordinatorLayout

CoordinatorLayout allows to specify the coordinate dependencies between child views. But most signifant feature is abilty to provide interaction behavior plugin for child views. Without this CoordinatorLayout can be considered as powerful FrameLayout.

There are widgets of material design like AppBarLayout are designed special to be as direct child of CoordinatorLayout.

Such widgets have a built-in behavior plugin implementation. For example, FAB changes its visibility depending on the visibility of the AppBarLayout, when anchored to it.

CoordinatorLayout defines additional xml properties for its children:

• app:layout_anchor - specifies id of the view that the current view depends on
• app:layout_anchorGravity - specifies how the current view depends
• app:layout_behavior - specifies behavior for child. It can be class name, or referrence to built-in behaviour like string/appbar_scrolling_view_behavior.

scrolling activity

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    android:fitsSystemWindows="true"
    >

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context=".screens.main.WebActivity"
        tools:showIn="@layout/web_activity">

<-- put here some layout or single view -->
       
    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.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" />

    <com.google.android.material.appbar.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">

        <com.google.android.material.appbar.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|enterAlwaysCollapsed"
            app:toolbarId="@+id/toolbar">

            <androidx.appcompat.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">

            </androidx.appcompat.widget.Toolbar>

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

A vertical scrolling activity is one of typical usage of CoordinatorLayout. You can generate it in Android Studio

File->New->Activity->Scrolling Activity

Main highlights.

NestedScrollView has app:layout_behavior = "@string/appbar_scrolling_view_behavior", which checks is the content scrolling allowed, or whether appbar should collapse or expand.

You can replace NestedScrollView by other modern view like RecyclerView. Some views like ScrollView is not working as expected.

Nested scrolling can originate not only on direct children of a CoordinatorLayout, but on any child View. For example, ViewPager with RecyclerView for pages also will work as expected. Just remember to assign the behavior in the app: layout_behavior property for ViewPager.

AppBarLayout is extension of LinearLayout with vertical orientation. You can assign different values of app:layout_scrollFlags for children. Possible values are:

• scroll - view will be scroll in direct relation to scroll events
• snap - upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it’s closest edge
• enterAlways - when entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling.
• enterAlwaysCollapsed - an additional flag for enterAlways which modifies the returning view to only initially scroll back to it’s collapsed height.
• exitUntilCollapsed - when exiting (scrolling off screen) the view will be scrolled until it is "collapsed"

CollapsingToolbarLayout is a wrapper Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. One interesting feature is that the views can be scrolled within this layout in a parallax fashion (usually ImageView).

<com.google.android.material.appbar.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"
    app:toolbarId="@+id/toolbar">

    <ImageView
        android:id="@+id/toolbarImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:fitsSystemWindows="true"
        android:src="@drawable/myimage"
        app:layout_collapseMode="parallax" />

    <androidx.appcompat.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">

    </androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>

behaviour

A Behavior implements one or more interactions that a user can take on a child view. These interactions may include drags, swipes, flings, or any other gestures.

There are some built-in behaviours. For example, SwipeDismissBehavior provides support for the 'swipe-to-dismiss' gesture.

val swipe: SwipeDismissBehavior<MyView> = SwipeDismissBehavior()

swipe.setSwipeDirection(
    SwipeDismissBehavior.SWIPE_DIRECTION_ANY
    )

swipe.setListener( 
    object : SwipeDismissBehavior
                      .OnDismissListener {
        override fun onDismiss(view: View?) {
            //...
        }

        override fun onDragStateChanged(state: Int) {
            //...
        }
    })

You can implement own behaviour for the specified view.

class CustomBehaviour(context: Context, 
attrs: AttributeSet) :
    CoordinatorLayout.Behavior<MyView<(context, attrs) {

    override fun layoutDependsOn(
        parent: CoordinatorLayout,
        child: MyView,
        dependency: View
    ): Boolean {
        return dependency is AppBarLayout
    }

    override fun onDependentViewChanged(
        parent: CoordinatorLayout,
        child: MyView,
        dependency: View
    ): Boolean {
        // do something ...
        return super.onDependentViewChanged(parent, child, dependency)
    }
    
    // ...
}

You can assign behaviour programmatically

val customBehaviour = CustomBehaviour()
yourView.getLayoutParams().behavior = customBehaviour

You can assign behaviour in the app:layout_behavior xml property

<FrameLayout
  android:layout_height=”wrap_content”
  android:layout_width=”match_parent”
  app:layout_behavior=”.CustomBehaviour” />