구글 지도의 모양을 변경하고 싶을 때 (outlineProvider)

개발 중, 클라이언트의 요청에 따라 구글 지도에 아랫 부분만 라운딩을 넣어야할 때가 있었다.

보통 뷰의 코너에 라운딩을 넣을 때는 shape.xml 파일을 만들어서 background에 적용하고, clipToOutline을 사용하는 방법을 쓴다.

라운딩 요청이 개발 말미에 들어왔기 때문에, 기존에 만들어놓은 맵뷰를 최대한 고치지 않고 사용하고 싶었다. 처음엔 당연히 레이아웃 파일의 background를 사용했다. 그런데 이게 적용이 안되는 것! ... 신기한 건 사방 라운딩 xml 파일은 아주 쉽게 기본 방법으로 제대로 적용이 되었다 ^^... 아랫 부분만 라운딩 된 걸 인식을 못하더라... 아마도 height 문제인 것 같은데, FrameLayout으로도 감싸보고, Relative, Constraint 로도 감싸보고, class 파일에서 drawable 생성 후 clipToOutline으로 해봐도 안되었다. 글 쓰면서 생각난 건데, MapView의 height를 사용해볼걸 그랬나? 어쨌든 아래 방법이 더 여기저기 쓰긴 좋을 것 같다.

MapView 한 쪽만 라운딩하는 방법을 구글로 계속 찾아봤는데, 내가 못 찾은 건지 자료가 없는 건지 어쨌든 찾지 못하다가 결국 IDE 에서 직접 함수 다 살펴보고 방법을 찾았다. 간단한 방법인데 항상 background로만 사용해서 몰랐던 것 같다. 역시 검색에만 의존하면 안되는 듯. 혹시 코너 라운딩을 찾다가 이 글을 들어오신 분! 허무하게도 아주 간단합니다.

binding.mapView.outlineProvider = (object : ViewOutlineProvider() {
    override fun getOutline(view: View?, outline: Outline?) {
         val radius = 120f
         if (view != null)
            outline?.setRoundRect(0, -radius.toInt(), view.width, view.height, radius)
         }
    })
binding.mapView.clipToOutline = true

outlineProvider를 이용해서 outline을 받아오고, RoundRect 메서드를 사용한다!

 

보통 background면 대부분 해결이 되는데, 요상하게 안될 때 요긴하게 쓸 수 있을 것 같다.