Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
EudyContreras committed Feb 13, 2019
2 parents 34e92d5 + 9261cca commit 2cf348c
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 96 deletions.
190 changes: 94 additions & 96 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,101 +1,97 @@

# Ripple Effect Library
# Indicator Effect Library

[![platform](https://img.shields.io/badge/platform-Android-green.svg)](https://www.android.com)
[![API](https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat)](https://android-arsenal.com/api?level=21s)
[![License: ISC](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/ISC)
[![](https://jitpack.io/v/EudyContreras/Ripple-Effect-View.svg)](https://jitpack.io/#EudyContreras/Ripple-Effect-View)
![Version](https://img.shields.io/github/release/EudyContreras/RippleEffect.svg?style=flat)
[![](https://jitpack.io/v/EudyContreras/Indicator-Effect-View.svg)](https://jitpack.io/#EudyContreras/Indicator-Effect-View)
![Version](https://img.shields.io/github/release/EudyContreras/Indicator-Effect-View.svg?style=flat)
![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)


#### This library allows you to display a ripple effect as an overlay to any view. The ripple effect is fully customizeable and supports a variety of options.
#### This library allows you to display a CTA Call To Action indicator effect as an overlay to any view. The indicator effect is fully customizeable and supports a variety of options.

![Ripple Effect Image][RippleImage]
![Indicator Effect Image][IndicatorImage]

[RippleImage]: https://github.com/EudyContreras/RippleEffect/blob/EudyContreras-readme/Ripple.png
[IndicatorImage]: https://github.com/EudyContreras/Ripple-Effect-View/blob/EudyContreras-readme/indicator.png


## About:

This ripple effect view allows for a high variety of customizations in order to fit the needs of all users. It is simple to use and easy to customize. Here are some of the features of the ripple effect view.

* Create an effect with an unlimited amount of ripples given a specified time
* Create a ripple effect with a border
* Control the minimum and maximum opacity of the ripple from start to end
* Interpolate the ripple between a start and end color
* Choose between a circular or rectangular ripple with possibility of rounded corners.
* Choose between indicator ripples, filled ripples, or outline ripples.
* Make the ripple animation repeat as many times as you want.
* Add an action to be perform upon starting a ripple effect animation
* Add an action to be perform upon the end of a ripple effect animation
This indicator effect view allows for a high variety of customizations in order to fit the needs of all users. It is simple to use and easy to customize. Here are some of the features of the indicator effect view.

* Create an effect with an unlimited amount of indicator ripples given a specified time
* Create a indicator effect with a border
* Control the minimum and maximum opacity of the indicator ripple from start to end
* Interpolate the indicator ripple between a start and end color
* Choose between a circular or rectangular indicator ripple with possibility of rounded corners.
* Choose between indicator ripples, filled indicator ripples, or outline indicator ripples.
* Make the indicator ripple animation repeat as many times as you want.
* Add an action to be perform upon starting a indicator effect animation
* Add an action to be perform upon the end of a indicator effect animation
* Add an interpolator to the ripple animation
* Etc...

## APIs and customization:

In code **APIs** offered by **Rippple View**.
In code **APIs** offered by **Indicator View**.

The ripple effect has a high number of apis that give full control of how the ripple is shown to the user.
The indicator effect has a high number of apis that give full control of how the ripple is shown to the user.

### In Code Code methods:
### Some of the in Code Code methods:
|APIs | Description|
|---|---|
|**startRippleAnimation()**| No input|
|**startRippleAnimation(int startDelay)**| The delay before the ripple starts|
|**stopRippleAnimation(int duration)**| Stop the ripple animation|
|**stopRippleAnimation()**| Stop the ripple animation|
|**setUpWith(ViewGroup parent)**| Sets a parent root to the ripple view|
|**setTarget(Context context, View view)**|Sets the target view|
|**setTarget(View view, float radiusRatio)**|Sets the target view and the relative size ratio|
|**setTarget(int centerX, int centerY)**|Uses coordinates to position the ripple|
|**setOnEnd(Runnable onEnd)**|Executes the wrapped code upon ending the ripple animation|
|**setOnStart(Runnable onStart)**|Executes the wrapped code upon starting the ripple animation|
|**setRippleDuration(int rippleDuration)**|Sets the duration of the ripple animation|
|**setDrawListener(ViewDrawListener listener)**|Sets a listener for when the view is first drawn|
|**setRippleType(int rippleType)**|Sets the type of ripple. Ex: RippleView.RIPPLE_TYPE_INDICATOR|
|**setRippleColor(int rippleColor)**|Sets the color of the ripple effect|
|**setRippleRepeats(int rippleRepeats)**|Sets how many times the ripple will repeat|
|**setRippleRepeatMode(int rippleRepeatMode)**|Sets the repeat mode. Ex: RippleView.REPEAT_RESTART_MODE|
|**setRippleCount(int rippleCount)**|Sets the amount of ripple to display|
|**setRippleMinOpacity(float rippleMinOpacity)**|Sets the min opacity a ripple can have|
|**setRippleMaxOpacity(float rippleMaxOpacity)**|Sets the max opacity a ripple can have|
|**setRippleStrokeWidth(float rippleStrokeWidth)**|Sets the width in pixels of the stroke used for outline style|



**XML** Layout **APIs** offered by the **Rippple View**.

The ripple view can be added directly on the xml layout. The properties below will allow you to modify the ripple to your taste.

### In XML RippleView properties:
|**startIndicatorAnimation**| *Starts the indicator animation* |
|**stopIndicatorAnimation**| *Stop the indicator animation* |
|**setUpWith**| *Sets a parent root to the indicator view* |
|**setTarget**| *Sets the target view or target position* |
|**setOnEnd**| *Executes the wrapped code upon ending the indicator animation* |
|**setOnStart**| *Executes the wrapped code upon starting the indicator animation* |
|**setIndicatorDuration**| *Sets the duration of the indicator animation* |
|**setDrawListener**| *Sets a listener for when the view is first drawn* |
|**setIndicatorType**| *Sets the type of indicator. Ex: IndicatorView.INDICATOR_TYPE_AROUND* |
|**setIndicatorColor**| *Sets the color of the indicator effect* |
|**setIndicatorRepeats**| *Sets how many times the indicator will repeat* |
|**setIndicatorRepeatMode**| *Sets the repeat mode. Ex: IndicatorView.REPEAT_RESTART_MODE* |
|**setIndicatorRippleCount**| *Sets the amount of indicator to display* |
|**setIndicatorMinOpacity**| *Sets the min opacity a indicator can have* |
|**setIndicatorMaxOpacity**| *Sets the max opacity a indicator can have* |
|**setIndicatorStrokeWidth**| *Sets the width in pixels of the stroke used for outline style* |



**XML** Layout **APIs** offered by the **Indicator View**.

The indicator view can be added directly on the xml layout. The properties below will allow you to modify the indicator to your taste.

### Some of the in XML IndicatorView properties:

|Property | Description|
|---|---|
| **rv_rippleType:** |The type of ripple to be shown, The ripple can be outlined or filled.|
| **rv_rippleRepeatMode:** |The repeat mode of how the animation should be repeated.|
| **rv_rippleShapeType:** |The ripple can be circular or rectangular.|
| **rv_autoStartAnimation:** |Determines whether the ripple animation should start automatically.|
| **rv_rippleDuration:** |Determines the amount of time that the ripple animation should last.|
| **rv_rippleColor:** |Determines the color the ripple should have.|
| **rv_rippleStrokeColor:** |Determines the border color of the ripple if using ripple border.|
| **rv_rippleColorStart:** |Determines the start color the ripple should have if interpolation enabled.|
| **rv_rippleColorEnd:** |Determines the ending color the ripple should have if interpolation enabled.|
| **rv_rippleCount:** |Determines the amount of ripples to animate.|
| **rv_rippleStrokeWidth:** |Determine the width of the strokes that are shown if outline is chosen|
| **rv_rippleClipRadius:** |Determines how big the clipped area radius will be for the Indicator ripple|
| **rv_rippleClipWidth:** |Determines how big the clipped area width will be for the Indicator ripple
| **rv_rippleClipHeight:** |Determines how big the clipped area height will be for the Indicator ripple|
| **rv_rippleMaxOpacity:** |Determines the max amount of opacity a ripple can have|
| **rv_rippleMinOpacity:** |Determines the lowest amount of opacity a ripple can have|
| **rv_rippleMaxRadius:** |Determines the hightest radius a ripple can have|
| **rv_rippleMinRadius:** |Determines the lowest radius a ripple can have|
| **rv_rippleMinWidth:** |Determines the lowest width a rectangular ripple can have|
| **rv_rippleMaxWidth:** |Determines the highest width a rectangular ripple can have|
| **rv_rippleMinHeight:** |Determines the lowest height a rectangular ripple can have|
| **rv_rippleMaxHeight:** |Determines the highest height a rectangular ripple can have|
| **rv_rippleRepeatCount:** |Determines the amount of times a ripple will |
| **rv_rippleCornerRadius:** |Determines how rounded the corners of a rectangular ripple is |
| **iv_indicatorType:** |The type of indicator to be shown, The indicator can be outlined or filled.|
| **iv_indicatorRepeatMode:** |The repeat mode of how the animation should be repeated.|
| **iv_indicatorShapeType:** |The indicator can be circular or rectangular.|
| **iv_autoStartAnimation:** |Determines whether the indicator animation should start automatically.|
| **iv_indicatorDuration:** |Determines the amount of time that the indicator animation should last.|
| **iv_indicatorColor:** |Determines the color the indicator should have.|
| **iv_indicatorStrokeColor:** |Determines the border color of the indicator if using indicator border.|
| **iv_indicatorColorStart:** |Determines the start color the indicator should have if interpolation enabled.|
| **iv_indicatorColorEnd:** |Determines the ending color the indicator should have if interpolation enabled.|
| **iv_indicatorCount:** |Determines the amount of indicator to animate.|
| **iv_indicatorStrokeWidth:** |Determine the width of the strokes that are shown if outline is chosen|
| **iv_indicatorClipRadius:** |Determines how big the clipped area radius will be for the Indicator ripple|
| **iv_indicatorClipWidth:** |Determines how big the clipped area width will be for the Indicator ripple
| **iv_indicatorClipHeight:** |Determines how big the clipped area height will be for the Indicator ripple|
| **iv_indicatoraxOpacity:** |Determines the max amount of opacity a indicator can have|
| **iv_indicatorMinOpacity:** |Determines the lowest amount of opacity a indicator can have|
| **iv_indicatorMaxRadius:** |Determines the hightest radius a indicator can have|
| **iv_indicatorMinRadius:** |Determines the lowest radius a indicator can have|
| **iv_indicatorMinWidth:** |Determines the lowest width a rectangular indicator can have|
| **iv_indicatorMaxWidth:** |Determines the highest width a rectangular indicator can have|
| **iv_indicatorMinHeight:** |Determines the lowest height a rectangular indicator can have|
| **iv_indicatorMaxHeight:** |Determines the highest height a rectangular indicator can have|
| **iv_indicatorRepeatCount:** |Determines the amount of times a indicator will |
| **iv_indicatorCornerRadius:** |Determines how rounded the corners of a rectangular indicator is |


## How to use it?
Expand All @@ -122,7 +118,7 @@ Add as a dependency in you applications build.gradle.
``` groovy
dependencies {
implementation "com.github.EudyContreras:Ripple-Effect-View:v1.0"
implementation "com.github.EudyContreras:Indicator-Effect-View:v1.1.0"
}
```

Expand All @@ -131,37 +127,37 @@ Add as a dependency in you applications build.gradle.
Add the Ripple View to your layout:

``` xml
<com.eudycontreras.rippleview
<com.eudycontreras.indicatorview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:rv_rippleType="indicatorRipple"
app:rv_rippleRepeatMode="restart"
app:rv_rippleShapeType="circle"
app:rv_autoStartAnimation="true"
app:rv_rippleDuration="3000"
app:rv_rippleColor="@color/blue"
app:iv_indicatorType="IndicatorRipple"
app:iv_indicatorRepeatMode="restart"
app:iv_indicatorShapeType="circle"
app:iv_autoStartAnimation="true"
app:iv_indicatorDuration="3000"
app:iv_indicatorColor="@color/blue"
/>
```

Or add the ripple directly through code:
Or add the indicator directly through code:

``` java
RippleView ripple = new RippleView(this);
IndicatorView indicator = new IndicatorView(this);

ripple.setRippleType(RippleView.RIPPLE_TYPE_INDICATOR);
ripple.setRippleClipRadius(DimensionUtility.convertDpToPixel(this,50));
ripple.setRippleColor(ContextCompat.getColor(this,R.color.accent));
ripple.setRippleCount(3);
ripple.setRippleMinOpacity(0.1f);
ripple.setRippleMaxOpacity(0.8f);
ripple.setRippleRepeatMode(RippleView.REPEAT_RESTART_MODE);
ripple.setRippleRepeats(RippleView.INFINITE_REPEATS);
ripple.setRippleDuration(2500);
ripple.setUpWith(findViewById(R.id.login_activity));
indicator.setIndicatorType(IndicatorView.INDICATOR_TYPE_AROUND);
indicator.setIndicatorClipRadius(DimensionUtility.convertDpToPixel(this,50));
indicator.setIndicatorColor(ContextCompat.getColor(this,R.color.accent));
indicator.setIndicatorCount(3);
indicator.setIndicatorMinOpacity(0.1f);
indicator.setIndicatorMaxOpacity(0.8f);
indicator.setIndicatorRepeatMode(IndicatorView.REPEAT_MODE_RESTART);
indicator.setIndicatorRepeats(IndicatorView.INFINITE_REPEATS);
indicator.setIndicatorDuration(2500);
indicator.setUpWith(findViewById(R.id.login_activity));
```


When using the RippleView through code it is importatnt to set a target at the right place. The target must be set once the view's dimensions and location have been computed.
When using the IndicatorView through code it is importatnt to set a target at the right place. The target must be set once the view's dimensions and location have been computed.



Expand All @@ -172,7 +168,7 @@ When using the RippleView through code it is importatnt to set a target at the r

void onPause(){
super.onPause();
ripple.stopRippleAnimation()
indicator.stopIndicatorAnimation()
}

void onResume() {
Expand All @@ -181,8 +177,8 @@ When using the RippleView through code it is importatnt to set a target at the r
View view = findViewById(R.id.someElement);

view.post {
ripple.setTarget(this, view, radiusRatio, clipRatio)
ripple.startRippleAnimation()
indicator.setTarget(this, view, radiusRatio, clipRatio)
indicator.startIndicatorAnimation()
}
}
```
Expand All @@ -202,6 +198,8 @@ There are parts of this library that are yet to be finished and there are also s
- [ ] Port the code kotlin
- [ ] Add to different repositories besides jitpack
- [ ] Allow the user to set a repeat interval/wait time
- [ ] Add builder pattern for creating indicator
- [ ] Allow the effect to translate with its target upon animations

## License:

Expand Down
Binary file added effect_rec_1.mov
Binary file not shown.
Binary file added effect_rec_2.mov
Binary file not shown.
Binary file added indicator.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2cf348c

Please sign in to comment.