[Jetpack Compose] Clickable 이 외의 Ripple Effect 없애기

Unsplash, Linus Nylund.

동기

 

네이버 부스트캠프 마지막 프로젝트 진행 중, BottomNavigation 의 Ripple 이펙트를 없애는 게 좋을 것 같아 이를 제거해달라고 동료분께 부탁드렸습니다. Clickable { } 이라고 생각을 해서 부탁드렸던 건데, 해당 Composable 을 보니 Clickable 속성이 아닌 다른 방식으로 터치를 받았습니다.

---

포스트 제목이 Clickable 이 외의 Ripple Effect 없애기 인 이유는, Clickable { } 일 때의 Ripple Effect 를 없애는 것에 대해서는 일전에 작성한 포스트가 있기 때문입니다.

 

[Jetpack Compose] Clickable Ripple Effect 없애기

 

어떻게 해결하였는가?

사실 너무 간단한데, CompositionLocalProvider 를 이용했습니다. CompositionLocal 의 작동 방식에 대해서는 다음 포스트에 자세히 작성해두었습니다. 참고하시면 좋겠습니다.

 

[Jetpack Compose] CompositionLocal 은 어떻게 동작하는가?

 

해결 방법은 다음과 같습니다. CompositionLocalProvider 가 선언하는 람다 내에 영향을 주는 Composable 이므로, 해당 람다 내에 Ripple Effect 를 적용하지 않고자 하는 Composable 을 작성해주면 됩니다. 해당 경우엔 Ripple 에 관해 제거해주면 되므로, 수많은 ProvidableCompositionLocal<T> 중 Ripple 관련된 것을 찾아 적용해주면 그만입니다.

 

CompositionLocalProvider(LocalRippleTheme.provides(object : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha() = RippleAlpha(0f, 0f, 0f, 0f)
})) {
    ...
}

 

CompositionLocalProvider 는 어지간한 상황에 대해 대부분 대응이 되어 있으므로('이게 있나?' 싶으면 대부분 있습니다), 생성자를 열고 Local + 해결하고자 하는 키워드 를 입력하고 자동 완성을 작동시키면 아마 금방 해결하실 수 있을 겁니다.

 

적용 전, 후

적용 전

 

적용 후

---

참 공교롭게도, 바로 전 날에 CompositionLocal 에 대해  학습하고 포스팅했는데 관련된 문제가 등장해, 금방 해결할 수 있었습니다.