FABM: Floating Action Button Menu

Question

I have Floating action menu and I use this library to make it 'com.github.clans:fab:1.6.1'
Now I need change my icon when I click on it. I have some icon, and when I click on menu I need to transform it to another icon(icon plus). Is it possible? This is my xml:

<com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        fab:menu_icon="@drawable/ic_float_cards"
        android:layout_margin="16dp"
        fab:menu_animationDelayPerItem="0"
        fab:menu_colorNormal="@color/event_background"
        fab:menu_colorPressed="@color/fab_colorPressed"
        fab:menu_colorRipple="@color/fab_colorRipple"
        fab:menu_labels_maxLines="2"
        fab:menu_labels_ellipsize="end">

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_fill"
        fab:fab_label="Пополнить"
        style="@style/MenuButtonsSmall.Green" />

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_pay"
        fab:fab_label="Оплатить"
        style="@style/MenuButtonsSmall.Yellow" />

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_outcome"
        fab:fab_label="Перевести"
        style="@style/MenuButtonsSmall.Red" />

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_income"
        fab:fab_label="Запрос перевода"
        style="@style/MenuButtonsSmall.DarkPink" />

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_send"
        fab:fab_label="Сообщение"
        style="@style/MenuButtonsSmall.Purple" />

</com.github.clans.fab.FloatingActionMenu>

At first icon is ic_float_cards, but when I click it should be isic_float_cross
If you have some ideas tell me please)

score 10 · Accepted Answer · answered Oct 19 '15 at 19:24

10

This does the job and will also revert to the original icon.

final FloatingActionMenu fab = (FloatingActionMenu) findViewById(R.id.menu3);
fab.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() {
    @Override
    public void onMenuToggle(boolean opened) {
        int drawableId;
        if (opened) {
            drawableId = R.drawable.ic_float_cross;
        } else {
            drawableId =  R.drawable.ic_float_cards;
        }
        Drawable drawable = getResources().getDrawable(drawableId);
        fab.getMenuIconView().setImageDrawable(drawable);
    }
});

answered Oct 19 '15 at 19:24

jck

170
1
7

In my case `findViewById` is giving error. Pleaase help me – Nov 01 '16 at 10:15
@14bce109 make sure that your floating action button is declared in the view xml file and that correct id is passed to `findViewById` – jck Nov 02 '16 at 13:11

score 0 · Answer 2 · answered May 24 '17 at 22:14

There is a better solution which includes cross-fade animation between icon drawables. It can be found in the sample Clans' application here. This is the code which does the job:

    final FloatingActionMenu fabMenu = ...;

    AnimatorSet set = new AnimatorSet();

    View menuIconView = fabMenu.getMenuIconView();

    ObjectAnimator scaleOutX = ObjectAnimator.ofFloat(menuIconView, "scaleX", 1.0f, 0.2f);
    ObjectAnimator scaleOutY = ObjectAnimator.ofFloat(menuIconView, "scaleY", 1.0f, 0.2f);

    ObjectAnimator scaleInX = ObjectAnimator.ofFloat(menuIconView, "scaleX", 0.2f, 1.0f);
    ObjectAnimator scaleInY = ObjectAnimator.ofFloat(menuIconView, "scaleY", 0.2f, 1.0f);

    scaleOutX.setDuration(50);
    scaleOutY.setDuration(50);

    scaleInX.setDuration(150);
    scaleInY.setDuration(150);

    scaleInX.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            fabMenu.getMenuIconView().setImageResource(fabMenu.isOpened()
                    ? R.drawable.ic_float_cross : R.drawable.ic_float_cards);
        }
    });

    set.play(scaleOutX).with(scaleOutY);
    set.play(scaleInX).with(scaleInY).after(scaleOutX);
    set.setInterpolator(new OvershootInterpolator(2));

    fabMenu.setIconToggleAnimatorSet(set);

FABM: Floating Action Button Menu

2 Answers2