Alpha background on fab pressed

Question

I use the https://github.com/futuresimple/android-floating-action-button library to create function buttons that work very well. I tried several libraries, but none of them used the effect used in most applications with fab (or Google applications such as keep, inbox) that when you click on the background, the background of the entire application becomes translucent white or black, it depends. I can not find a way to do this. Is it possible to have an example or something like that for such an effect? You can see what I mean in this image:

Half-black background

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="wrap_content" > <include android:id="@+id/toolbar" layout="@layout/toolbar" /> </RelativeLayout> <RelativeLayout android:id="@+id/semi_white_bg" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white_semi_transparent" android:visibility="gone" > </RelativeLayout> <RelativeLayout android:id="@+id/listFrame" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/content_frame" android:visibility="gone" > <TextView android:id="@+id/status" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/cabinet_color" android:fontFamily="sans-serif" android:gravity="center_vertical" android:paddingBottom="8dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="8dp" android:textColor="#fff" android:textSize="17sp" android:visibility="gone" /> <android.support.v7.widget.RecyclerView android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/status" android:clipToPadding="false" android:scrollbars="vertical" /> <LinearLayout android:id="@android:id/empty" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > <ImageView android:id="@+id/emptyImage" android:layout_width="96dp" android:layout_height="96dp" android:layout_gravity="center_horizontal" android:layout_marginBottom="16dp" android:scaleType="fitXY" android:src="?empty_image" /> <TextView android:id="@+id/emptyText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:fontFamily="sans-serif-light" android:gravity="center" android:lineSpacingMultiplier="1.4" android:paddingBottom="16dp" android:text="@string/no_files" android:textColor="?empty_text" android:textSize="22sp" /> </LinearLayout> </RelativeLayout> <ProgressBar android:id="@android:id/progress" style="?android:progressBarStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:indeterminateOnly="true" /> </RelativeLayout> 

this is my layout.xml, but it seems like it doesn't work at all as I want. This does not cover the whole view, but simply paints what he wants.

Answer 1

Liked your question ...

This library is not allowed to set the click button click event, you may have to change the library code for your own, use this idea: Use Relatie or framelayout and add this black background or image for FAB.

Now in the library class FloatingActionsMenu.class find and comment on this code:

 //mAddButton.setOnClickListener(new OnClickListener() //{ // @Override // public void onClick(View v) // { // toggle(); // } //}); 

Then add this method to this class,

 public void setAddButtonClickListener(OnClickListener listener) { mAddButton.setOnClickListener(listener); } 

Define a click listener in your activity, for example

 OnClickListener listener = new OnClickListener() { @Override public void onClick(View v) { if (floatingActionMenuButton.isExpanded()) {//make the background visible } else {//make the background invisible } floatingActionMenuButton.toggle(); } }; 

and transfer it to fab

 floatingActionMenuButton.setAddButtonClickListener(listener); 

Build a library and project , hope this helps!

Answer 2

I realized that this is the simplest solution, in my opinion, and works fine:

 fam.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() { @Override public void onMenuExpanded() { dimmedBackground.setVisibility(View.VISIBLE); } @Override public void onMenuCollapsed() { dimmedBackground.setVisibility(View.GONE); } }); 

Answer 3

You need to wrap your activity in FrameLayout. FrameLayout must have 2 children

• Content of your activity
• Another Framelayout containing FloatingActionsMenu

Here is the corresponding code snippet.

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:fab="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="in.city.bytes.view.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- other content in the activity --> </LinearLayout> <FrameLayout android:id="@+id/frame_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white_overlay"> <!-- floating action menu with buttons --> </FrameLayout> 

In your activity, change the alpha frame_layout when the FAB button is pressed. I also wrote a blog explaining this. http://www.rishabhsinghal.in/implement-floating-action-button-similar-to-inbox-by-gmail-or-evernote/