在CollapsingToolbarLayout中移动按钮

Question

I'm trying to make toolbar button to stay at the bottom when collapsingToolbarLayout is expanded and moves up and get pinned when the collapsingToolbarLayout is collapsed. The way it behave now is always pinned on top. Here is what I have:

<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:id="@+id/col"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:elevation="4dp"
    android:transitionName="@string/pic_transition_name"
    app:layout_collapseMode="parallax">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/clpsToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:collapsedTitleTextAppearance="@style/CollapsedText"
        app:contentScrim="@color/colorPrimary"
        app:expandedTitleTextAppearance="@style/ExpandedText"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        > 

        <ImageView
            android:id="@+id/iv_gallery"
            android:layout_width="match_parent"
            android:layout_height="320dp"
            android:layout_gravity="center_horizontal"
            app:layout_collapseMode="parallax"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center"
            app:layout_collapseMode="pin"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <Button
                android:id="@+id/mmv_toggle_detail"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_gravity="right"
                />

        </android.support.v7.widget.Toolbar>

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

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

The toggle button always stays on top place, I want it to behave similar to WhatsApp edit button in group detail when it moves up and down as you expand the toolbar layout.

Answer 1

Solved it by taking the button out of the toolbar and putting it a child of the CollapsingToolbarLayout with margin bottom and collapsing mode as pin

<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:id="@+id/col"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:elevation="4dp"
    android:transitionName="@string/pic_transition_name"
    app:layout_collapseMode="parallax">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/clpsToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:collapsedTitleTextAppearance="@style/CollapsedText"
        app:contentScrim="@color/colorPrimary"
        app:expandedTitleTextAppearance="@style/ExpandedText"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        >

        <ImageView
            android:id="@+id/iv_gallery"
            android:layout_width="match_parent"
            android:layout_height="320dp"
            android:layout_gravity="center_horizontal"
            app:layout_collapseMode="parallax"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center"
            app:layout_collapseMode="pin"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        </android.support.v7.widget.Toolbar>

        <Button
            android:id="@+id/mmv_toggle_detail"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="right|bottom" 
            app:layout_collapseMode="pin"
            />

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

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

Answer 2

For complex behaviors you need to code this in behavior classes

Step # 1:

Create a Custom Behavior

public class BottomBarBehavior extends CoordinatorLayout.Behavior<LinearLayout> {

    private int defaultDependencyTop = -1;


    public BottomBarBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public BottomBarBehavior() {
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, LinearLayout child, View dependency) {
        return dependency instanceof AppBarLayout;
    }


    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, LinearLayout child, View dependency) {

        //do something with the layout. see commented
        return true;
    }

}

Step # 2

Assign the behavior to the toolbar. Either via xml:

 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center"
            **app:layout_behavior=".BottomBarBehavior"**
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <Button
                android:id="@+id/mmv_toggle_detail"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_gravity="right"
                />

        </android.support.v7.widget.Toolbar>

More info here: https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.Behavior.html

Answer 3

Try this, I hope it will help you ...

<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:id="@+id/col"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:fitsSystemWindows="true">

  <android.support.design.widget.AppBarLayout
       android:id="@+id/appbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:elevation="4dp"
       android:transitionName="@string/pic_transition_name"
       app:layout_collapseMode="parallax">

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/clpsToolbarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:collapsedTitleTextAppearance="@style/CollapsedText"
    app:contentScrim="@color/colorPrimary"
    app:expandedTitleTextAppearance="@style/ExpandedText"
    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
    >

    <ImageView
        android:id="@+id/iv_gallery"
        android:layout_width="match_parent"
        android:layout_height="320dp"
        android:layout_gravity="center_horizontal"
        app:layout_collapseMode="parallax"
        />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center"
        app:layout_collapseMode="pin"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
         <Button
           android:id="@+id/mmv_toggle_detail"
           android:layout_width="60dp"
           android:layout_height="60dp"
           android:layout_gravity="center|bottom"
           app:layout_anchor="@id/appbar"
           app:layout_anchorGravity="bottom|center" />
</android.support.design.widget.CoordinatorLayout>

in JavaClass you will add below code .

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                // Collapsed
            } else if (verticalOffset == 0) {
                // Expanded
                if (yourBtn.getVisibility()==View.VISIBLE) {
                    yourBtn.setVisibility(View.INVISIBLE);
                }
            } else {
                // Somewhere in between
                if (yourBtn.getVisibility()==View.VISIBLE) {
                    yourBtn.setVisibility(View.INVISIBLE);
                }
            }
        }
    });