TIL - Android OutLineProvider : ImageView의 Radius 지정하기

안드로이드 ImageView의 테두리 형태를 지정하기 위해 Background Drawable을 다음과 같이 구성하여 작업 중이었다.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp"
        android:topLeftRadius="24dp" android:topRightRadius="24dp" />
    <solid android:color="#00D8FF"/>
</shape>

BottomSheet 형태의 디자인을 만들고, 해당 View에 원하는 이미지를 CenterCrop 형태로 채워서 넣으려했다.

android:scaleType="centerCrop" ->
이미지의 가로/세로의 길이 중 짧은 쪽을 ImageView의 레이아웃에 가득 채워 출력한다.
이 때 원본 이미지 가로/세로의 비율은 유지되고 레이아웃 영역에서 벗어난 이미지는 출력되지 않는다.

 

하지만 이미지를 삽입하니 기존에 생성했던 Background를 무시하고 이미지의 형태가 덮어씌워졌다.

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/testImg"
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:layout_gravity="bottom"
    android:background="@drawable/bottom_sheet_background"
    android:scaleType="centerCrop"
    android:src="@drawable/images" />

ImageView는 Image를(src) 새로 삽입하면 보이는 화면과 같이 적용될 수 밖에 없다고 한다.

결국 이미지 삽입 후, View의 Radius를 다시 지정해주어야만 했다.

 

해당 문제의 해결을 위해 그림자 구성 및 클리핑 조절에 사용되는 ViewOutlineProvider를 사용했다.

image = findViewById(R.id.testImg)

val outLine = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(0, 0, view.width, view.height + 240, 60f)
    }
}

image.outlineProvider = outLine
image.clipToOutline = true

상단 좌우측의 모서리를 둥글게 하기 위해서 left, top의 0 지점을 기준으로

view.height의 임의로 200? 240? 정도의 값을 추가하여 다른 방향의 Radius는 보이지 않도록 했다.

 

이어서, 적용할 ImageView의 OutlineProvider를 명시해주고, 

클리핑 설정 가능 여부를 true로 지정해주면 원하던 형태의 View를 확인 가능하다.