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