[Jetpack Compose] Clickable Ripple Effect 없애기

Unsplash, Levi XU.

 

 

Android, iOS 등 모바일에서는 버튼이 눌렸다는 사실을 유저에게 알리기위해 Ripple Effect 가 존재합니다.

보통은 호숫가에 던져진 돌에 의해 파동이 일어나듯, 터치한 부분을 중심으로 원이 커져가는 형태입니다.

 

다만, 텍스트를 버튼 대신 사용하거나, 굳이 Ripple Effect 가 필요하지 않은 곳에는 Ripple Effect 가 없는 편이 UI적으로 더욱 좋은 경우가 있습니다.

 

안드로이드의 경우, XML 을 사용했을 때는 버튼 이외의 다른 View 에 지정하지 않은 Riffle 이 생성되는 경우가 적었습니다. 하지만 Compose 로 넘어오면서, Modifier.clickable { } 을 통해 클릭 이벤트를 추가해주면 자동으로 Ripple Effect 가 추가됩니다. 이를 없애는 방법을 알아봅니다.

 

 

---

 

modifier.clickable(
    interactionSource = MutableInteractionSource(),
    indication = null
) {
	// 클릭 이벤트 정의
}

 

간단합니다. indication 에 null 값을 주면 됩니다.

interactionSource 는, 해당 Composable 을 터치했을 때 PressInteraction.Press 를 전달하는 데 사용되는 객체입니다.

 

저는 이를 매번 선언하는 것이 번거롭고 소스를 더럽히는 일이므로, 확장함수를 사용합니다.

 

fun Modifier.clickableWithoutRipple(onClick: () -> Unit) = this.clickable(
    interactionSource = MutableInteractionSource(),
    indication = null
) {
    onClick()
}

 

적용 전

 

 

적용 후