How to avoid overlapping views with insetEdge and dodgeInsetEdges

Question

I have this layout:

<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">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/listitem_1"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_margin="16dp"
                android:gravity="center"
                android:text="item 1"
                android:background="#ff0000"/>

            <TextView
                android:id="@+id/listitem_2"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_margin="16dp"
                android:gravity="center"
                android:text="item 2"
                android:background="#ff0000"/>

            <TextView
                android:id="@+id/listitem_3"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_margin="16dp"
                android:gravity="center"
                android:text="item 3"
                android:background="#ff0000"/>

            <View
                android:id="@+id/scroller_bottom_bar"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="#0000ff" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <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/scroller_bottom_bar"
        app:layout_anchorGravity="end"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

that translates to the following UI animation:

As you can see, the floating action button overlaps with the blue bottom view. I want to avoid this. How do I do that?

Answer 1

This can be fixed by adding insetEdge and dodgeInsetEdges attributes. Basically, insetEdge lets the CoordinatorLayout know that its other children can dodge it if they want to. Setting the dodgeInsetEdges on other views let's them actually dodge the dodge-able view (marked by insetEdge).

Rewriting the original xml layout as:

<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">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/listitem_1"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_margin="16dp"
                android:gravity="center"
                android:text="item 1"
                android:background="#ff0000"/>

            <TextView
                android:id="@+id/listitem_2"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_margin="16dp"
                android:gravity="center"
                android:text="item 2"
                android:background="#ff0000"/>

            <TextView
                android:id="@+id/listitem_3"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_margin="16dp"
                android:gravity="center"
                android:text="item 3"
                android:background="#ff0000"/>

            <View
                android:id="@+id/scroller_bottom_bar"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="#0000ff" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <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/fab_anchor"
        app:layout_anchorGravity="end"
        app:layout_dodgeInsetEdges="bottom"
        app:srcCompat="@android:drawable/ic_dialog_email" />

    <View
        android:id="@+id/fab_anchor"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        app:layout_anchor="@id/scroller_bottom_bar"
        app:layout_insetEdge="bottom" />
</android.support.design.widget.CoordinatorLayout>

should result to the expected UI behavior: