android - studio - FABM: menú del botón de acción flotante

menu tres puntos android

Question

Tengo el menú de acción flotante y uso esta biblioteca para que sea ''com.github.clans:fab:1.6.1''
Ahora necesito cambiar mi ícono cuando hago clic en él. Tengo un ícono, y cuando hago clic en el menú, necesito transformarlo en otro ícono (ícono más). ¿Es posible? Este es mi 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>

El primer ícono es ic_float_cards , pero cuando hago clic debería ser ic_float_cross
Si tienes algunas ideas dime por favor)

Answer 1

Esto hace el trabajo y también volverá al ícono original.

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);
    }
});

Answer 2

Hay una mejor solución que incluye animación de fundido cruzado entre iconos dibujables. Se puede encontrar en la aplicación Clans de ejemplo aquí . Este es el código que hace el trabajo:

    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);