A beautiful ripple animation for your app

Overview

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

Comments
  • How to start the ripple from an angle

    How to start the ripple from an angle

    Hi I'm using your beatufil library on a button that is placed on the lower right angle of the screen: I would like to make the ripple start from that point, but on the contrary I tap on the button and the ripple always start from center..

    Thanks a lot..

    opened by brainvision 4
  • rippleStrokeWidth parameter not working

    rippleStrokeWidth parameter not working

    Hi,

    I am currently implementing this library but it seems that the rippleStrokeWidth parameter is not working.

    Here my implementation:

    <com.skyfishjy.library.RippleBackground
                    android:layout_width="match_parent"
                    android:layout_height="140dp"
                    android:layout_marginTop="330dp"
                    android:id="@+id/start_content"
                    app:rb_color="#000"
                    app:rb_radius="42dp"
                    app:rb_rippleAmount="5"
                    app:rb_type="strokeRipple"
                    app:rb_strokeWidth="4dp"
                    app:rb_duration="2000"
                    app:rb_scale="1.5">
    
                    <ImageView
                        android:id="@+id/startButton"
                        android:layout_width="84dp"
                        android:layout_height="84dp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/start_button"/>
                </com.skyfishjy.library.RippleBackground>
    

    Any idea why ?

    opened by ghost 3
  • how to keep ripple effect color to view

    how to keep ripple effect color to view

    hey awesome library i use it it works perfectlly but i wonder if it is possible to ripple effects end it stays same color not reset the color can you help me with this

    opened by lazypixelIn 2
  • Change ripple color programmatically

    Change ripple color programmatically

    Hi, as the title said, could we change the ripple color programmatically? I have clone your project and tried to make it, but it's not working. Could you help? Thanks.

    opened by elsennov 1
  • RippleAnimation not working on Release mode

    RippleAnimation not working on Release mode

    I just added this RippleAnimation on my project and everythinh was working just fine until I changed from debug to release mode. In the code nothing has changed about this Ripple library, I am using this way:

    <com.skyfishjy.library.RippleBackground
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:id="@+id/ripple_effect"
        app:rb_color="#336633"
        app:rb_radius="20dp"
        app:rb_rippleAmount="3"
        app:rb_duration="3000"
        app:rb_scale="3">
    
        <Button
            android:id="@+id/viewButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="+"
            android:textSize="30sp"
            android:textColor="@android:color/white"/>
    
    </com.skyfishjy.library.RippleBackground>
    

    Do I need to change anything on release mode? On release mode, this button is blinking randomly but keeps dissapeared if it is not touched

    opened by cortez87 1
  • Animation in Marshmallow devices got stuck

    Animation in Marshmallow devices got stuck

    Animation works nice in below lolipop devices, but in marshmallow devices it show very slow animation and stuck(looks like hang) and then again start animation, then again little stuck and this way animation work in marshmallow device.

    opened by KeyurKba 0
  • How to make ripples point Inwards

    How to make ripples point Inwards

    Hi, In my case, I also need to make the ripples animate inwards (Animate towards the center) in order to show that the view is receiving content How can i achieve this? Thanks

    opened by kcochibili 0
  • Doesn't work in BottomSheetDialogFragment

    Doesn't work in BottomSheetDialogFragment

    Tried to make it work inside a BottomSheetDialogFragment. But nothing happens when the bottom sheet is displayed.

    Here is my code -

    public class CountActionListDialogFragment extends BottomSheetDialogFragment {
    
        @SuppressLint("RestrictedApi")
        @Override
        public void setupDialog(@NonNull final Dialog dialog, int style) {
            super.setupDialog(dialog, style);
            View contentView = View.inflate(getContext(), R.layout.count_bottom_sheet, null);
            dialog.setContentView(contentView);
            try {
                final RippleBackground rippleBackground= Objects.requireNonNull(getActivity()).findViewById(R.id.rippleAnimation);
                rippleBackground.startRippleAnimation();
                ImageView imageView=Objects.requireNonNull(getActivity()).findViewById(R.id.centerImage);
                imageView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        rippleBackground.startRippleAnimation();
                    }
                });
            } catch (NullPointerException ignored) { }
        }
    
    }
    

    And bottom_sheet.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        <com.skyfishjy.library.RippleBackground
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:id="@+id/rippleAnimation"
            app:rb_color="@color/colorAccent"
            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/ic_check_circle_green_24dp" />
        </com.skyfishjy.library.RippleBackground>
    
    </LinearLayout>
    

    Might be similar to #32

    Thanks in advance!

    opened by thedarthcoder 0
  • Push Notification Stops the ripple Animation. Running on Nokia 5.1 - Android 8.1.0

    Push Notification Stops the ripple Animation. Running on Nokia 5.1 - Android 8.1.0

    I have implemented this library for quite a long time and it is a good ripple for ripple animation. Recently, I found the Bug, while running the Application on a particular Device, which in my case is Nokia 5.1 running on Android 8.1.0.

    The Bug, When I start the ripple animation if any push notification comes to my device it automatically stops the Ripple animation. I thought it is a bug on all the devices running on Android 8.1.0 or above but it runs perfectly on other devices running 8.1.0 and even the Pixel running on 9.0.0. I believed this has something to do with the memory of the device. I will upload the stack trace of the memory monitor later. But consider this a legit issue. Please try to fix it.

    opened by i-m-aman 0
Owner
Yao Yu
Yao Yu
Android ripple animation helper, easy to create Circular Reveal. | Android水波动画帮助类,轻松实现View show/hide/startActivity()特效。(0.4.6)

CircularAnim English | 中文 首先来看一个UI动效图。 效果图是是Dribbble上看到的,原作品在此。 我所实现的效果如下: Watch on YouTube Compile 最新可用版本 So,你可以如下compile该项目,也可以直接把这个类 CircularAnim 拷

ice 2k Nov 19, 2022
Android L Ripple effect wrapper for Views

Material Ripple Layout Ripple effect wrapper for Android Views Including in your project compile 'com.balysv:material-ripple:1.0.2' Check for latest v

Balys Valentukevicius 2.3k Dec 29, 2022
Implementation of Ripple effect from Material Design for Android API 9+

RippleEffect ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a ma

Robin Chutaux 4.9k Dec 30, 2022
Android Animation Easing Functions. Let's make animation more real!

Android Easing Functions This project is originally from my another project, AndroidViewAnimation, which is an animation collection, to help you make

代码家 2.5k Jan 4, 2023
Chandrasekar Kuppusamy 799 Nov 14, 2022
Road Runner is a library for android which allow you to make your own loading animation using a SVG image

Road Runner Road Runner is a library for android which allow you to make your own loading animation using a SVG image Sample video View in Youtube Dem

Adrián Lomas 1.2k Nov 18, 2022
FadingToolbar is an animation library which fades out your footer view in a ScrollView/RecyclerView and fades in a toolbar title

FadingToolbar is an animation library which fades out your footer view in a ScrollView/RecyclerView and fades in a toolbar title (analogue of the LargeTitle animation in iOS)

Hanna 9 Nov 3, 2022
A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesn’t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a

Burhanuddin Rashid 1k Jan 1, 2023
Beautiful and smooth custom loading views

mkloader Beautiful and smooth custom loading views Usage <com.tuyenmonkey.mkloader.MKLoader android:layout_width="wrap_content" an

Tuyen Nguyen 1.4k Nov 22, 2022
DuGuang 1k Dec 14, 2022
With MVVM Architecture pattern using Android Architecture Components This is a sample app demonstrating Youtube player animation using constraint layout

Youtube UI/UX Animation This is a sample app demonstrating Youtube UX/UI animation using ConstraintLayout.It implements the Keyframe Animation feature

Burhanuddin Rashid 866 Dec 29, 2022
Customizable bounce animation for any view like in Clash Royale app

Bounceview-Android Customizable bounce animation for any view updation Getting Started In your build.gradle dependencies { implementation 'hari.bo

Hariprasanth S 149 Nov 18, 2022
Cute view animation collection.

Android View Animations One day, I saw an iOS library, which is a view shaker, it's very beautiful. I think Android also need one, and should be bette

代码家 12.2k Jan 1, 2023
A component for flip animation on Android, which is similar to the effect in Flipboard iPhone/Android

android-flip Aphid FlipView is a UI component to accomplish the flipping animation like Flipboard does. A pre-built demo APK file for Android OS 2.2+

Bo 2.8k Dec 21, 2022
ArcAnimator helps to create arc transition animation: 2.3.+

ArcAnimator ArcAnimator helps to create arc transition animation: 14+ | ArcAnimator Demo | TransitionLoop Demo* *TransitionLoop Prototype by Min-Sang

Asyl Isakov 1.2k Dec 20, 2022
[] Android library for using the Honeycomb animation API on all versions of the platform back to 1.0!

DEPRECATED NineOldAndroids is deprecated. No new development will be taking place. Existing versions will (of course) continue to function. New applic

Jake Wharton 4.5k Jan 9, 2023
A motion-driven animation framework for Android.

Backboard A motion-driven animation framework for Android. backboard is a framework on top of rebound that makes it easier to use by coupling it to vi

Tumblr 1.7k Dec 30, 2022
Android library to control Transition animates. A simple way to create a interactive animation.

TransitionPlayer Android library to control Transition animates. A simple way to create a interactive animation. Demo1 SimpleTransition Code: ....

林法鑫 1.2k Dec 17, 2022
Collect android animation

Interactive-animation 描述:收集android上开源的酷炫的交互动画和视觉效果。 1.交互篇 2.视觉篇 交互篇 1.SlidingUpPanelLayout 项目介绍:他的库提供了一种简单的方式来添加一个可拖动滑动面板(由谷歌音乐推广,谷歌地图和Rdio)你的Android应

Ra 749 Dec 14, 2022