Переключить значок FloatingActionButton при нажатии на него

У меня есть две нарисованные картинки, изначально FAB установлен на R.drawable.icon1, я хочу установить его на R.drawable.icon2 при щелчке по нему и вернуть обратно icon1 при повторном щелчке по нему и так далее...

Есть способ сделать это?

Любая помощь приветствуется!

2 ответа

Решение

Надеюсь, это поможет, у нас есть логическое значение flag который обозначает текущий значок, видимый в вашем потрясающем.

FloatingActionButton fab;
boolean flag = true; // true if first icon is visible, false if second one is visible.

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

    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            if(flag){

                fab.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.icon2));
                flag = false;

            }else if(!flag){

                fab.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.icon1));
                flag = true;

            }

        }
    });

Я создал следующую функцию расширения для Kotlin, чтобы упростить операцию.

      fun FloatingActionButton.icon(@DrawableRes id: Int = 0) {
    setImageResource(id)
}

fun FloatingActionButton.backgroundColor(@ColorRes colorRes: Int = 0) {
    backgroundTintList = ColorStateList.valueOf(ContextCompat.getColor(context, colorRes))
}

fun FloatingActionButton.iconColor(@ColorRes colorRes: Int = 0) {
    imageTintList = ColorStateList.valueOf(ContextCompat.getColor(context, colorRes))
}

Образец:

      var flag = true

binding.fabToggleService.setOnClickListener {
    flag = !flag

    if (flag) {
        binding.fabToggleService.apply {
            icon(R.drawable.ic_round_stop_24)
            iconColor(R.color.white)
            backgroundColor(R.color.md_red_400)

    } else {
        binding.fabToggleService.apply {
            icon(R.drawable.ic_round_play_arrow_24)
            iconColor(R.color.white)
            backgroundColor(R.color.md_blue_400)
    }

}

Вы можете увидеть действие вживую, см. комментарий со ссылкой на одно из моих приложений.

Другие вопросы по тегам