Floating action button and white background

Question

In fact, I search a way to mimic the FAB's inbox. When user press the red button, an opac view and a menu should appear. Because images are more more meaningful, see the following picture

I know it exists this wonderful library (https://github.com/futuresimple/android-floating-action-button) and with this library, i can display floating action menu. But my problem is displaying the white background (with opacity). I didn't find a solution to solve my problem ...

Thx in advance

Answer 1

Place the FloatingActionMenu inside FrameLayout that will be on top of other views and will match parent in width and height. Use same margins to lift up and offset from right the menu accordingly.

Set OnFloatingActionsMenuUpdateListener to your floating action menu. Now toggle/replace frame layout background color inside methods:

 @Override
 void onMenuExpanded(){
  mFrameLayoutWrapper.setBackgroundColor(mAlpaWhite);
  }

  @Override
  void onMenuCollapsed(){
    mFrameLayoutWrapper.setBackgroundColor(Color.TRANSPARENT);
  }

Answer 2

Take one co-ordinator layout with Toolbar,floating menu, your contents and relative layout. Set relative layout's background color to white transparent and set it's visibility to Gone. Set "NoActionBar" theme and use toolbar instead of action bar in activity. Now whenever you open the floating menu, set Relative layout's visibility to visible and on close set back to gone.

Answer 3

I achieved the effect you just mentioned by the following method. I just added a view behind the floating button and above the other layouts, and keep the view visibility GONE, until the menu is expanded. Then i set the view visibility to VISIBLE. And yes i set the background of the view to any opaque color you want.

My code

My XML file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:text="Other View here"
    android:textSize="50dp"
    android:layout_centerHorizontal="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<View
    android:id="@+id/background_dimmer"
    android:visibility="gone"
    android:background="#55000000"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<com.getbase.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/multiple_actions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    fab:fab_addButtonColorNormal="@color/white"
    fab:fab_addButtonColorPressed="@color/white_pressed"
    fab:fab_addButtonPlusIconColor="@color/half_black"
    fab:fab_labelStyle="@style/menu_labels_style"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginEnd="16dp">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/action_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_colorNormal="@color/white"
        fab:fab_title="Action A"
        fab:fab_colorPressed="@color/white_pressed"/>

</com.getbase.floatingactionbutton.FloatingActionsMenu>

And at the Activity or Fragment where the FloatingButtons are handled

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_map);
    setFloatingButtonControls();
}

private void setFloatingButtonControls(){
    this.bckgroundDimmer = findViewById(R.id.background_dimmer);
    this.floatingActionsMenu = (FloatingActionsMenu) findViewById(R.id.multiple_actions);
    this.floatingActionsMenu.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {
        @Override
        public void onMenuExpanded() {
            bckgroundDimmer.setVisibility(View.VISIBLE);
        }

        @Override
        public void onMenuCollapsed() {
            bckgroundDimmer.setVisibility(View.GONE);
        }
    });
}

This will give the effect you wanted. Hope this helps. It sure helped me. :)