--ADVERTISEMENT--

Ripple effect or animation can be added in android layouts, buttons, textviews, etc. You can change ripple color and shape like circular, rectangle. By default, ripple effect is only shown on device running lollipop and above, but using third party library, you can implement ripple animation on all android versions.

In this post, I have mentioned some best and useful android ripple effect libraries which will help you to make awesome material design. There are many libraries available but here, I have only listed some of the best libraries for you.

Related:
Android XML Animations Examples
Android Bottom/Footer Menu Example with SlideUp Animation
Animated Android Toolbar With Appbar Background Image


5 Best Android Ripple Effect Libraries

Here are the best 5 android ripple effect library for your awesome app or game. You can easily implement these libraries in any android app. Some of these work only for Android 21+ and other 9 & above.

1. RippleEffect

Implementation of Ripple effect from Material Design for Android API 9+. ExpandableLayout provides an easy way to create a view called header with an expandable view. Both views are external layout to allow a maximum of customization. You can find a sample that how to use an ExpandableLayout to your layout.

Best Android Ripple Effect Libraries


Dependencies

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

Usage

Declare a RippleView inside your XML layout file with 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");
        }

    });

If you want to add an OnClickListener don't forget to add it to the RippleView like this:

    final RippleView rippleView = (RippleView) findViewById(R.id.rippleView);
    rippleView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //TODO: onRippleViewClick
        }
    });


Get RippleEffect Library Source Code On GitHub

2.  RippleView

View that imitates Ripple Effect on click which was introduced in Android L (for Android 2.3+)

Best Android Ripple Effect Libraries


Usage

For a working implementation, have a look at the Sample Project - RippleViewExample
1. Include the library as local library project.
2. Include the RippleView widget in your layout.
3. In your onCreate method refer to the View and add 'OnClickListener' for the same.

mButton = (RippleView) findViewById(R.id.btn);
mButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //your code
    }
});

Get RippleView Library Source Code On GitHub

3. Material Ripple Layout

Android L Ripple effect wrapper for Views

Dependencies

compile 'com.balysv:material-ripple:1.0.2'

Best Android Ripple Effect Libraries


Usage

Use static initializer on your View (see xml attributes below for customization)

MaterialRippleLayout.on(view)
           .rippleColor(Color.BLACK)
           .create();

Or wrap your View with MaterialRippleLayout in your layout file:

<com.balysv.materialripple.MaterialRippleLayout
    android:id="@+id/ripple"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Button inside a ripple"/>

</com.balysv.materialripple.MaterialRippleLayout>

If using in an AdapterView you must set rippleInAdapter to true

Configure using xml attributes or setters in code:

app:mrl_rippleOverlay="true"
app:mrl_rippleColor="#ff0000"
app:mrl_rippleAlpha="0.1"
app:mrl_rippleDimension="10dp"
app:mrl_rippleHover="true"
app:mrl_rippleRoundedCorners="10dp"
app:mrl_rippleInAdapter="true"
app:mrl_rippleDuration="350"
app:mrl_rippleFadeDuration="75"
app:mrl_rippleDelayClick="true"
app:mrl_rippleBackground="#FFFFFF"
app:mrl_ripplePersistent="true"

Get Material Ripple Layout Library Source Code On GitHub

4. Google Maps Animations

Google Maps Animations is an awesome first of its type android library for showing a ripple and radar animations on a google map, e.g show catchment area of an earthquake where ripples have been felt, give prominence to certain markers which need to be highlighted. Also add a ripple when your user is moving on the map and give a #PokemonGo type ripple effect and also add a radar type effect to show users that you are searching in certain area.

Best Android Ripple Effect Libraries


Dependencies
compile 'com.github.aarsy.googlemapsanimations:googlemapsanimations:1.0.5'

Get Google Maps Animations Library Source Code On GitHub

5. Ripple Layout

A layout that implemented ripple effect for transition animation. A ripple is not just a circle that starts expanding from your finger till it covers all the view. In fact, the circle starts expanding from your finger while its center travels to the center of the view with a fixed speed. By the time the circle's center has reached the center of the view its radius will be equal to the distance between the view's center and its farthest edge. In this way, the ripple reaches every edge of the view at almost the same time.

Best Android Ripple Effect Libraries


Dependencies

dependencies {
    compile 'com.liuguangqiang.ripplelayout:library:0.1.0'
}

Start Activity

The ripple animation can start from a Point or a View. But the transition animation of the target activity must be implemented by yourself.

Ripple.startActivity(MainActivity.this, TargetActivity.class, A point or a view);

Get RippleEffect Library Source Code On GitHub

If there are other best libraries except above mentioned, you can add them in the comment box.

Post a Comment

Powered by Blogger.