How to set icon to getbase FloatingActionsMenu

Question

I'm using the com.getbase.floatingactionbutton.FloatingActionsMenu for expandable FAB. But unable to set icon on fab menu. I have tried with set background drawable, but not working. Thanks

         <FrameLayout
              android:id="@+id/frame_layout"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/white_overlay">

         <com.getbase.floatingactionbutton.FloatingActionsMenu
             android:id="@+id/fab_menu"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="right|bottom"
             fab:fab_addButtonColorNormal="#C0007D"
             fab:fab_addButtonColorPressed="#C0007D"
             fab:fab_addButtonStrokeVisible="true"
             fab:fab_addButtonSize="normal"
             fab:fab_icon="@drawable/main_logo"
             fab:fab_labelStyle="@style/menu_labels_style"
             fab:fab_labelsPosition="left">



        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/locate_store"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="#C0007D"
            fab:fab_colorPressed="#C0007D"
            fab:fab_icon="@drawable/locate_store"
            fab:fab_size="mini"
            fab:fab_title="Locate Store" />

    </com.getbase.floatingactionbutton.FloatingActionsMenu>
</FrameLayout>

Here is my Java Class code,

        final FloatingActionsMenu fabMenu = (FloatingActionsMenu)         v.findViewById(R.id.fab_menu);

        fabMenu.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {
        @Override
        public void onMenuExpanded() {
            frameLayout.getBackground().setAlpha(240);
            frameLayout.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    fabMenu.collapse();
                    return true;
                }
            });
        }

        @Override
        public void onMenuCollapsed() {
            frameLayout.getBackground().setAlpha(0);
            frameLayout.setOnTouchListener(null);
        }
    });

Answer 1

I came up with a possible solution. It is not generic but it fits my needs. If you feel that is not exactly what you need I think is a good point to continue.

So what I did, is to fork the library futuresimple/android-floating-action-button. You need to add the library in the settings.gradle file and include the library include ':library'. Then in the build.gradle file I remove:

dependencies {
    compile 'com.getbase:floatingactionbutton:1.10.1'
}

I add the library from the project:

dependencies {
    compile project(':library')
}

Then in the FloatingActionsMenu class I replace private AddFloatingActionButton mAddButton; with private FloatingActionButton mAddButton;. If you check AddFloatingActionButton class on line number 59 it throws an exception if you try to setIcon on AddFloatingActionButton this is the reason. I also added a method to update the icon, colorNormal and colorPressed:

public void setMenuButton(int myIcon, int myColorNormal, int myColorPressed) {
        mAddButton.setIcon(myIcon);
        mAddButtonColorNormal = myColorNormal;
        mAddButton.setColorNormalResId(mAddButtonColorNormal);
        mAddButtonColorPressed = myColorPressed;
        mAddButton.setColorPressed(mAddButtonColorPressed);
    }

What the method does is simply invokes all the predefined methods on FloatingActionButton class where it updates the button.

Next step create a menu button in the layout file (.xml) sample of code taken from the library:

<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_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginRight="16dp"
    fab:fab_addButtonColorNormal="@color/white"
    fab:fab_addButtonColorPressed="@color/white_pressed"
    fab:fab_addButtonPlusIconColor="@color/half_black"
    fab:fab_labelStyle="@style/menu_labels_style">

Then I choosen to do the rest programmatically in *.java file but also parts can be defined in the xml file, such as define the floating buttons. I will not go through the details you can check the library sample directory.

So in my *.java file I call the menu button that I have created in the *.xml file.

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

Then you create as many buttons as you want to add, example for one button created programmatically sample:

final FloatingActionButton actionA = new FloatingActionButton(getBaseContext());
        actionA.setTitle("Familie");
        actionA.setIcon(R.drawable.world_map);
        actionA.setSize(FloatingActionButton.SIZE_MINI);
        actionA.setColorNormalResId(R.color.red);
        actionA.setColorPressedResId(R.color.black_semi_transparent);
        actionA.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainMapView.this, "Action Description", Toast.LENGTH_SHORT).show();
                ((FloatingActionsMenu) findViewById(R.id.multiple_actions)).collapse();
                return;
            }
        });

This sample of code simply creates the button, add the parameters that you choose to define. Add as many buttons as you need.

Then the next step that you need to do is to set the the menu button. Sample of code:

menuMultipleActions.setMenuButton(R.drawable.icon2, R.color.blue, R.color.white_pressed);

Then last step is to add the button(s) that you previously created. Sample of code:

menuMultipleActions.addButton(actionA);

Hope this helps you and solves your problem. Based on my research I have found that someone else has also created something similar with the same Library but I can not find the link now. If you search a bit online you will find it.

For the moment the color on the menu button is not updating correctly but I am working on it, if I find a solution I will update the answer here as well. Hope this helps, happy coding.

Answer 2

I'd rather suggest using this library which is derived from com.getbase.floatingactionbutton.FloatingActionsMenu only.

You could change the icon by using following attribute in FloatingActionMenu:

fab:fab_menuIcon="@drawable/sort"

You can however use all the features of the parent library (com.getbase.floatingactionbutton.FloatingActionsMenu).