[Android] ShapableImageView radius설정하기

진행중인 프로젝트에서 ImageView의 radius를 6dp 설정해야했다.

해당 프로젝트에서는 'Glide'를 활용하여 이미지를 표시해 주었다.

 

url을 활용한 이미지는 radius가 정상적으로 적용이 되었으나,

placeHolder에 넣어준 dummy img는 radius가 적용이 안되었다는 디자인 QA가 들어왔다..!

 

 

 

Before	After

 

기존에 glide를 활용한 코드는 아래와 같다.

@BindingAdapter("app:ogImage")
fun ImageView.setOgImage(url: String?) {
    Glide.with(context)
        .load(url)
        .transform(CenterCrop(), RoundedCorners(px(6)))
        .placeholder(R.drawable.img_contents_dummy_3)
        .into(this)
}

 

이를 해결하기위해 ShapableImageView를 활용한 다른 방법을 적용해 보도록 하자.

 

1. styles.xml 추가

[res>values>styles.xml] 위치의 styles.xml 파일을 열고 아래 코드를 추가해준다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	
    ...

    <style name="roundedImageView6dp" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">6dp</item>
    </style>

</resources>

 

2. (XML) ShapeableImageView 설정

1️⃣ 기존에 사용하던 ImaveView를 ShapeableImageView로 변경해주고

2️⃣ shapeAppearance를 아래와 같이 추가해준다.

<com.google.android.material.imageview.ShapeableImageView
	...
    app:ogImage="@{viewModel.ogData.ogImage}"
    app:shapeAppearance="@style/roundedImageView6dp" />

 

app:ogImage는 첫번째 코드블락의 glide 코드를 그대로 사용하되, transform()부분을 지워주었다.

왜냐하면, 1번에서 추가한 roundedImageView6dp style을 적용해주었기 때문이다!

 

끝.