🏗️ Android CoordinatorLayout

🧭 1. What Is CoordinatorLayout?

CoordinatorLayout is a powerful layout container provided by the AndroidX library (androidx.coordinatorlayout.widget.CoordinatorLayout).

Its main characteristics are:

• It coordinates interactions and animations among child views.
• Works seamlessly with components like AppBarLayout, CollapsingToolbarLayout, FloatingActionButton, Snackbar, and BottomSheetBehavior.
• Serves as a foundation for Material Design motion and interaction on Android.

---

🧩 2. Basic Usage

A simple example:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Collapsible AppBar -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/header_image"
                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"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <!-- Scrollable Content -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/long_text"
            android:padding="16dp"/>
    </androidx.core.widget.NestedScrollView>

    <!-- FloatingActionButton with Interaction -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/coordinatorLayout"
        app:layout_anchorGravity="bottom|end"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

---

⚙️ 3. The Core of CoordinatorLayout: Behavior

1️⃣ Concept

A Behavior defines how a child view within a CoordinatorLayout responds to interactions or events triggered by other views.

Each child view can specify a app:layout_behavior attribute that binds it to a Behavior class.

2️⃣ Custom Behavior Example

Here’s an example of a custom Behavior that hides a FloatingActionButton when the user scrolls down and shows it when scrolling up:

class ScrollAwareFABBehavior(context: Context, attrs: AttributeSet) :
    FloatingActionButton.Behavior(context, attrs) {

    override fun onStartNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: FloatingActionButton,
        directTargetChild: View,
        target: View,
        axes: Int,
        type: Int
    ): Boolean {
        // Listen for vertical scrolls
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL
    }

    override fun onNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: FloatingActionButton,
        target: View,
        dxConsumed: Int,
        dyConsumed: Int,
        dxUnconsumed: Int,
        dyUnconsumed: Int,
        type: Int
    ) {
        if (dyConsumed > 0 && child.visibility == View.VISIBLE) {
            child.hide()
        } else if (dyConsumed < 0 && child.visibility != View.VISIBLE) {
            child.show()
        }
    }
}

In your XML layout:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_behavior="com.example.ScrollAwareFABBehavior"
    ... />

---

🧠 4. Common Use Cases of CoordinatorLayout

Scenario	Key Components	Description
Collapsing Toolbar	AppBarLayout + CollapsingToolbarLayout + NestedScrollView	Creates a collapsing header image effect
FAB & Snackbar Coordination	CoordinatorLayout + FloatingActionButton + Snackbar	FAB automatically moves up when Snackbar appears
Draggable Bottom Sheet	CoordinatorLayout + BottomSheetBehavior	Enables sliding bottom panels
Custom Interaction Animation	CoordinatorLayout + Custom Behavior	Define view interactions and motion effects

---

🎬 5. Common Built-in Behaviors

Behavior	Class	Description
AppBar scroll linkage	AppBarLayout.ScrollingViewBehavior	Collapses toolbar as content scrolls
Bottom Sheet	BottomSheetBehavior	Provides bottom sliding panel
FAB auto-move with Snackbar	Built-in	Automatically moves FAB upward when Snackbar appears
Custom interaction	Custom CoordinatorLayout.Behavior	Defines flexible linked animations or reactions

---

📘 6. Practical Tips

• CoordinatorLayout should be the root layout (or at least contain both interacting views).
• Use scrollable views that support nested scrolling such as NestedScrollView or RecyclerView.
• For complex motion, consider integrating with MotionLayout.
• Keep Behavior classes lightweight — avoid time-consuming operations inside them.

---

📚 7. Recommended Learning Resources

1. Official Documentation:CoordinatorLayout

2. Material Design Guidelines:Material Design Components

---

🌰 8. Real-world Examples

1. The Discover page in the Jump app — dynamic game list layout.
2. The Profile page in the Keep fitness app — interactive collapsing toolbar behavior.