Android - Glide Radius (feat. ImageView radius error! )

ImageView를 사용하는 많은 프로그래머들이 디자이너의 요청으로, 혹은 개인의 취향으로 이미지에 radius 처리를 많이 한다. 그 대표적인 예가 SNS에 노출되는 프로필 이미지 라던가, RecyclerView 에 노출되는 List 형태의 itemView에 ImageView가 있다면 radius 처리를 해주는 것이 보기 좋다는게 이유이다.

 

출처 - JavaTPoint

 

위 이미지처럼 모서리 부분에 radius 처리를 하는 경우도 있고 아예 Circle 형태의 이미지를 만들기도 한다.

 

Google 검색을 하면 대부분 아래와 같은 솔루션을 준다.

 

 

//1. radius xml파일을 만든다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="8dp"/>
</shape>

//2.ImageView에 적용해준다.

GradientDrawable drawable= (GradientDrawable) context.getDrawable(R.drawable.radius);
imageView.setBackground(drawable);
imageView.setClipToOutline(true);

 

사실 그렇게 어려운 스킬도 아니고, 굳이 외울 필요도 없는 스킬이다. 다만 이것은 ImageView가 phone에 있는 경우다. 즉 XXX.png 파일로 이미 어플 내부 파일로 가지고 있을 때 이 효과가 정상적으로 적용된다.

 

즉 우리가 흔히 사용하는 Glide 라이브러리로 url 형태의 image를 땡겨와 radius 처리를 할 때는 위의 코드가 먹히지 않는 다는 것이다.

 

실제로 나는 Glide로 가져온 ImageView에 radius 효과를 주려고 하였으나 정상적으로 되지 않아서 오늘 알려줄 방법을 찾았다.

 

해결방법은 아래와 같다.

 

Glide.with(context).load(imageUrl)
.transform(CenterCrop(), RoundedCorners(radius)).into(it)

일반적으로 Glide를 사용하면 with(context).load(url).into(imageView) 형태로 사용한다.

 

여기에 transform(CenterCrop(), RoundedCorners(raduis)) 를 추가로 체이닝해주면 된다.

 

여기서 radius는 dimen에서 설정한 dp값이다.

 

이 설정을 하면 Glide를 통한 이미지 UI도 radius가 정상적으로 처리되는 것을 확인할 수 있다!

 

 

 

 

[ 관련 사이트 ]

 

 

https://stackoverflow.com/questions/45186181/glide-rounded-corner-transform-issue