Knicker Knicker - 3 months ago 23
Android Question

FAB Behavior when showing CardView (Up & Down)

I want to show a CardView as prompt like in Material Guidelines Specs:
https://www.google.com/design/spec/growth-communications/onboarding.html#onboarding-quickstart

Here is the link to the image:
Image

I've changed the behavior of the FAB Button like this and set to the .xml file:

public class FABBehavior extends FloatingActionButton.Behavior {

public FABBehavior(Context context, AttributeSet attr) {
super();
}

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

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
child.setTranslationY(translationY);
return true;
}
}


My .xml file look like this:

<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"
tools:context="com.nearme.client.activities.fragments.ScannerFragment">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:title="@string/title_scanner"
app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/fragment_scanner_content" />

<android.support.v7.widget.CardView
android:id="@+id/cvBluetooth"
android:layout_width="match_parent"
android:layout_height="150dp"
android:animateLayoutChanges="true"
android:layout_gravity="bottom" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Prueba" />
</android.support.v7.widget.CardView>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom|end"
android:layout_margin="@dimen/fab_margin"
app:layout_behavior="com.nearme.client.utils.FABBehavior"
android:src="@android:drawable/ic_dialog_email" />




And the click listener of the FAB Button is this:

View.OnClickListener onClick = new View.OnClickListener() {
@Override
public void onClick(View v) {
if (v == fab) {
if (cardBluetooth.isShown()) {
cardBluetooth.setVisibility(View.GONE);
} else
cardBluetooth.setVisibility(View.VISIBLE);
}
}
};


The problem is when the CardView's visibility goes GONE the FAB button remain up in its position.

How can I update the position of the FAB when the CardView is GONE?

Even if I set the CardView in the CoordinatorLayout dinamically and remove it doesnt work.

Answer

Well, the problem was that onDependentViewChangedfrom FloatingActionButton.Behavior only get called when the dependent view have changed its position. But I only was changing its visibility so it didnt get called.

Now in the onClick I add to the view and remove it:

View.OnClickListener onClick = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (v == fab) {
            if (cardBluetooth.isShown()) {
                coordinatorLayout.removeView(cardBluetooth);
            } else
                coordinatorLayout.addView(cardBluetooth);
        }
    }
};

And in FloatingActionButton.Behavior I added:

@Override
public void onDependentViewRemoved(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    child.animate().translationY(0);
    child.setTranslationY(0);
}

And this is the result: GIF of result