android カスタムデザイン時のエフェクトのつけ方

実現したいこと

レイアウトでボタンやチェックボックスなどのビューをカスタマイズした時に
エフェクトのつけ方がわかりません。

例えば、チェックボックスのandroidx.appcompat.widget.AppCompatCheckBoxをデフォルトまま使用すると、
チェックを付けたときにエフェクトが発生しますが、
以下のように自分でカスタマイズしたチェックボックスだと画像が切り替わるだけみたいなチェックボックスになってしまいます。

デフォルトみたいなかっこいい感じの切り替えを実行するカスタムの仕方はどうやるのでしょうか。

xml
1<!--layout.xml-->
2
3<androidx.appcompat.widget.AppCompatCheckBox
4        android:button="@drawable/custom_checkbox"

xml
1<!--custom_checkbox.xml-->
2
3<?xml version="1.0" encoding="utf-8"?>
4<selector xmlns:android="http://schemas.android.com/apk/res/android">
5    <item
6        android:state_checked="false"
7        android:drawable="@drawable/checkbox_off_background"
8        />
9
10    <item
11        android:state_checked="true"
12        android:drawable="@drawable/checkbox_on_background"/>
13</selector>

xml
1<!--checkbox_off_background.xml-->
2
3<?xml version="1.0" encoding="utf-8"?>
4<layer-list
5    xmlns:android="http://schemas.android.com/apk/res/android">
6
7    <item>
8        <shape android:shape="rectangle">
9            <size
10                android:height="24dp"
11            android:width="24dp"/>
12        </shape>
13    </item>
14
15    <item android:drawable="@drawable/checkbox_off"/><!--offの時の画像-->
16</layer-list>
17</selector>

xml
1<!--checkbox_on_background.xml-->
2
3<?xml version="1.0" encoding="utf-8"?>
4<layer-list
5    xmlns:android="http://schemas.android.com/apk/res/android">
6
7    <item>
8        <shape android:shape="rectangle">
9            <size
10                android:height="24dp"
11            android:width="24dp"/>
12        </shape>
13    </item>
14
15    <item android:drawable="@drawable/checkbox_on"/><!--onの時の画像-->
16</layer-list>
17</selector>