[Android] Material Design Ripple Animation

Material Design을 진행 하는동안에 Android 에서 기본적으로 Click Animation을 지원해주는 View가 있는 반면에,

그렇게 되지 않는 View 일 경우 해당 Animation을 만들어야만 합니다.

이때 사용할만한 좋은 Library가 있어서 공유하고자 합니다.

https://github.com/traex/RippleEffect

아래와 같이 표현하고자 하는 View나 Layout을 감싸주기만 하면 됩니다.

Integration

The lib is available on Maven Central, you can find it with Gradle, please

dependencies {
    compile 'com.github.traex.rippleeffect:library:1.3'
}

Usage

RippleView

Declare a RippleView inside your XML layout file with a content like an ImageView or whatever.

<com.andexert.library.RippleView
  android:id="@+id/more"
  android:layout_width="?android:actionBarSize"
  android:layout_height="?android:actionBarSize"
  android:layout_toLeftOf="@+id/more2"
  android:layout_margin="5dp"
  rv_centered="true">

  <ImageView
    android:layout_width="?android:actionBarSize"
    android:layout_height="?android:actionBarSize"
    android:src="@android:drawable/ic_menu_edit"
    android:layout_centerInParent="true"
    android:padding="10dp"
    android:background="@android:color/holo_blue_dark"/>

</com.andexert.library.RippleView>

If you want to know when the Ripple effect is finished, you can set a listener on your view

rippleView.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {

    @Override
    public void onComplete(RippleView rippleView) {
        Log.d("Sample", "Ripple completed");
    }

});

아래와 같이 color/scale/type 등 선택이 가능 합니다.

Customization

You can change several attributes in the XML file, you have to remove "rv_" if you are using a version below v1.1.1 :

• app:rv_alpha [integer def:90 0-255] --> Alpha of the ripple
• app:rv_framerate [integer def:10] --> Frame rate of the ripple animation
• app:rv_rippleDuration [integer def:400] --> Duration of the ripple animation
• app:rv_ripplePadding [dimension def:0] --> Add a padding to the ripple
• app:rv_color [color def:@android:color/white] --> Color of the ripple
• app:rv_centered [boolean def:false] --> Center ripple in the child view
• app:rv_type [enum (simpleRipple, doubleRipple) def:simpleRipple] --> Simple or double ripple
• app:rv_zoom [boolean def:false] --> Enable zoom animation
• app:rv_zoomDuration [integer def:150] --> Duration of zoom animation
• app:rv_zoomScale [float def:1.03] --> Scale of zoom animation

For each attribute you can use getters and setters to change values dynamically.

참고하세요.