Code Monkey home page Code Monkey logo

rippleeffect's Introduction

RippleEffect

RippleEffect

ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a maximum of customization. You can find a sample that how to use an ExpandableLayout to your layout.

RippleEffect GIF

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");
        }

    });

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
        }
    });

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.

Troubleshooting

If you want to use the double ripple you have to set a background for the RippleView or for its child.

Acknowledgements

Thanks to Google for its Material Design :)

MIT License

    The MIT License (MIT)

    Copyright (c) 2014 Robin Chutaux

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in
    all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.

rippleeffect's People

Contributors

cheesebaron avatar javmarina avatar kashban avatar lukaciko avatar rafaeltoledo avatar traex avatar yuripourre avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rippleeffect's Issues

Can we start RippleEffect by click on another view ?

Hi,
i tried to add this method to RippleView class:

public void startRippleEffect() {
this.x = getMeasuredWidth() / 2;
this.y = getMeasuredHeight() / 2;
this.animationRunning = true;
invalidate();
}

it works with me but at first, the user have to click the view at least one time :(

what is the solution?

Onitemclicklistener not working on listview with this library

I used the same code as you used . Only difference is i used listview in place of recyclerview.
I applied ripple widget to the list item that i inflated. I kept that ripple widget com.andexert.library.RippleView as parent(same as you did) in row_view.xml. By doing this ripples are applied well but on click listener of list view stopped working. Please help me how to resolve this

RippleColor and Enabled

Hi!

Please, update version to achieve setRippleColor func, and it would be useful to have possibility to disable RippleView (state without ripple effect after touch)

OnClick not fired

Hi
Is anybody having problems setting OnClick listeners?
I tried with the sample too, using standard way, using Butterknife. I tried to set the listener on the RippleView, or on the inner ImageView. I can't get the click fired.
Thank you

(Just wondering) Inverse ripple?

I love this library. Can't see anywhere else to leave feedback though - Is there a way to do the ripple inverse? I'm thinking it would look nice with a circle button being turned off! (Btw, you have a a custom Action Bar - or does this work for regular Action Bar buttons?)

RecyclerView problem

Hello!

First of all congrats for the library. I wanna know if there is any way of waiting until the ripple animation ends to then send the click event to the child view.

I am asking it because I am trying to use it in a RecyclerView but it isn't possible to see it till the end.

Cheers,

Visibility changes during ripple

Draw function is not called when view is not visible. It may cause problems
Imagine following scenario:
1.Ripple starts
2.View becomes not visible (moved outside screen,visiblity changed,its parent visiblity change)
3.draw is not called -> timer is not updated. Ripple stops.
4.After some time view becomse visible, and the ripple continues

This may seem like a rare scenario but it happend few times in our project. We fixed it by
making timer update outside draw

Does this work for long click ?

I tried this and it works fine, but I can not find out the way to make it show animation on long click. Is that it does not support or I do it in wrong way?

Steals OnClick when creating a compound view with it on the layout

Basically what I'm doing is extending RelativeLayout to create a new custom "ViewGroup" and inflating the layout that has the ripple view on it.

When I click on the compound view the click is not received by the compound view but by the RippleView so there is no way to catch the event unless I declare a android:OnClick property on the RippleView and handle it on the activity that has the custom ViewGroup.

Prevent Exception in Android Studio Layout View

Android Studio has problems rendering a layout where RippleView is present.
You should avoid that by using View.isInEditMode() in your initmethod.

Your init should look like:

private void init(final Context context, final AttributeSet attrs)
    {
        if (!isInEditMode()) {
          final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RippleView);
          rippleColor = typedArray.getColor(R.styleable.RippleView_rv_color, getResources().getColor(R.color.rippelColor));
          rippleType = typedArray.getInt(R.styleable.RippleView_rv_type, 0);

          [...]

          this.setDrawingCacheEnabled(true);
        }
    }

Since you don't need to show anything in the preview window it is enough to just do nothing when in edit mode.

Enabled/disabled buttons

How can I disable the ripple effect when the button is also disabled, and enable it back when button is enabled?

Not working with onItemTouchListener

I have added a custom onItemTouchListener for reacting to touch events,that works well but ripple effect is all gone.Is there some sort of conflict between these two??I am pretty new to android so please dont mind if i am missing something really easy

Application to Navigation View support library

I am currently using the new Navigation View support library that Android released, and with it I want the menu drawers to have a ripple effect.

So I tried enclosing the new Navigation View widget support for Android with your RippleEffect. But if gives me an invalid argument error.

<com.andexert.library.RippleView>
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
rv_centered="true">

<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:paddingStart="@dimen/spacing_none"
app:paddingEnd="@dimen/spacing_none"
app:itemTextColor="@color/drawer_color"
app:menu="@menu/menu_navigation_drawer"
app:headerLayout="@layout/header_navigation_drawer"
android:focusable="false"/>

</com.andexert.library.RippleView>

Is this currently supported or not? If not, are there any workarounds to apply Ripple Effect to the menu drawers of the Navigation View?

Xamarin.Android port

Hi Robin,

Just wanted to let you know I have ported this to Xamarin.Android: https://github.com/Cheesebaron/RippleEffect

Copyright remains and you have been thanked in the README as well. Look it through and tell me if I missed some of the copyright as Visual Studio might have eaten some of the comments.

Thanks 👍

trying to use a recycled bitmap android.graphics.Bitmap@4025008 on doubleRipple

Hey there!

First of all before mentioning the error....Nice job there! Really simple finally something available on an version less than 12 :P
Anyway...I tried to implement the ripple:rv_type="doubleRipple" but I got this :

12-23 17:52:35.795 5456-5456/com.jusp E/AndroidRuntime﹕ FATAL EXCEPTION: main
Process: com.jusp, PID: 5456
java.lang.RuntimeException: Canvas: trying to use a recycled bitmap android.graphics.Bitmap@4025008
at android.graphics.Canvas.throwIfCannotDraw(Canvas.java:1225)
at android.graphics.Canvas.drawBitmap(Canvas.java:1359)
at com.jusp.gui.tablet.RippleView.getCircleBitmap(RippleView.java:255)
at com.jusp.gui.tablet.RippleView.draw(RippleView.java:165)
at android.view.View.updateDisplayListIfDirty(View.java:14048)
at android.view.View.getDisplayList(View.java:14071)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3388)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3367)
at android.view.View.updateDisplayListIfDirty(View.java:14008)
at android.view.View.getDisplayList(View.java:14071)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3388)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3367)
at android.view.View.updateDisplayListIfDirty(View.java:14008)
at android.view.View.getDisplayList(View.java:14071)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3388)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3367)
at android.view.View.updateDisplayListIfDirty(View.java:14008)
at android.view.View.getDisplayList(View.java:14071)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3388)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3367)
at android.view.View.updateDisplayListIfDirty(View.java:14008)
at android.view.View.getDisplayList(View.java:14071)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3388)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3367)
at android.view.View.updateDisplayListIfDirty(View.java:14008)
at android.view.View.getDisplayList(View.java:14071)
at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:266)
at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:272)
at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:311)
at android.view.ViewRootImpl.draw(ViewRootImpl.java:2492)
at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:2337)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1968)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1054)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5779)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:767)
at android.view.Choreographer.doCallbacks(Choreographer.java:580)
at android.view.Choreographer.doFrame(Choreographer.java:550)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:753)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:135)
at android.app.ActivityThread.main(ActivityThread.java:5221)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)

Does anyone know what would cause that?
Thanx :)

Using this lib to imitate reveal effect.

Hi I want to have reveal effect similar to when we touch on corner on RippleView present in this lib.
But I want to manually trigger that ripple instead of user's touch. Could you guys add a function to trigger it ?
I tried following but it didn't work.

// Obtain MotionEvent object
long downTime = SystemClock.uptimeMillis();
long eventTime = SystemClock.uptimeMillis() + 100;
float x = (rippleLayout.getLeft() + rippleLayout.getRight())/2;
float y = (rippleLayout.getTop() + rippleLayout.getBottom())/2;
// List of meta states found here: developer.android.com/reference/android/view/KeyEvent.html#getMetaState()
int metaState = 0;
MotionEvent motionEvent = MotionEvent.obtain(
downTime,
eventTime,
MotionEvent.ACTION_DOWN,
x,
y,
metaState
);
// Dispatch touch event to view
rippleLayout.dispatchTouchEvent(motionEvent);
rippleLayout.onTouchEvent(motionEvent);

Crete rippleDelayClick

Add rv_rippleDelayClick attribute for waiting of finish animation for calling performClick() action

Consider prefixing attrs

As title says, consider prefixing the attributes in the attrs.xml file, such that they don't clash with other libraries. In my Xamarin.Android port I am using rv infront of all of them. It might not be super unique traex or something similar could also be used.

Thanks :)

ListClickListener and Button click listener(inside listview item) Clicking both at once

I am using this Library in listview.

Since my custom listview has button, so I attached onclickListener in getView() method.

But when I click a button inside listview, it both take effect on Button click listener & list item click listener.

I tried to attach click listener in getView() method( ex)view.setOnClickListener...) instead of list item click listener, but it doesn't work.

plz fix this issue :(

LongClick fired twice

I am using RippleView to show ripple animations and setting a clicklistener as well as a longclicklistener.
The animations work for both cases but the longclicklistener is always fired twice. (I am opening an alert dialog which pops up twice)
Any help will be appreciated.

Make it work nice with FloatingActionButton

Hi,

I use a FloatingActionButton Library [1] and wanted to use the ripple on this.
However the effect is stopped rectangular around the button which looks kind of messy.
What I mean, the button is round graphically but the ripple continues to the button's edges which are straight.
It would be nice to define a maximum radius to which the ripple will continue instead of the view bounds.

Do you get what I mean? If not I try to add a screencast.

Regards,
David

[1] https://github.com/makovkastar/FloatingActionButton

Ripple event listener

Hi, first of all, I would like to say thanks for this lib (it is my favourite amongst other ripple libraries).

However, I was wondering; is there any chance that you could add ripple event listeners (e.g. onRippleAnimationComplete), or custom onClick listeners, so that we wouldn't need to use delayed execution to display ripple first and then execute our code?
Also, will there be any methods like "rippleStop" to stop ripple display?

Hover mode

Option for hover mode would be nice! Great lib btw :)

Extends RelativeLayout?

I'm curious why you are extending RelativeLayout rather than FrameLayout. The I believe FrameLayout is supposed to be more efficient.

Issue with onRippleCompletedListener and long click

Hi, I'm setting a onRippleCompleted listener for a view in a recycler view and it works beautifully with a normal click.

The problem is that the view also has a onCreateContextMenuListener. And when the long click fires, showing the context menu, the ripple also completes.

Is there a way to cancel the ripple on a long click?

app:rv_rippleDuration is not working

this two attributes are not working

app:rv_rippleDuration="1200"
app:rv_color="#d3d3d3"

ripple effect should complete first then action should be called. But here action is get called as soon as button is clicked. User cannot experience animation.

Add GridView support by using abstraction in RippleView

Hello,
I have question: can you change part of a library code:
private void sendClickEvent(final Boolean isLongClick)
{
if (getParent() instanceof ListView)
{
final int position = ((ListView) getParent()).getPositionForView(this);
final long id = ((ListView) getParent()).getItemIdAtPosition(position);
if (isLongClick)
{
if (((ListView) getParent()).getOnItemLongClickListener() != null)
((ListView) getParent()).getOnItemLongClickListener().onItemLongClick(((ListView) getParent()), this, position, id);
}
else
{
if (((ListView) getParent()).getOnItemClickListener() != null)
((ListView) getParent()).getOnItemClickListener().onItemClick(((ListView) getParent()), this, position, id);
}
}
}

Current code don't work good with GridView, RippleView steals touch events, so onItemClick is not fired, but if you change parent casting to AbsListView
http://developer.android.com/reference/android/widget/AbsListView.html
your library will be automatically supported by GridView, Carousel and other list based widget containers.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.