[android] Ripple 에 대해 알아보자

[android] Ripple 에 대해 알아보자

https://blog.stylingandroid.com/ripples-part-1/

https://guides.codepath.com/android/ripple-animation

-

Ripple 자체는 Android L ( LOS ) 부터 나왔다.

그러나 필자는 Ripple 을 실제로 처리할 일이 없어서, 그런 것이 있구나~ 하는 상태로 지내왔으나 이제 쓸 일이 있어서 정리해본다.

-

Ripple 은 새로운 RippleDrawable 이라 불리는 새로운 Drawable 이다.

xml 로는 아래와 같이 정의하며, 기존 selector 정의해서 쓰듯 일반적으로 background 에 지정해주면 된다.

<ripple

xmlns:android="http://schemas.android.com/apk/res/android"

android:color="?android:colorControlHighlight" />

<!-- 이 녀석도 drawable 이기 떄문에 @drawable/ripple 과 같은 형태로 적용해 쓰면 된다. -->

-

Ripple 을 그냥 적용해버리면, effect 가 해당 view 뿐만 아니라 주변의 다른 view 까지도 퍼지게 된다.

이걸 원하는 케이스는 왠만해서는 없을 것이다. 

다른 view 에 퍼지지 않게 하려면  <item android:id="@android:id/mask"/> 를 추가해주면 된다.

<ripple

xmlns:android="http://schemas.android.com/apk/res/android"

android:color="?android:colorControlHighlight" >

<item android:id="@android:id/mask"/>

</ripple>

-

@android:id/mask 를 주는 것 외의 다른 방법을 Ripple 의 모양을 미리 지정해주는 것이다.

<ripple

xmlns:android="http://schemas.android.com/apk/res/android"

android:color="?android:colorControlHighlight" >

<item>

<shape android:shape="rectangle">

<sold android:color="?android:colorAccent"

android:width="1dp" />

</shape>

</item>

</ripple>

-

shape 에 따라, 모양을 지정해줘도 작동을 안 하는 경우가 있는데(oval 의 경우 위의 방법으로 하면 ripple 이 생기지 않는다.), 이 경우에는 mask 를 추가하면서 모양을 잡아주면 된다.

<ripple

xmlns:android="http://schemas.android.com/apk/res/android"

android:color="?android:colorControlHighlight" >

<item android:id="@android:id/mask">

<shape android:shape="oval">

<sold android:color="?android:colorAccent" />

</shape>

</item>

</ripple>

-

위의 예제들에서 colorControlHighlight 값을 사용했는데, 이는 Material Design 이 등장하면서 theme 에 지정하는 색깔 중 하나이며, Ripple 의 기본색으로 쓰인다. 즉 LOS 이상에서 사용하면서 저 color 값만 잘 지정하면, 기본 ripple 을 지원하는 UI 에서는 저 color 값을 참조한다는 사실!

-

LOS 부터 일반 button 은 기본 ripple 효과를 가지고 간다.

그 외의 touchable view 의 경우는 아래와 같이 background 를 지정해주면 ripple 효과를 가질 수 있다.

android:background="?android:attr/selectableItemBackground"

이걸 원하는 경우가 있을지는 모르겠지만(Layout 안에 들어있는 view 에서 layout 까지 ripple 하고 싶을 떄 사용한다고는 함), view boundary 를 넘어서는 ripple 을 적용하고 싶다면

android:background="?android:attr/selectableItemBackgroundBorderless"

-

LOS 미만 버전도 지원하는 경우 아래와 같이 분기해서 xml 을 작성할 수 있다.

/drawable/button.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>

<item android:drawable="@drawable/button_normal"/>

</selector>

/drawable-v21/button.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"

    android:color="?android:colorControlHighlight">

<item android:drawable="@drawable/button_normal" />

</ripple>

Ripple mask 에 대해 : [android] ripple mask 의 정체를 알아보자..

?android:attr/selectableItemBackground, ?android:attr/selectableItemBackgroundBorderless, @android:id/mask, @drawable/ripple, android:color, android:id="@android:id/mask", background, colorcontrolhighlight, drawable-v21, ITEM, Los, Ripple, ripple xml, rippledrawable, selectableItemBackground, selectableItemBackgroundBorderless, selector, Shape, View, xml, [android] Ripple 에 대해 알아보자