Android float button and background overlay

Question

I have searched but not found any tutorial or Library on how to do Float Button with Background like the one below used in Skype.

I followed this tutorials using these tutorials about making a floatbutton.

https://github.com/codepath/android_guides/wiki/Floating-Action-Buttons , https://www.bignerdranch.com/blog/floating-action-buttons-in-android-l/ , https://github.com/codepath/android_guides/wiki/Design-Support-Library

Edited Please Read !

According to @Simon, I was able to use the https://github.com/futuresimple/android-floating-action-button library to achieve the float button layout. But then I am now stuck with making the background dim because I cannot set Relative layout background color from inside the library Functions.

See Working Java code below for the floatbutton, I have stripped out other buttons leaving Skype look alike.

public class FloatButtonActivity extends Activity {

    RelativeLayout brl;

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

        //final View actionB = findViewById(R.id.action_b);

        ShapeDrawable drawable = new ShapeDrawable(new OvalShape());
        drawable.getPaint().setColor(getResources().getColor(R.color.white));


        /* Button 3 */
        final FloatingActionButton actionA = (FloatingActionButton) findViewById(R.id.action_a);
        actionA.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(FloatButtonActivity.this, "Clicked on this button 3", Toast.LENGTH_LONG).show();


            }
        });

        /* Button 2 */
        final FloatingActionButton actionB = (FloatingActionButton) findViewById(R.id.action_b);
        actionB.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(FloatButtonActivity.this, "Clicked on this button 2", Toast.LENGTH_LONG).show();
            }
        });


        /* Button 1 */
        FloatingActionButton actionC = new FloatingActionButton(getBaseContext());
        actionC.setTitle("Button 1");
        actionC.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(FloatButtonActivity.this, "Clicked on this button 1", Toast.LENGTH_LONG).show();
            }
        });

        final FloatingActionsMenu menuMultipleActions = (FloatingActionsMenu) findViewById(R.id.multiple_actions);
        menuMultipleActions.addButton(actionC);

    }

}

This is the XML layout below

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

<RelativeLayout
    android:id="@+id/floatbutton_layout"
    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="Button 3"
            fab:fab_colorPressed="@color/white_pressed"/>

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

    </com.getbase.floatingactionbutton.FloatingActionsMenu>


</RelativeLayout>

</RelativeLayout>

The problem:

There is a FloatingActionsMenu actions Class which has an OnClickListener set to Initialize the toggle() of the button. I doesn't allow me to set Background color in the Class, because its not an activity with the Relative layout. Please how can i do this ?

mAddButton.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        toggle(); //This calls the other float buttons
        Log.d("MSG: ", "In FloatingActionsMenu Class");
      }
    });

But I want acheive what is being done in skype's APP

I am hoping to get a step by step guide on how I can achieve what is being done below.

Answer 1

So there are libraries that are available to do this, one such library is here that does exactly what you want to do: https://github.com/futuresimple/android-floating-action-button

However, if you want to do it the old fashion way, you can also achieve it by following the steps below:

1. You can create a FAB button with an onClickListener set on it. Once the user clicks on the FAB, the screen would dim. You can do so by getting a handler on the window through the windowManager class and then setting the flag to FLAG_DIM_BEHIND (WindowManager.LayoutParams.FLAG_DIM_BEHIND). Code to do this is:

        WindowManager wm = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
        WindowManager.LayoutParams p = (WindowManager.LayoutParams) parent.getLayoutParams();
        p.flags = WindowManager.LayoutParams.FLAG_DIM_BEHIND;
        p.dimAmount = 0.4f;
        wm.updateViewLayout(parent, p);

2. You will need to animate in the other FAB by animating the translateY of each icon so that it will "fly" upwards as soon as you click the main FAB.

3. You can then set onClickListeners for each of the new FABs that now appears on the screen so that they have logic when the user clicks on them.

This might be a bit of work so be prepared to do some research if you are going the old fashion way - I would use the library instead, its a lot less thinking.

There are other guides that have more information for you regarding FAB: https://guides.codepath.com/android/Floating-Action-Buttons