본문 바로가기
프로그래밍 놀이터/안드로이드, Java

[android] Ripple 에 대해 알아보자

by 돼지왕 왕돼지 2018. 3. 30.
반응형

[android] Ripple 에 대해 알아보자


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

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


?android:attr/selectableItemBackground, ?android:attr/selectableItemBackgroundBorderless, @android:id/mask, @drawable/ripple, android:color, android:id=


-

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>





반응형

댓글