이미지뷰에 이미지를 넣지 않고 shape 으로 모양을 주는 방법은 많이들 알고 계실텐데요!

문제는 이미지를 넣었을 때 모양을 주는 것입니다...😭😭
이 녀석 때문에 저도 한참을 고민을 했던 때가 있었는데요...

그래서 오늘은!!
이미지뷰의 src 로 이미지가 들어갈 때, 코너를 둥글게 만드는 여러 가지 방법을
소개해보려고 합니다! 🤓

1. 라이브러리 사용하기

<de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        app:civ_border_width="2dp"
        android:src="@drawable/profile"
        app:civ_border_color="@color/black"
     />

circleImageView 라이브러리 를 사용해서 테두리 색도 지정할 수 있답니다.

2. clipToOutline 사용하기

라이브러리에 의존하지 않고 안드로이드의 attribute 를 사용하고자 한다면,

//java
binding.ivUserImage.setClipToOutline(true);

//kotlin
binding.ivUserImage.clipToOutline = true

을 사용할 수 있습니다.

그런데 여기서 중요한 것은 맞추려고 하는 outline 을 imageView 의 background 로 지정해주어야 한다는 것입니다!

<ImageView
                android:id="@+id/iv_user_image"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:scaleType="centerCrop"
                android:background="@drawable/background_profile"
                />

완전히 동그랗게 만드려면 아래와 같이 shape 만 지정하고 width 와 height 는 xml 에서 값을 주면 되겠죠?

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
</shape>

3. cardView 사용하기

원이 아니라 모서리를 약간만 둥글게 하고 싶다면 Cardview 안에 imageView 를 넣고 radius 를 조절하면 됩니다.

그런데 cardView 는 그림자를 없앨 수가 없답니다.

<androidx.cardview.widget.CardView
        android:id="@+id/cardview_member"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:elevation="6dp"
        app:cardCornerRadius="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        
        <ImageView
                android:id="@+id/iv_member"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/background_member_orange"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
                
 </androidx.cardview.widget.CardView>

4. 특정 모서리만, 특정 radius 로 둥글게 하기

4.1 라이브러리 사용하기

siyamed/android-shape-imageview 라이브러리입니다.

4.2 직접 구현하기

아래 코드는 이 글의 코드를 응용해서 왼쪽 코너만, 그리고 모든 코너에 radius 를 주는 코드를 구현해서 util 로 만든 것입니다!

//roundedCornerUtil.kt


fun roundLeft(iv: ImageView, curveRadius : Float)  : ImageView {

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

       iv.outlineProvider = object : ViewOutlineProvider() {

           @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
           override fun getOutline(view: View?, outline: Outline?) {
               outline?.setRoundRect(0, 0, (view!!.width+curveRadius).toInt(), (view.height).toInt(), curveRadius)
           }
       }

       iv.clipToOutline = true
   }
   return iv
}

fun roundAll(iv: ImageView, curveRadius : Float)  : ImageView {

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

       iv.outlineProvider = object : ViewOutlineProvider() {

           @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
           override fun getOutline(view: View?, outline: Outline?) {
               outline?.setRoundRect(0, 0, view!!.width, view.height, curveRadius)
           }
       }

       iv.clipToOutline = true
   }
   return iv
}

fun roundTop(iv: ImageView, curveRadius : Float)  : ImageView {

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

       iv.outlineProvider = object : ViewOutlineProvider() {

           @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
           override fun getOutline(view: View?, outline: Outline?) {
               outline?.setRoundRect(0, 0, view!!.width, (view.height+curveRadius).toInt(), curveRadius)
           }
       }

       iv.clipToOutline = true
   }
   return iv
}

사용은 아래와 같이 필요한 곳에서 부르면 됩니다.

roundAll(binding.ivStoreDetailImage, 10f)

그런데 아쉽게도 오른쪽만, 그리고 아래쪽만 코너를 주는 방법은 찾지 못 했습니다.
라이브러리를 사용하지 않고 직접 구현할 수 있는 방법을 찾게 된다면
추가해두록 하겠습니다!

혹시 이미 아시고 계신 분은 댓글로 지식을 나눔해주시면ㅎㅎ 감사하겠습니다.