Convert Figma logo to code with AI

skyfishjy logoandroid-ripple-background

A beautiful ripple animation for your app

2,256
580
2,256
36

Top Related Projects

Android like button with delightful star animation inspired by Twitter's heart. See blog post for description.

Implementation of Ripple effect from Material Design for Android API 9+

Android L Ripple effect wrapper for Views

This is a library with components of Android L to you use in android 2.2

Lollipop ViewAnimationUtils.createCircularReveal for everyone 4.0+

A support library for VectorDrawable and AnimatedVectorDrawable classes introduced in Lollipop

Quick Overview

Android-ripple-background is a library that provides a customizable ripple animation effect for Android applications. It allows developers to easily add dynamic, circular ripple animations to their UI, enhancing the visual appeal and user experience of their apps.

Pros

  • Easy to implement and integrate into existing Android projects
  • Highly customizable with various attributes for controlling animation speed, color, and size
  • Lightweight and efficient, with minimal impact on app performance
  • Supports both XML and programmatic implementation

Cons

  • Limited to circular ripple animations only
  • May not be suitable for complex or non-circular animation requirements
  • Requires API level 14 or higher, potentially limiting compatibility with older devices
  • Not actively maintained, with the last update in 2017

Code Examples

  1. Adding the ripple background view in XML:
<com.skyfishjy.library.RippleBackground
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/content"
    app:rb_color="#0099CC"
    app:rb_radius="32dp"
    app:rb_rippleAmount="4"
    app:rb_duration="3000"
    app:rb_scale="6">
</com.skyfishjy.library.RippleBackground>
  1. Starting and stopping the ripple animation programmatically:
final RippleBackground rippleBackground = (RippleBackground)findViewById(R.id.content);
rippleBackground.startRippleAnimation();
// To stop the animation
// rippleBackground.stopRippleAnimation();
  1. Customizing the ripple animation programmatically:
RippleBackground rippleBackground = (RippleBackground)findViewById(R.id.content);
rippleBackground.setRippleColor(Color.RED);
rippleBackground.setRippleRadius(50);
rippleBackground.setRippleDurationTime(5000);
rippleBackground.setRippleAmount(5);
rippleBackground.setRippleScale(7.0f);

Getting Started

  1. Add the JitPack repository to your project's build.gradle file:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.skyfishjy:android-ripple-background:1.0.1'
}
  1. Use the RippleBackground view in your layout XML or create it programmatically, then start the animation in your activity or fragment:
RippleBackground rippleBackground = findViewById(R.id.ripple_background);
rippleBackground.startRippleAnimation();

Competitor Comparisons

Android like button with delightful star animation inspired by Twitter's heart. See blog post for description.

Pros of LikeAnimation

  • Focuses specifically on like/heart animations, providing a more tailored solution
  • Offers a smoother, more polished animation effect
  • Easier to integrate into existing projects due to its focused functionality

Cons of LikeAnimation

  • Less versatile compared to android-ripple-background, as it's limited to like/heart animations
  • May require additional customization for different use cases
  • Smaller community and fewer updates

Code Comparison

LikeAnimation:

LikeButtonView likeButtonView = (LikeButtonView) findViewById(R.id.like_button);
likeButtonView.setOnLikeListener(new OnLikeListener() {
    @Override
    public void liked(boolean isLiked) {
        // Handle like action
    }
});

android-ripple-background:

RippleBackground rippleBackground = (RippleBackground) findViewById(R.id.content);
rippleBackground.startRippleAnimation();
rippleBackground.stopRippleAnimation();

Both libraries offer simple implementation, but LikeAnimation is more specific to like/heart animations, while android-ripple-background provides a more general-purpose ripple effect that can be used in various contexts.

Implementation of Ripple effect from Material Design for Android API 9+

Pros of RippleEffect

  • Supports custom shapes and colors for the ripple effect
  • Allows for programmatic control of the ripple animation
  • Lightweight implementation with minimal dependencies

Cons of RippleEffect

  • Less active maintenance and updates compared to android-ripple-background
  • Limited documentation and examples for advanced usage
  • May require more manual configuration for complex layouts

Code Comparison

RippleEffect:

RippleView rippleView = (RippleView) findViewById(R.id.ripple);
rippleView.setRippleColor(Color.parseColor("#ff0000"));
rippleView.setRippleDuration(1000);
rippleView.setRippleType(RippleView.RippleType.RECTANGLE);

android-ripple-background:

RippleBackground rippleBackground = (RippleBackground) findViewById(R.id.content);
rippleBackground.startRippleAnimation();
rippleBackground.stopRippleAnimation();

Both libraries offer simple implementation for ripple effects, but RippleEffect provides more customization options out of the box. android-ripple-background focuses on a specific circular ripple animation, while RippleEffect allows for different shapes and more granular control over the animation properties.

RippleEffect may be better suited for projects requiring diverse ripple animations across various UI elements. android-ripple-background is more appropriate for simpler, circular ripple backgrounds with less need for customization.

Android L Ripple effect wrapper for Views

Pros of material-ripple

  • More versatile, can be applied to any View
  • Supports both static and dynamic ripple effects
  • Offers more customization options (e.g., ripple color, duration)

Cons of material-ripple

  • Requires more setup and configuration
  • May have a slightly higher performance overhead
  • Less suitable for creating background animations

Code Comparison

material-ripple:

MaterialRippleLayout.on(view)
    .rippleColor(Color.BLACK)
    .rippleAlpha(0.2f)
    .rippleDuration(350)
    .create();

android-ripple-background:

RippleBackground rippleBackground = findViewById(R.id.content);
rippleBackground.startRippleAnimation();

The material-ripple library offers more granular control over the ripple effect, allowing developers to customize various aspects of the animation. In contrast, android-ripple-background provides a simpler API for creating background ripple animations, with fewer customization options but easier implementation for specific use cases.

Both libraries serve different purposes: material-ripple is better suited for adding ripple effects to UI elements, while android-ripple-background excels at creating animated ripple backgrounds. The choice between the two depends on the specific requirements of your project and the desired visual effect.

This is a library with components of Android L to you use in android 2.2

Pros of MaterialDesignLibrary

  • Offers a wider range of Material Design components and widgets
  • Provides more customization options for UI elements
  • Includes animations and transitions for a smoother user experience

Cons of MaterialDesignLibrary

  • Larger library size, potentially increasing app size
  • May require more setup and configuration
  • Less focused on specific effects like ripple backgrounds

Code Comparison

MaterialDesignLibrary:

<com.gc.materialdesign.views.ButtonFlat
    android:id="@+id/buttonflat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#1E88E5"
    android:text="Button" />

android-ripple-background:

<com.skyfishjy.library.RippleBackground
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rb_color="#0099CC"
    app:rb_radius="32dp"
    app:rb_rippleAmount="4"
    app:rb_duration="3000"
    app:rb_scale="6" />

MaterialDesignLibrary offers a more comprehensive set of Material Design components, while android-ripple-background focuses specifically on creating ripple effects. The code examples show the difference in implementation, with MaterialDesignLibrary providing a custom button and android-ripple-background offering a dedicated ripple effect view. Choose MaterialDesignLibrary for a full Material Design implementation, or android-ripple-background for a lightweight ripple effect solution.

Lollipop ViewAnimationUtils.createCircularReveal for everyone 4.0+

Pros of CircularReveal

  • Provides a circular reveal animation effect, which can be more visually appealing for certain UI transitions
  • Offers more customization options for the reveal animation, including start position and radius
  • Supports both circular reveal and hide animations

Cons of CircularReveal

  • Limited to circular reveal animations, while android-ripple-background offers a wider range of ripple effects
  • May require more complex implementation for simple ripple effects
  • Less suitable for continuous or repeating animations compared to android-ripple-background

Code Comparison

CircularReveal:

ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius)
    .setDuration(duration)
    .start();

android-ripple-background:

RippleBackground rippleBackground = (RippleBackground)findViewById(R.id.content);
rippleBackground.startRippleAnimation();

CircularReveal focuses on creating reveal/hide animations for views, while android-ripple-background is designed specifically for creating ripple effects. The implementation of CircularReveal requires more parameters and setup, whereas android-ripple-background offers a simpler API for creating ripple animations.

Both libraries serve different purposes and can be useful depending on the specific animation requirements of your Android application. CircularReveal is better suited for transition effects, while android-ripple-background excels at creating continuous ripple animations.

A support library for VectorDrawable and AnimatedVectorDrawable classes introduced in Lollipop

Pros of vector-compat

  • Focuses on vector drawable compatibility for older Android versions
  • Provides a more comprehensive solution for vector graphics across different API levels
  • Offers additional utility methods for working with vector drawables

Cons of vector-compat

  • Limited to vector drawable functionality, not providing animation effects like ripples
  • May require more setup and integration compared to simpler libraries
  • Less actively maintained, with fewer recent updates

Code Comparison

vector-compat:

VectorDrawableCompat vectorDrawable = VectorDrawableCompat.create(getResources(), R.drawable.vector_icon, getTheme());
imageView.setImageDrawable(vectorDrawable);

android-ripple-background:

RippleBackground rippleBackground = (RippleBackground)findViewById(R.id.content);
rippleBackground.startRippleAnimation();

The code snippets demonstrate the different focus areas of the libraries. vector-compat is centered on creating and using vector drawables, while android-ripple-background provides an easy way to implement ripple animations.

vector-compat is better suited for projects requiring broad vector drawable support across Android versions, while android-ripple-background is ideal for adding visually appealing ripple effects to UI elements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Android Ripple Background

A beautiful ripple animation for your app. You can easily change its color, speed of wave, one ripple or multiple ripples. See demo below.

Simple Ripple      Multiple ripples

##Usage

###Step 1

####Install with Gradle

dependencies {
        compile 'com.skyfishjy.ripplebackground:library:1.0.1'
}

###Step 2 ####RippleBackground

Add RippleBackground to your layout with content you want, like an ImageView. Configure the view customization elements using styleable attributes.

<com.skyfishjy.library.RippleBackground
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/content"
    app:rb_color="#0099CC"
    app:rb_radius="32dp"
    app:rb_rippleAmount="4"
    app:rb_duration="3000"
    app:rb_scale="6">
    <ImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_centerInParent="true"
        android:id="@+id/centerImage"
        android:src="@drawable/demoImage"/>
</com.skyfishjy.library.RippleBackground>

Start animation:

    final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
    ImageView imageView=(ImageView)findViewById(R.id.centerImage);
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            rippleBackground.startRippleAnimation();
        }
    });

Stop animation:

    rippleBackground.stopRippleAnimation();

##Theming

  • app:rb_color [color def:@android:color/holo_blue_dark] --> Color of the ripple
  • app:rb_radius [dimension def:64dp ] --> Radius of the ripple
  • app:rb_duration [integer def:3000 ] --> Duration of one ripple animation (millisecond)
  • app:rb_rippleAmount [integer def:6] --> Max amount of ripples at one screen
  • app:rb_scale [interger def:6] --> Scale of ripple at the end of one animation cycle
  • app:rb_type [enum (fillRipple, strokeRipple) def:fillRipple] --> Filled circle or ring
  • app:rb_strokeWidth [dimension def:2dp] --> Stroke width of the ripple, ONLY work when rb_type="strokeRipple"

Android Arsenal