Android - Custom multi-click Checkbox with Images

Question

I want to create a custom Checkbox with four different states:

• Unchecked (an empty checkbox)
• Checked (a green check)
• Unavailable (a red cross)
• Partly unavailable (an orange check)

I did found here how to create a checkbox with custom images (with the states pressed, focused, hovered and default). But what I want instead is a way to cycle between the four states as follows:

1. press once: it's green checked;
2. press twice: it's a red cross;
3. price thrice: it's orange checked;
4. press four times: it's unchecked again.

PS: I know it's probably easier in an android app to just make a dropdown with the 4 states or a pop-up where you select one of the states. But I want among these two, this third option above, so users can decide for themselves which of the three settings they'll prefer.

PSS: While I'm typing this I came up with the idea of a button with the unchecked image, and when you click it it will replace the image-src to the next, while keeping everything else the same (like width/height and margin/padding). Is this the best approach for this situation, or does someone have a more elegant solution instead?

Thanks in advance for the responses.

Answer 1

As stated in the PSS, I only had the idea for the solution when I was typing the question above. I've used an ImageButton that changes it's source when it's clicked. Here is the code:

ImageButton in xml:

<ImageButton
    android:id="@+id/ibtnCheckbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/checkbox_content_description"
    android:src="@drawable/checkbox_unchecked"
    android:background="@drawable/transparent_button_background" />

transparent_button_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@android:color/transparent" />
    <item android:state_pressed="true" android:drawable="@android:color/transparent" />
    <item android:drawable="@android:color/transparent" />
</selector>

Activity:

public class MainActivity extends ActionBarActivity {
    private ImageButton cbButton;
    private int status;
    private int checkbox_images[] = {
        R.drawable.checkbox_unchecked,
        R.drawable.checkbox_checked,
        R.drawable.checkbox_error,
        R.drawable.checkbox_partly
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        status = 0;
        addListenerToButton();
    }

    private void addListenerToButton(){
        cbButton = (ImageButton) findViewById(R.id.ibtnCheckbox);
        cbButton.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                switch(status){
                    // Unchecked -> Green checked
                    case 0:
                    // Green checked -> Red cross
                    case 1:
                    // Red cross -> Orange-yellow checked
                    case 2:
                        cbButton.setImageResource(checkbox_images[++status]);
                        break;
                    // Orange-yellow checked -> Unchecked
                    case 3:
                        cbButton.setImageResource(checkbox_images[status = 0]);
                        break;
                    // Default (just in case)
                    default:
                        status = 0;
                        cbButton.setImageResource(checkbox_images[status++]);
                        break;
                }
            }
        });
    }

    ...
}