Circular ripple issue

Question

• I am trying to create a circular ripple effect on a CircularProgressIndicator but ripple effect goes outside over the View.
• I want it to be on the CircularProgressIndicator and not going outside it. An help will be appreciated.

Here is my code:

 <RelativeLayout
                android:id="@+id/play_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toEndOf="@id/play_prev"
                android:background="@drawable/btn_ripple_circular">

                <com.google.android.material.progressindicator.CircularProgressIndicator
                    android:id="@+id/progress_circular"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_centerVertical="true"
                    android:indeterminate="false"
                    android:max="100"
                    app:indicatorColor="@color/colorAccent"
                    app:indicatorSize="44dp"
                    app:trackColor="@color/colorAccentOpacity"
                    tools:progress="50" />

                <ImageButton
                    android:id="@+id/btn_play"
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:layout_centerInParent="true"
                    android:background="@color/colorTransparent"
                    android:clickable="false"
                    android:contentDescription="@string/cover"
                    android:focusable="false"
                    android:src="@drawable/ic_play"
                    app:tint="@color/colorAccent" />

            </RelativeLayout>

btn_ripple_circular.xml:

<?xml version="1.0" encoding="utf-8"?>

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccentOpacity"
    android:radius="36dp">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccentOpacity" />
            <corners android:radius="36dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners android:radius="36dp" />
            <solid android:color="@color/colorTransparent" />
        </shape>
    </item>
</ripple>

Answer 1

app:tabRippleColor="@color/transparent"