Toggle Floating Action MENU when clicking outside of it

[kevinmcampos]

Anyone knows how to toggle FloatingActionMenu when clicking outside of it? If i'm not clicking in any FAB, I want to close menu. I tried fullscreen overlay onTouchListener but fail.

Thanks!

[catorda]

Do you mean collapsing the menu when it's expanded but the user touches somewhere outside of it? I set an onTouchListener to my activity layout, with the descendantFocusability set to 'blocksDescendants' and it worked for me.

android:descendantFocusability="blocksDescendants" 

In my Activity, where myLayout is the root layout, and floatingActionsMenu is the floating action menu you want to collapse.

myLayout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if(floatingActionsMenu.isExpanded())
                    floatingActionsMenu.collapse();
                return true;
            }
        });

[dknchris]

Good to know this catorda! Thanks! This does work if you click on a blank space behind the FAM. Is it possible to prevent clicking of any action buttons that are behind the Floating Action MENU in my main layout?

I have buttons in the layout which get clicked instead of collapsing the FAM menu...

[catorda]

Have you tried adding a view that overlays the whole screen behind the FAM, and adding the on touch listener to that instead of the root view?

[dknchris]

@catorda Thanks! Added a child relative layout...works great!

[chalup]

I think that this kind of behavior should not be baked into the FAM class, what @catorda did is the right approach. This should be a part of sample application though.

[pepperonas]

Hello, got it working, too :) At thirst I want to thank @catorda for this useful answer.

Here is some code (maybe will help this others, getting this running as well - I wasted some time on this)

The last lines of the xml:

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_action_choose_color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"
            fab:fab_title="@string/fab_action_choose_color"
            />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_action_choose_symbol"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"
            fab:fab_title="@string/fab_action_choose_symbol"
            />

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <FrameLayout
        android:id="@+id/fl_interceptor"
        android:descendantFocusability="blocksDescendants"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

And here the coding (note that onTouch returns false if the menu is a collapsed/hidden state)

mInterceptorFrame = (FrameLayout) findViewById(R.id.fl_interceptor);
        mInterceptorFrame.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                Log.d(TAG, "onTouch  " + "");
                if (mFabMenu.isExpanded()) {
                    mFabMenu.collapse();
                    return true;
                }
                return false;
            }
        });

Kudos to @chalup for sharing this awesome library with us. Great work!

[Lumuy]

Thanks, this solved my problem.

[mraonghus]

I had to put the fl_interceptor FrameLayout before the floating action menu in the XML code snippet from @pepperonas, so that it gets placed below the floating action menu. Otherwise the floating action buttons were not accessible.

[hamdeekhan]

@catorda i am using this but my .isExpanded() and .collapse(); both are cannot be resolve please help

[JakkulaMahendhar]

can u make this preview code? please https://s3.amazonaws.com/avantari-assets/Task+4.webp