Android: Anchoring Views to Bottom Sheet

You can anchor a view to a bottom sheet so the anchored view moves as the Bottom Sheet moves.

This post continues from the post Android: Bottom Sheet. Checkout the previous post for Bottom Sheet implementation.

Android: Bottom sheet

In this post we continue with the same layouts that the previous post contains.

Below, we insert a Floating Action Button into the layout from the previous post. The new view must be direct child of CoordinatorLayout like the bottom sheet view. To anchor the new view to the bottom sheet, add app:layout_anchor with id of the bottom sheet view and add app:layout_anchorGravity with values top|end.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidsample.BottomSheetActivity">

    <!-- include app bar -->
    <include layout="@layout/app_bar" />

    <!-- include main content -->
    <include layout="@layout/activity_bottom_sheet_content" />

    <!-- include bottom sheet -->
    <include layout="@layout/bottom_sheet" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_vertical_margin"
        android:src="@drawable/ic_add_shopping_cart_white_24dp"
        android:theme="@style/PrimaryActionButton"
        app:layout_anchor="@+id/bottom_sheet"
        app:layout_anchorGravity="top|end" />

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

Now the Floating Action Button should be placed on the top edge of the bottom sheet and it should stick there and move with the bottom sheet.

Hiding the Floating Action Bar on scroll

For hiding the FAB when the sheet slides you need to add listener to the bottom sheet and hide/show the FAB. First find the views.

fab = findViewById(R.id.fab);
View llBottomSheet = findViewById(R.id.bottom_sheet);

// init the bottom sheet behavior
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(llBottomSheet);

If you want the view to scale as the sheet slides use this.

// set callback for changes
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        fab.animate().scaleX(1 - slideOffset).scaleY(1 - slideOffset).setDuration(0).start();
    }
});

Or if you want the button hidden immediately when sheet starts sliding use this. Button will be shown after the sheet is completely collapsed.

// set callback for changes
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {

        // this part hides the button immediately and waits bottom sheet
        // to collapse to show
        if (BottomSheetBehavior.STATE_DRAGGING == newState) {
            fab.animate().scaleX(0).scaleY(0).setDuration(300).start();
        } else if (BottomSheetBehavior.STATE_COLLAPSED == newState) {
            fab.animate().scaleX(1).scaleY(1).setDuration(300).start();
        }
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
    }
});

These are the results of the different codes above.

Enjoy!