How to close FAB if click outside its touch area?

[trietbui85]

[nkbuth]

I have been using a view for this. Similar to the Inbox app I made a semi-transparent view that I pair alongside the FAB menu in the app. When the FAB is clicked it causes this view to become visible and since this view is clickable I can then use a click on it to make its visibility set to gone and set clickable to false alongside collapsing the menu.

I call this method in all of the situations that the menu is interacted with so that it can display and hide both the view and the menu as appropriate.

Essentially:

if(FloatingActionsMenu.isExpanded()){
    FloatingActionsMenu.collapse();
    View.setClickable(false);
    View.setVisibility(View.GONE);
} else {
    FloatingActionsMenu.expand();
    View.setClickable(true);
    View.setVisibility(View.VISIBLE);
}

I also animate it a bit to make it a smooth transition and have the method called on the click of:

FloatingActionButton FAB = (FloatingActionButton) v.findViewById(R.id.fab_expand_menu_button);

so that whenever the user clicks on the menu to close it, it will also make the view disappear.

Hope it helps!

[ParitoshBh]

I have been searching for this since I found out about the library. Appreciate your response.

Would it be possible for you to share code for creating transparent view? Still learning android so the code or a reference would help :)

[nkbuth]

I'm not able to provide my actual code for it since technically my job owns it(and I don' want to breach contract) but I should be able to explain the parts that I did that are not exclusive to my company.

I just made an xml that had a view that matched parent for dimensions, had a transparent shade of white for its background color, and was set to be clickable. Since it usually would not be visible I set its visibility to gone and clickable to false. I then included it in a layout with my floating actions menu and included that view in any layouts of mine that used it.

For the code I made the animations for it fading in and out using this tutorial: http://www.androidhive.info/2013/06/android-working-with-xml-animations/

I then use an if else to check if the fabMenu was expanded or not and would tell the menu to collapse/expand as needed, set visibility of the view to gone/visible, set touch enabled to false/true, and then started the appropriate animation.

I then called this method wherever I needed the fabMenu to open or close.

Hope it helps and glad that my previous post was able to. :)

[maoruibin]

thanks your remind @NathanBFS ,your method is useful !

[mSobhy90]

Here's how I've done this:

This is how my layout file looks like

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:id="@+id/addFabLayoutContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="end|bottom"
    android:gravity="bottom|end">

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/addFAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/btn_fab_margin"
        fab:fab_addButtonColorNormal="@color/primary_accent"
        fab:fab_addButtonColorPressed="@color/fallback_accent"
        fab:fab_addButtonPlusIconColor="@color/background_color"
        fab:fab_labelStyle="@style/AppTheme.FABMenuLabel"
        fab:fab_labelsPosition="left">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/add2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_size="mini"
            fab:fab_title="@string/add" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/add1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerInside"
            fab:fab_size="mini"
            fab:fab_title="@string/add" />

    </com.getbase.floatingactionbutton.FloatingActionsMenu>
</LinearLayout>

And here is my activity:

    @Override
    public void onCreate() {
        addFabMenu.setOnFloatingActionsMenuUpdateListener(this);
    }

    @OnClick(R.id.add1)
    public void onAdd1Clicked() {
        addFabMenu.collapse();
    }

    @OnClick(R.id.add2)
    public void onAdd2Clicked() {
        addFabMenu.collapse();
    }

    @Override
    public void onMenuExpanded() {
        addFabLayoutContainer.setBackgroundColor(getResources().getColor(R.color.semi_transparent_grey));
        addFabLayoutContainer.setClickable(true);
        addFabLayoutContainer.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                addFabMenu.collapse();
            }
        });
    }

    @Override
    public void onMenuCollapsed() {
        addFabLayoutContainer.setBackgroundColor(Color.TRANSPARENT);
        addFabLayoutContainer.setClickable(false);
    }

 @Override
    public boolean onBackPressed() {
        if (addFabMenu.isExpanded()) {
            addFabMenu.collapse();
            return true;
        } else {
            return super.onBackPressed();
        }
    }

Thanks goes to @NathanBFS for the solution, hope this code snippet helps someone out :+1:

[Farasy]

For less code:

@Override public boolean dispatchTouchEvent(MotionEvent event){
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        if (mFloatingMenu.isExpanded()) {

            Rect outRect = new Rect();
            mFloatingMenu.getGlobalVisibleRect(outRect);

            if(!outRect.contains((int)event.getRawX(), (int)event.getRawY()))
                mFloatingMenu.collapse();
        }
    }

    return super.dispatchTouchEvent(event);
}

[kdharmishtha]

:+1:

[worm4d]

Just to share the method I'm using

findViewById(R.id.linear_layout).setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                menuMultipleActions.collapse();
                return true;
            }
        });

[im-o]

im just adding from Farasy

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN){
        if (fam_main.isOpened()){
            Rect outRect = new Rect();
            fam_main.getGlobalVisibleRect(outRect);
            if (!outRect.contains((int)event.getRawX(), (int) event.getRawY())){
                fam_main.close(true);
            }
        }
    }
    return super.dispatchTouchEvent(event);
}

***note fam_main is your FAB menu id FloatingActionMenu