Change image Floating Action Button Android

Question

I used this library https://github.com/futuresimple/android-floating-action-button. How can I change the image of the main button? I want to change the button image right after selecting one of the smaller buttons.

Answer 1

From https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

As this class descends from ImageView, you can control the icon which is displayed via setImageDrawable(Drawable).

Or you can use setImageResource():

fab.setImageResource(R.drawable.ic_shopping_cart_white);

Answer 2

you can use this in your .XML :

android:src="@drawable/icon" // change backgroung icon
app:backgroundTint="@color/icons" // change background color

use this in code:

 mFloatingActionButton.setImageResource(R.drawable/icon2);

Answer 3

What I am using as follows,

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab_btn);

// State 1 -on

fab.setImageDrawable(ContextCompat.getDrawable(getActivity(), R.drawable.fab_on));

// State  2 - off

fab.setImageDrawable(ContextCompat.getDrawable(getActivity(), R.drawable.fab_off));

Hope this will help you

Answer 4

I faced same issue recently, I tried with following option

  fab:fab_icon="@drawable/icon"

and

 android:src="@drawable/icon" // change backgroung icon

even tried programmatically

 fab_menu_btn.setImageResource();

Nothing worked.

Solution: In app's build.gradle file replace

  compile 'com.getbase:floatingactionbutton:1.10.0'

to

compile 'com.github.toanvc:floatingactionmenu:0.8.9'

In .xml file Use:

           <toan.android.floatingactionmenu.FloatingActionsMenu
          </toan.android.floatingactionmenu.FloatingActionsMenu>

In activity File:

      floatingActionsMenu.setIcon(getResources().getDrawable(R.mipmap.icon));

Thanks

Answer 5

Unfortunately with this library you can't change the icon from the menu (see issues from this library from more info)

That is why I dropped this library to use a way more flexible one! It is originally a fork but it is now more advanced ;)

Here is the link

Enjoy!

Answer 6

I had the same problem and I managed to create my own solution. Maybe some else founds it also useful. I have posted the complete answer to another question (How to set an icon to getbase FloatingActionsMenu) but this part posted here is relevant to the question in dynamically changing the main menu button picture/image when one of the sub buttons is chosen. In this case, you need o combine the answer from the "linked question" and the answer below.

In order to change the icon on the menu button when you choose a floatingActionButton it can be implemented like this:

Create menu button in xml file, create floating button(s) on .java file (programmatically) set menu button (color button, color pressed button and image). Then simply add all buttons to the menu button. You can also deactivate the animation of the menu button by simply commenting out the code in FloatingActionsMenu class.

Then every time that you create a button, 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) {
                menuMultipleActions.setMenuButton(R.drawable.icon, R.color.red_transparent, R.color.black_semi_transparent);
                Toast.makeText(MainMapView.this, "Action Description", Toast.LENGTH_SHORT).show();
                ((FloatingActionsMenu) findViewById(R.id.multiple_actions)).collapse();
                return;
            }
        });

See the answer posted on the link on how to configure the classes and define the menu button and floating button(s).

So the important part to notice here is:

menuMultipleActions.setMenuButton(R.drawable.icon, R.color.red_transparent, R.color.black_semi_transparent);

This method you need to add in the FloatingActionsMenu class. Simply you call the method after on every floatingActionButton you want to update the image.

More information you can find on the link that I have posted. So when you click one of the floatingActionButton(s).

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 7

Add the property

fab:fab_icon="@drawable/fab_expand"

in the xml where you initialized the floating action menu.