RippleDecoratorView is a widget library with a view used to wrap any of your layouts. It allows you, for any touch, to add animations effects such as: ripple stroke, ripple fill, highlight, and zoom. These animations come with a configurable fade-in, fade-out timeline.
It does not capture touches, so you can pepper it safely though your XML layout files.
Import the custom namespace (app, rdv, your choice) into your layout, below the android schema:
xmlns:rdv="http://schemas.android.com/apk/res-auto"Then wrap any layout with a com.thomsonreuters.rippledecoratorview.RippleDecoratorView element:
<com.thomsonreuters.rippledecoratorview.RippleDecoratorView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="4dp"
rdv:rdv_rippleColor="@android:color/holo_blue_dark"
rdv:rdv_rippleAnimationFrames="60"
rdv:rdv_rippleAnimationPeakFrame="15"
rdv:rdv_rippleMaxAlpha="0.8"
rdv:rdv_rippleAnimationDuration="600"
rdv:rdv_rippleRadius="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp" />
</com.thomsonreuters.rippledecoratorview.RippleDecoratorView>These methods help you handle the animation lifecycle programmatically. You can use none trigger
described in Configuration to make the animation play only when activated with the methods in this section.
doAnimation
Starts the animation on a given X, Y position. Does nothing if the animation is already running.
cancelAnimation
Stops the animation. Does nothing if the animation is already stopped. Does not cancel zoom animation.
It is recommended to call cancelAnimation inside an adapter view when a position is recreated to avoid view recycling causing the animation to be played on unwanted positions.
RippleDecoratorView allows configuration via XML properties or method calls. For every property described below there is a getProperty and setProperty method.
rdv_rippleAnimationTrigger
When the ripple animation will be played: none, onTap, onTouchDown or onTouchUp. Default: onTap.
rdv_rippleColor
Change the color of the ripple. Default: white.
rdv_rippleStyle
Change the ripple style: stroke only draws the outline, fill draws the full circle. Default: stroke.
rdv_rippleCentered
Whether the ripple originates from the touching point, or the center of the view. Default: false.
rdv_rippleRadius
Radius of the ripple. If -1 it takes the size of the view. Default: -1.
rdv_ripplePadding
If the radius is the size of the view, the radius size is reduced by this amount. Default: 0.
rdv_rippleMaxAlpha
Maximum transparency reached by the ripple during the animation. Default: 1.
Highlight can be displayed in addition to the ripple. It covers the entire view in a color.
rdv_highlightAnimation
Whether the highlight effect is applied. Default: false.
rdv_highlightColor
The color of the highlight effect. Default: same as rdv_rippleColor.
rdv_highlightMaxAlpha
Maximum transparency reached by the highlight during the animation. Default: 0,2.
Zoom animates a little zoom in bump in addition to the ripple and highlight. Warning: Zoom animation cannot be cancelled once started, use with caution.
rdv_zoomAnimation
Whether the zoom animation is played. Default: false.
rdv_zoomAnimationScale
The scale to which the view zooms. Default: 1,03.
rdv_zoomAnimationTrigger
When the zoom animation will be played: none, onTap, onTouchDown or onTouchUp. Default: onTap.
By default, RippleDecoratorView has a fade-in, fade-out animation for the ripple and highlight, on top of the optional zoom. Library users can configure the timeline for this animation to their needs.
The API is designed such as an animation has a Duration in milliseconds, and a Frames value to represent each of the steps of the animation. The animation updates at a rate of Duration / Frames. For example, an animation that lasts 1000 milliseconds and has 60 frames would update itself once every 16.6 milliseconds. A high Frames values can cause the update rate to be more frequent than the screen's, causing "dropped" frames. A low Frames value may not look smooth. Keeping the default values or finding a sweet spot for any given Duration is recommended.
rdv_rippleAnimationDuration
Time it takes for the ripple/highlight animation to complete, in milliseconds. Default: 400.
rdv_rippleAnimationFrames
Number of frames the animation is divided into. Default: 60.
rdv_zoomAnimationDuration
Time it takes for the zoom animation to complete, in milliseconds. Default: same as rdv_rippleAnimationDuration.
Peak frames define define key frames in the timeline when the animation changes behaviour. For example, a 1000 milliseconds animation with 10 frames and a peak on 7 will fade in for 0,7 seconds, then fade out for 0,3 seconds.
rdv_rippleAnimationPeakFrame
Defines, for the ripple, when the animation goes from fade-in into fade-out. Default: same as rdv_rippleAnimationFrames.
rdv_highlightAnimationPeakFrame
Defines, for the highlight, when the animation goes from fade-in into fade-out. Default: same as rdv_rippleAnimationFrames.
Interpolation is not available though XML, but its values can retrieved and modified through code.
interpolator
Defines the interpolator for the ripple and highlight. Default: LinearInterpolator.
zoomInterpolator
Defines the interpolator for the zoom. Default: LinearInterpolator.
There is a module in the repository called RippleDecoratorView-Example that showcases most configurations.
Download the latest .aar from Maven Central
or
add it as a dependency on your build.gradle
repositories {
...
mavenCentral()
...
}
dependencies {
...
compile 'com.thomsonreuters:rippledecoratorview:+'
...
}or
repositories {
...
maven {
url "https://jitpack.io"
}
...
}
dependencies {
...
compile 'com.github.thomsonreuters:RippleDecoratorView:v1.0.2'
...
}Francisco Estevez - [email protected]
The Apache Software License, Version 2.0
See LICENSE.md