Customized CheckBox not switching button images on being checked / unchecked (Android)

So I've been trying to customize the way my CheckBox looks, and have diligently followed the methods posted on SO and other sites. I wrote a drawable XML and placed it in the drawables folder. This is the code that went in it.

This is my customchecker.xml placed in the drawables folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://ift.tt/nIICcg">
    <item android:state_selected="true" android:drawable="@drawable/checked"/>
    <item android:state_selected="false" android:drawable="@drawable/unchecked"/>
    <item android:state_checked="true" android:drawable="@drawable/checked"/>
    <item android:state_checked="false" android:drawable="@drawable/checked"/>
    <item android:state_focused="true" android:drawable="@drawable/checked"/>
    <item android:drawable="@drawable/checked"/>
</selector>

This is my layout XML file,

<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/textView"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="94dp"
        android:textSize="48dp" />

    <Chronometer
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/chronometer"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="82dp"
        android:textSize="80dp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/checkBox"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:clickable="true"
        android:enabled="true"
        android:checked="true"
        android:button="@drawable/customchecker"
        android:onClick="cb"/>
</RelativeLayout>

And this is my corresponding class file for the main activity,

import android.os.CountDownTimer;
import android.os.SystemClock;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.CheckBox;
import android.widget.Chronometer;
import android.widget.TextView;

import java.text.SimpleDateFormat;


public class MainActivity extends ActionBarActivity {
    TextView t;
    long millis = 50000;
    Chronometer c;
    CheckBox cb;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        t = (TextView) findViewById(R.id.textView);
        c = (Chronometer)findViewById(R.id.chronometer);
        c.start();
        cb = (CheckBox) findViewById(R.id.checkBox);
        //cb.setButtonDrawable(R.drawable.customchecker);


        m.start();
    }
    CountDownTimer m = new CountDownTimer(millis,1000) {
        @Override
        public void onTick(long millisUntilFinished) {
               t.setText(Long.toString(millisUntilFinished/1000));
        }

        @Override
        public void onFinish() {
                c.setBase(SystemClock.elapsedRealtime());
        }
    };

    public void cb(View view){
        System.out.println(cb.isChecked());
    }

}

On loading the page, the checkbox button shows only the image corresponding to the unchecked resource. Just to ensure that i had different images, i set all resources, for checked as well as unchecked to a checked image, and it showed the checked image. But the moment I introduced a resource for the unchecked state, boom, the only image is shows is the unchecked one.

Again, to verify that checkbox was being checked, I set up a method to get isChecked, and yes it is working fine.

Could anyone point out the bug in this?