Sao operation of ShapeableImageView

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/ivCoverIndexItem"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:padding="4dp"
        app:shapeAppearance="@style/rectRound8ImageStyle"
        app:strokeColor="#0098a7"
        app:strokeWidth="4dp"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Add a stroke to the picture

The focus of adding a stroke to an image is the three attributes strokeColor, strokeWidth and padding, which define the width of the stroke, strokeWidth. Be sure to use padding to leave enough display area for the stroke, otherwise the stroke will be truncated.

 

---

set the shape of the picture 

The focus of setting the shape of the picture is: the style file referenced by the app:shapeAppearance attribute. The following shows a few sample shape style files for your reference.

Rounded rectangle pictures and circular pictures, the difference lies in the definition of cornerSize value

Rounded Rectangle:

<style name="imgStyleRectRound8">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>

Circle image:

<style name="imgStyleCircle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

 

Rhombus picture

<style name="imgStyleDiamond">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50%</item>
    </style>

 

Rectangular chamfer 

<style name="imgStyleRectCut8">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">8dp</item>
    </style>

 

sector image

<style name="imgStyleFan">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerSizeTopLeft">100%</item>
    </style>

 

leaf shape (spindle-shaped)

<style name="imgStyleLeaf">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeBottomRight">50%</item>
    </style>

 

---