[Android] 원형 이미지뷰 만들기 / 둥근 이미지뷰 / Circle ImageView

 

 

이번 포스팅에서는 원형 이미지뷰를 만드는 방법에 대해 알아보자.

 

 

다양한 방법이 있지만,

간단한 3가지 방법을 소개한다.

 

 

1. Drawable Resource 파일 적용

2. CardView 적용

3. 외부 라이브러리 적용

 

 

 

---

 

 

Drawable Resource 파일 적용

 

 

이전 포스팅의 커스텀 다이얼로그를 만들 때와 비슷하다.

 

drawable 패키지에 xml 파일을 하나 만들어주자.

 

 

circle_image_background.xml

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

 

정말 간단하다.

shape 속성에 "oval" 만 작성해주면 된다.

 

---

 

그리고 이미지뷰를 사용할 레이아웃 파일을 작성해준다.

 

 

activity_circle_image.xml

<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/water"
    android:background="@drawable/circle_image_background"
    android:clipToOutline="true"
    />

 

 

background 속성에 위에서 만들어준 Drawable 파일을 작성해 준다.

그리고 clipToOutline="true" 속성을 지정해줘야 한다.

 

 

정말 단순하고 깔끔한 방법인데, 치명적인 단점이 존재한다.

 

API level 31 이상만 지원한다는 점이다.

API level이 낮은 기기까지 지원하는 앱에는 적용하지 못한다.

 

 

---

 

CardView 사용

 

 

androidx 에서 지원하는 CardView 위젯을 사용한다.

 

 

activity_circle_image.xml

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

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/water"
        />

</androidx.cardview.widget.CardView>

 

이미지뷰를 카드뷰 안에 작성해주면 된다.

 

카드뷰의 모서리를 깎아서 Child View에게도 적용시키는 원리다.

 

 

참고로 완벽한 원을 구현하려면

cardCornerRadius 속성값에 이미지뷰 크기의 절반 이상의 값을 입력해야 한다.

 

위 예제의 이미지뷰는 width와 height가 200dp라서

cardCornerRadius 속성값에 100dp를 입력해 주었다.

 

 

---

 

라이브러리 사용

 

 

외부 라이브러리를 사용할 수도 있다.

 

 

Henning Dodenhof 라는 분이 만든 라이브러리를 사용해보자.

 

깃허브에서 최신 버전을 확인하고 사용하기 바란다.

GitHub - hdodenhof/CircleImageView: A circular ImageView for Android

 

 

 

build.gradle(모듈 수준)에 다음 의존성을 추가해준다.

implementation 'de.hdodenhof:circleimageview:3.1.0'

 

---

 

그리고 레이아웃 파일을 작성해주자.

 

 

activity_circle_image.xml

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/water"
    app:civ_border_width="3dp"
    app:civ_border_color="@color/black"
    />

 

 

border 관련 속성으로 테두리도 간편하게 지정해줄 수 있다.

 

라이브러리 이름이 길어서 혼란스러울 수 있지만,

java 파일에서는 CircleImageView 클래스로 참조한다.

 

 

ImageView 클래스를 상속받기 때문에

ImageView로 사용하던 메서드도 모두 사용할 수 있다.

 

 

---

 

결과 화면

 

 

기본적인 사각형 이미지뷰와 비교하기 위해

화면에 2개의 이미지뷰를 만들었다.

 

 

Drawable Resource 파일 적용, CardView 적용

 

 

위 2가지 방법은 결과 화면이 똑같아서

스크린 샷을 한 장만 업로드한다.

 

---

 

de.hdodenhof.circleimageview 라이브러리 적용

 

 

 

 

 

---

 

 

 

 

원형 이미지뷰를 만들어 보았다.

 

아무래도 요즘 앱에서는 딱딱한 사각형 이미지보다는

동그란 이미지를 더 많이 사용하는 것 같아서 유용하다고 생각한다.