[Android] ShapeableImageView로 모서리가 둥근 ImageView 만들기

📌 ShapeableImageView

<style>을 적용해서 원하는 모양의 ImageView를 만들어낼 수 있는 View이다.

📍 1. style 만들기

themes.xml에 ImageView의 모서리를 얼마나 둥글게 할 것인지 정의한다.

1. cornerFamily로 어떤 모양으로 만들 것인지 지정한다. 값으로는 "cut"과 "rounded"가 있다. "cut"은 모서리를 사선으로 자르는 모양이고, "rounded"는 모서리를 둥글게 만든다. 기본값은 "rounded"이다.
2. cornerSize로 모서리를 자르거나 둥글게 만드는 정도를 지정한다.

네개의 모서리를 각각 다른 모양, 다른 정도로 만들고 싶다면 suffix에 방향 이름(ex. TopLeft, BottomRight)을 붙여주면 된다.

• 아래 예시에서 Circle은 원형이고, CircularSector는 부채꼴 모양을 나타낸다.

    <style name="Circle">
        <item name="cornerSize">50%</item>
    </style>

    <style name="CircularSector">
        <item name="cornerSizeTopLeft">50dp</item>
        <item name="cornerSizeTopRight">50dp</item>
        <item name="cornerSizeBottomRight">50dp</item>
        <item name="cornerSizeBottomLeft">50dp</item>
        <item name="cornerFamily">rounded</item>
        <item name="cornerFamilyTopLeft">cut</item>
        <item name="cornerFamilyTopRight">cut</item>
    </style>

📍 2. ShapeableImageView 만들기

app:shapeAppearanceOverlay 속성에 앞에서 만든 <style>값을 넣어주면 된다.

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/iv_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/Circle"
        app:srcCompat="@drawable/profile_image" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/iv_circular_sector"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="12dp"
        app:layout_constraintTop_toBottomOf="@id/iv_circle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearanceOverlay="@style/CircularSector"
        app:srcCompat="@drawable/profile_image" />

📍 결과