[안드로이드] Circle ImageView 원형 이미지 (Custom ImageView, ShapeableImageView, CircleImageView)

원형 이미지를 만드는 방법은 여러가지가 존재한다.

평소에 나는 ImageView 를 커스텀해서 원형 이미지로 만들어 사용했다.

하지만, 이번에 개발 과제하다가 ShapeableImageView 가 있다는 걸 알게 되면서(🙄너무 늦게 알았다 하하..) Circle ImageView 를 만드는 여러가지 방법을 정리해도 좋다 생각하여 글을 적게 됐다.

 

 

1. Custom ImageView

res/drawable  파일 내에 shape(Circle) 태그를 만든 Resource file 을 만들기.

만들고 난 뒤, ImageView 에 연결시켜주면 된다.

아래 링크가 자세히 나와있으니, 보고 하면 될 것 같다.

https://www.geeksforgeeks.org/how-to-create-a-circular-image-view-in-android-without-using-any-library/

How to Create a Circular ImageView in Android Without using Any Library? - GeeksforGeeks

 

 

2. CircleImageView 깃허브 라이브러리 사용 [https://github.com/hdodenhof/CircleImageView]

 

1. build.gradle dependencies 추가

implementation 'de.hdodenhof:circleimageview:{Version}'

 

2. xml 에 적용

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iv_user_image"
        android:layout_width="wrap_centent"
        android:layout_height="wrap_centent"
        android:layout_gravity="top|center"
        app:civ_border_overlay="true"
        app:civ_border_width="5dp"
        app:civ_border_color="#000000"
        android:src="@drawable/image_user_default" />

 

 

3. ShapeableImageView

1. build.gradle dependencies 추가

implementation 'com.google.android.material:material:{Version}'

 

2. xml 에 적용

[XML 파일]
<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:padding="5dp"
        app:strokeWidth="10dp"
        app:strokeColor="@android:color/darker_gray"    
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_margin="10dp" />
        
        
        
[res/style]
<style name="ShapeAppearanceOverlay.App.CornerSize50Percent" parent="">
        <item name="cornerSize">50%</item>
</style>

 

3. 알아두면 좋을 속성

xml 파일에서 직접 만들어서 사용하면 된다. 중요한 속성 몇 가지를 알면 좋을 것 같다.

cornerFamily => 네 꼭지점을 어떤식으로 만들지 결정 (cut / rounded) 모서리를 사선으로 자를지? 둥글게 만들지 결정

cornerSize => 모서리를 사선 또는 둥글게 만드는 정도를 %로 지정

shapeAppearanceOverlay => style Resouce 를 이용하여, 공통 속성을 편하게 지정할 수 있게끔 함. @style/

srcCompat => 이미지를 ImageView 에 넣고 싶다면 연결하면 됨

strokeWidth => 테두리 두께 정도를 표시

strokeColor => 테두리 색상 입히기

 

 

아래 링크에 들어가면, 여러 속성들과 사용법을 더 자세히 알 수 있다.

https://m2.material.io/develop/android/theming/shape

Material Design

https://developer.android.com/reference/com/google/android/material/imageview/ShapeableImageView

ShapeableImageView  |  Android Developers