Drawable of a custom toggle button not centered

Question

I'm trying to simulate a checkbox with a togglebutton, because I need to customize the entire widget, so I'm trying the next code, but the image is positioning on the left, and I need to put it centered.

<ToggleButton
                    android:id="@+id/tb_legal_conditions"
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:background="@drawable/checkbox_bg"
                    android:button="@drawable/checkbox"
                    android:checked="true"
                    android:gravity="center"
                    android:minHeight="0dp"
                    android:minWidth="0dp"
                    android:textOff="@null"
                    android:textOn="@null" />

checkbox.xml

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

checkbox_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/checkbox_bg"/>
    <corners
        android:radius="@dimen/checkbox_corner"
        android:bottomLeftRadius="@dimen/checkbox_corner"
        android:bottomRightRadius="@dimen/checkbox_corner"
        android:topLeftRadius="@dimen/checkbox_corner"
        android:topRightRadius="@dimen/checkbox_corner" />
    <size android:height="32dp" android:width="32dp"/>
</shape>

The result:

ic_checked is a vector:

<vector android:height="24dp" android:viewportHeight="26.0"
    android:viewportWidth="26.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#005bab" android:pathData="m0.3,14c-0.2,-0.2 -0.3,-0.5 -0.3,-0.7s0.1,-0.5 0.3,-0.7l1.4,-1.4c0.4,-0.4 1,-0.4 1.4,0l0.1,0.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4,-13.9h0.1v-0c0.4,-0.4 1,-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0 -16,16.6c-0.2,0.2 -0.4,0.3 -0.7,0.3 -0.3,0 -0.5,-0.1 -0.7,-0.3l-7.8,-8.4 -0.2,-0.3z"/>
</vector>

Answer 1

I think the issue was your 'button' attribute. I had luck with this:

   <ToggleButton
            android:id="@+id/contacts_subscribe_button"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/checkbox_bg"
            android:src="@drawable/checkbox_src"
            android:checked="true"
            android:gravity="center"
            android:minHeight="0dp"
            android:minWidth="0dp"
            android:textOff="@null"
            android:textOn="@null" />

checkbox_bg.xml:

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

checkbox_src.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/brikky1"/>
<corners
    android:radius="2dp"
    android:bottomLeftRadius="2dp"
    android:bottomRightRadius="2dp"
    android:topLeftRadius="2dp"
    android:topRightRadius="2dp" />
<size android:height="32dp" android:width="32dp"/>
</shape>