Floating action button and white background

Question

In fact, I'm looking for a way to emulate a FAB drawer. When the user presses the red button, an opac message and a menu appears. As the images are more significant, see the next image.

I know that this wonderful library exists ( https://github.com/futuresimple/android-floating-action-button ), and with this library I can display a menu of floating actions. But my problem is showing a white background (with opacity). I did not find a solution to solve my problem ...

thanks in advance

Answer 1

Place the FloatingActionMenu inside the FrameLayout , which will be on top of other views and will correspond to the parent in width and height. Use the same fields to raise and shift to the right of the menu, respectively.

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

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

Answer 2

I got the effect that you just mentioned with the following method. I simply added a view behind the floating button and above the other layouts and kept the GONE view visible until the menu was expanded. Then I set the visibility of the view to VISIBLE. And yes, I set the presentation background 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 in Activity or Fragment where FloatingButtons are processed

 @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 want. Hope this helps. It helps me.:)

Answer 3

Take a single coordinator layout using a toolbar, a floating menu, your content, and relative layout. Set the relative background color of the layout to white and set it to Gone. Set the theme to "NoActionBar" and use the toolbar instead of the action in action. Now, when you open the floating menu, set the relative visibility of the layout to visible and close back.