Creating a customized and animated toggle

Question

I am creating an app for Android in which I am using a ToggleButton as one of the interface elements. I am trying to make it have images instead of the button itself and there is a transition between them (when the button is on/off).

Giving a search, I read that to use images in the button the best would be using an xml file, which is here:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_off" android:state_checked="false" />
    <item android:drawable="@drawable/btn_on" android:state_checked="true" />
</selector>

What I couldn’t find how to do is how to associate this file to the button and how to put a transition between on/off. What is the best way to do this? I had already managed to switch background images by code, as follows:

// botão ligado
mToggle.setBackgroundDrawable(getResources().getDrawable(R.drawable.btn_on));

// botão desligado
mToggle.setBackgroundDrawable(getResources().getDrawable(R.drawable.btn_off));

But it seems to me an unorthodox way, providing Android with more specific features to do the same.

Answer 1

To do this effect, I made an auxiliary class to listen for events of Motion in the ToggleButton, that in sequence:

1. Starts an alpha animation from 1 to 0, leaving the ToggleButton transparent.
2. With the ToggleButton transparent modifies its state using the setChecked
3. Then start an alpha animation from 0 to 1 to display the new state.

The auxiliary class is:

public class DrawableTransition extends GestureDetector.SimpleOnGestureListener implements View.OnTouchListener, Animation.AnimationListener {

    WeakReference<ToggleButton> mToggle;
    GestureDetector mGestureDetector;
    AlphaAnimation mAlphaTo0, mAlphaTo1;

    public DrawableTransition(Context context, ToggleButton toggle) {
        mToggle = new WeakReference<ToggleButton>(toggle);

        mGestureDetector = new GestureDetector(context, this);

        mAlphaTo1 = new AlphaAnimation(0f, 1f);

        mAlphaTo1.setDuration(1000l);

        mAlphaTo0 = new AlphaAnimation(1f, 0f);

        mAlphaTo0.setDuration(1000l);
        mAlphaTo0.setAnimationListener(this);
    }

    @Override
    public void onAnimationStart(Animation animation) {}

    @Override
    public void onAnimationEnd(Animation animation) {
        // Animacao de alpha para 0 terminou, vamos mostrar o botao
        show();
    }

    @Override
    public void onAnimationRepeat(Animation animation) {}

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // Delega para o GestureDetector
        mGestureDetector.onTouchEvent(event);
        return true;
    }

    // Single tap foi confirmado
    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {
        return hide();
    }

    // Troca o estado, com isso alterando o background
    // depois iniciando uma animacao de alpha para 1, exibindo o botao novamente
    boolean show() {
        ToggleButton toggle = mToggle.get();

        if(toggle == null) {
            return false;
        }

        toggle.setChecked(! toggle.isChecked());

        toggle.startAnimation(mAlphaTo1);

        return true;
    }

    // Faz a animacao de alpha para 0, escondendo o botao
    boolean hide() {
        ToggleButton toggle = mToggle.get();

        if(toggle == null) {
            return false;
        }

        toggle.startAnimation(mAlphaTo0);

        return true;
    }

    /**
     * Limpar recursos, a fim de evitar memory leak
     * Chamar no onDestroy ou onDestroyView
     */
    public void clean() {
        mGestureDetector = null;
        mToggle.clear();
        mToggle = null;
        mAlphaTo0 = mAlphaTo1 = null;
    }
}

I ended up using the GestureDetector, why work only on onTouch there may be false positives of ACTION_UP. The ACTION_UP also occurs when he lifts his finger off the button, and this is characterized as a cancellation. The GestureDetector can do this treatment, so it is easier to use it.

To use:

ToggleButton toggle = findViewById(...);

toggle.setOnTouchListener(new DrawableTransition(getApplicationContext(), toggle));