ShapeableImageView doesnt round corners

Question

ShapeableImageView takes a ShapeAppearanceOverlay item in style to create desired shapes and sizes. The shape families are cut and rounded, radius can be used as a number or in percentages. Here is my ShapeAppearanceOverlay theme for circularImageView:

<style name="ShapeAppearanceOverlay.App.circleImageView" parent="">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
    </style>

Here Is the layout where I am using it:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="240dp" />
    <!--Top Header Layout-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/topbar"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!--Top Profile Section -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/user_display_image"
                    style="@style/ShapeAppearanceOverlay.App.circleImageView"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_user" />
            </LinearLayout>
            <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/normal_bottom_margin" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

Here is a screenshot of the issue:

Screenshot from IDE:

Answer 1

Use app:shapeAppearanceOverlay instead of style

<com.google.android.material.imageview.ShapeableImageView
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.circleImageView"
    .../>