I want to set a transparent background layer when I click on the floating action menu.

Question

This is what I have done so far. Created FloatingActionButton. Now As the + icon is pressed a translucent layer should be there at the back.

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
 <com.getbase.floatingactionbutton.FloatingActionsMenu
                android:id="@+id/actionMenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="60dp"
                fab:fab_addButtonColorNormal="@color/primary"
                fab:fab_addButtonColorPressed="@color/primary_dark"
                fab:fab_addButtonPlusIconColor="#ffffff">

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:onClick="openAudio"
                    fab:fab_colorNormal="#EA1E63"
                    fab:fab_colorPressed="#EA1E63"
                    fab:fab_icon="@drawable/ic_action_mic" />
 </com.getbase.floatingactionbutton.FloatingActionsMenu>

</RelativeLayout

Answer 1

Try this.

floatingActionMenuButton.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() {
            @Override
            public void onMenuToggle(boolean opened) {
                if (opened) {
                    //menu opened
                } else {
                    //menu closed
                }
            }
        });

Answer 2

use setBackgroundResource or setBackgroundColor. I think first is pretty simple.

Second one takes an int as an argument. So, just convert your hex color (for example #55000000) into decimal and it will work as well.

Answer 3

I had the same issue and i fixed it in following way.

I added a relative layout which will match parent in both width and height. Set its background color to black and set alpha to your required opacity.

<RelativeLayout
    android:id="@+id/obstructor"
    android:visibility="invisible"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:alpha="0.75"
    android:background="@android:color/black">

</RelativeLayout>

And then on the menu item expanded and collapsed make this visible and invisible.

mFabMenu = (FloatingActionsMenu) findViewById(R.id.multiple_actions);
final RelativeLayout obstrucuterView = (RelativeLayout) findViewById(R.id.obstructor);
obstrucuterView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (obstrucuterView.getVisibility() == View.VISIBLE) {
            mFabMenu.collapse();
            return true;
        }
        return false;
    }
});

mFabMenu.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {
    @Override
    public void onMenuExpanded() {
        if (obstrucuterView.getVisibility() == View.INVISIBLE)
            obstrucuterView.setVisibility(View.VISIBLE);
    }

    @Override
    public void onMenuCollapsed() {
        if (obstrucuterView.getVisibility() == View.VISIBLE)
            obstrucuterView.setVisibility(View.INVISIBLE);
    }
});

Hope this helps.

Answer 4

There is another custom library which is more advanced than what you are using right now.

Get it here Clans floating Action Button

Set this to true and it will solve your problem. Do let me know if it helps

fabPlusButton.setClosedOnTouchOutside(true);

Answer 5

If you are using Clans floating Action Button then perhaps fab:menu_backgroundColor might be something that you could have a look at if it satisfies your use-case. ofcourse the layout width and height should both match parent (This solution has worked for me)