Custom ToggleButton icon moving to corner after state change in Android

Question

I'm considerably new to Android and I'm trying to implement a custom ToggleButton in Android with help of <selector>tag.

When I'm not toggling the button, the icon is perfectly centered (icon size -> 32dp x 32dp ). But after toggling the button (icon size -> 24dp x 24dp ), it is weirdly running to the corner. Why is that happening?

Using Layout bounds,

I'm finding something like this when not toggled

I'm finding something like this when toggled

code I used for

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="true"
    android:drawable="@drawable/ic_favo_filled"/>

<item android:state_checked="false"
    android:drawable="@drawable/ic_favo_non_filled"/>