implementation 'com.google.android.material:material:1.2'

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/image"
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:shapeAppearanceOverlay="@style/circleImageStyle"
    app:srcCompat="@color/cardview_dark_background" />

<!-- 圓形圖片 -->
<style name="circleImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

<!-- 切角圖片 -->
<style name="cutImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">15dp</item>
</style>

<!-- 菱形圖片 -->
<style name="diamondImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>

<!-- 左上角90度扇形圖片 -->
<style name="topLeftRoundImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">100%</item>
</style>

<!-- 火箭頭圖片 -->
<style name="rocketImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

<!-- 水滴 -->
<style name="waterImageStyle">
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeBottomLeft">25dp</item>
    <item name="cornerSizeBottomRight">25dp</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

<!-- 葉子圖片 -->
<style name="leafImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

<!-- tip圖片 -->
<style name="tipImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>

    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerSizeBottomLeft">50%</item>

    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerSizeTopRight">50%</item>

    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>