[안드로이드] 이미지(ImageView) 테두리의 모서리 둥글게 만들기

안드로이드에서 이미지 모서리를 둥글게 처리하는 여러 가지 방법에 대해 작성해 보겠습니다.

1. 외부 라이브러리 - CircleImageView

 

이미지를 정확히 동그란 원형으로 보여주고 싶을 때 유용합니다.

dependencies {
    ...
    implementation 'de.hdodenhof:circleimageview:3.1.0'
}

의존성 한 줄만 추가해 놓으면 매우 쉽게 사용할 수 있습니다.

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/sample"
    app:civ_border_overlay="true"    // 테두리를 이미지와 겹치게 그릴지
    app:civ_border_width="2dp"    // 테두리 굵기
    app:civ_border_color="@color/black"/>    // 테두리 색상

실행화면

GitHub - hdodenhof/CircleImageView: A circular ImageView for Android

---

2. CardView

 

별도의 drawable 리소스 파일을 생성할 필요 없이 CardView의 cardCornerRadius 속성을 조절해 사용합니다.

CardView 하위에 ImageView가 위치하기 때문에 CardView의 Radius를 조절해서 마치 ImageView의 모서리가 조절된 것처럼 보인다고 말할 수 있겠네요.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center">

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="16dp">

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/sample"/>
            
    </androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>

실행화면

---

3. clipToOutline 

 

background_radius_16dp.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="16dp"/>
</shape>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/background_radius_16dp"
            android:clipToOutline="true"
            android:src="@drawable/sample"/>

</androidx.appcompat.widget.LinearLayoutCompat>

먼저 이미지의 background로 설정할 xml 파일을 생성하고 background로 지정합니다.

그리고 ImageView의 clipToOutline을 true로 설정합니다.

 

샘플은 background의 radius만 조절하고 있지만 색상, 윤곽선, padding 등 모두 설정이 가능합니다.

실행화면

(그치만 공식 문서에서는 클리핑 처리는 비용이 많이 드는 작업이기 때문에 애니메이션은 사용하지 않는 것을 권장하고 있습니다.)