FloatingActionButton submenus

Question

i would like to achieve FAB submenus something like pushbullet. But i have no idea how is the FAB being able to be clicked inside the fragment and activity.

This is how the pushbullet FAB looks like: enter image description here

Right now what im doing is that i treat the FAB menu layout as a fragment. and just initiate the fragment when i click on the fab. However, i am not able to click on the FAB after the FAB menu fragment is inflated. Because the FAB menu fragment would cover over the FAB button.

Anyone have any idea how does pushbullet does it's FAB menu???

https://github.com/futuresimple/android-floating-action-button — Eugen Pechanec, Apr 01 '15 at 08:07
See my [Answer](http://stackoverflow.com/questions/29342920/alpha-background-on-fab-clicked/29346961#29346961) in this question. — Harin, Apr 01 '15 at 09:27
hi @Harry , i've managed to make it work now. But do you know how to make sure that the background is dark translucent all the way? Mine is only until below the ActionBar — EggRollMan, Apr 01 '15 at 10:53
Use toolbar instead of actionbar. Vote up answer if u liked! — Harin, Apr 01 '15 at 10:56

score 0 · Answer 1 · answered Aug 18 '17 at 14:40

First add this to your dependencies compile 'com.getbase:floatingactionbutton:1.10.1'

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:25.3.1'

    compile 'com.getbase:floatingactionbutton:1.10.1'

}

then paste the below code to your Fragment:

public class YourFragment extends BaseFragment  {

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.fragment_home, null, false);
        getActivity().setTitle(getResources().getString(R.string.app_name));

        v.findViewById(R.id.pink_icon).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            }
        });

        FloatingActionButton button = (FloatingActionButton) v.findViewById(R.id.setter);
        button.setSize(FloatingActionButton.SIZE_MINI);
        button.setColorNormalResId(R.color.pink);
        button.setColorPressedResId(R.color.pink_pressed);
        button.setIcon(R.drawable.bubble_in);
        button.setStrokeVisible(false);

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

        FloatingActionButton actionC = new FloatingActionButton(baseActivity);
        actionC.setTitle("Hide/Show Action above");
        actionC.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                actionB.setVisibility(actionB.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);
            }
        });

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

        final FloatingActionButton removeAction = (FloatingActionButton) v.findViewById(R.id.button_remove);
        removeAction.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ((FloatingActionsMenu) v.findViewById(R.id.multiple_actions_down)).removeButton(removeAction);
            }
        });

        ShapeDrawable drawable = new ShapeDrawable(new OvalShape());
        drawable.getPaint().setColor(getResources().getColor(R.color.white));
        ((FloatingActionButton) v.findViewById(R.id.setter_drawable)).setIconDrawable(drawable);

        final FloatingActionButton actionA = (FloatingActionButton) v.findViewById(R.id.action_a);
        actionA.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                actionA.setTitle("Action A clicked");
            }
        });

        // Test that FAMs containing FABs with visibility GONE do not cause crashes
        v.findViewById(R.id.button_gone).setVisibility(View.GONE);

        final FloatingActionButton actionEnable = (FloatingActionButton) v.findViewById(R.id.action_enable);
        actionEnable.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                menuMultipleActions.setEnabled(!menuMultipleActions.isEnabled());
            }
        });

        FloatingActionsMenu rightLabels = (FloatingActionsMenu) v.findViewById(R.id.right_labels);
        FloatingActionButton addedOnce = new FloatingActionButton(baseActivity);
        addedOnce.setTitle("Added once");
        rightLabels.addButton(addedOnce);

        FloatingActionButton addedTwice = new FloatingActionButton(baseActivity);
        addedTwice.setTitle("Added twice");
        rightLabels.addButton(addedTwice);
        rightLabels.removeButton(addedTwice);
        rightLabels.addButton(addedTwice);


        return v;

    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

}

BaseFragment should be:

public class BaseFragment extends Fragment implements View.OnClickListener  {
    protected BaseActivity baseActivity;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        baseActivity = (BaseActivity) context;
baseActivity.getApplication();

    }

    @Override
    public void onDetach() {
        baseActivity = null;

        super.onDetach();
    }

and an example of your_layout.xml is:

<?xml version="1.0" encoding="utf-8"?>
<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">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/pink_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_icon="@drawable/facebook"
        fab:fab_colorNormal="@color/colorPrimaryDark"
        fab:fab_colorPressed="@color/colorPrimary"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/pink_icon"
        android:text="Text below button"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="48dp"/>

    <com.getbase.floatingactionbutton.AddFloatingActionButton
        android:id="@+id/semi_transparent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/pink_icon"
        fab:fab_plusIconColor="@color/white"
        fab:fab_colorNormal="@color/blue_semi_transparent"
        fab:fab_colorPressed="@color/blue_semi_transparent_pressed"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"/>

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/setter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/semi_transparent"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"/>

    <com.getbase.floatingactionbutton.AddFloatingActionButton
        android:id="@+id/normal_plus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        fab:fab_plusIconColor="@color/half_black"
        fab:fab_colorNormal="@color/white"
        fab:fab_colorPressed="@color/white_pressed"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"/>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/right_labels"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_above="@id/normal_plus"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_addButtonSize="mini"
        fab:fab_labelsPosition="right">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Label on the right"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_size="mini"
            fab:fab_title="Another one on the right"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <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"
        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.FloatingActionButton
            android:id="@+id/action_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action with a very long name that won\'t fit on the screen"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonSize="mini"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_expandDirection="down"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/button_remove"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_title="Click to remove"/>

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

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_enable"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Set bottom menu enabled/disabled"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/multiple_actions_down"
        android:layout_toStartOf="@+id/multiple_actions_down"
        android:layout_alignParentTop="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonSize="mini"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_addButtonStrokeVisible="false"
        fab:fab_expandDirection="left"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/setter_drawable"
        android:layout_above="@id/setter"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

FloatingActionButton submenus

1 Answers1