Button

Button

com.rey.material.widget.Buttonis a custom view that extends from android.widget.Button and added support for ripple effect.

Usage

Declare in XML:

    <com.rey.material.widget.Button
        style="@style/YourRippleDrawableStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        app:rd_enable="true"/>

rd_enable attribute have to be set to true to indicate that the view should look for RippleDrawable's attributes. If not, it'll simply ignore those attributes. Material Library already has some default RippleDrawable style you can use:

• Material.Drawable.Ripple.Touch.

• Material.Drawable.Ripple.Touch.Light.

• Material.Drawable.Ripple.Touch.MatchView.

• Material.Drawable.Ripple.Touch.MatchView.Light.

• Material.Drawable.Ripple.Wave.

• Material.Drawable.Ripple.Wave.Light.

In case you want to use style for your own style, not for RippleDrawable , then you can pass RippleDrawable style for rd_style attribute:

    <com.rey.material.widget.Button
        style="@style/YourOwnStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        app:rd_style="@style/YourRippleDrawableStyle"/>

Note that in this case, the view'll load the style from rd_style attribute and ignore all RippleDrawable atrributes you may set before.

Attributes

• rd_rippleType - The type of ripple. There are 2 types: touch and wave.

• rd_delayClick - There are 3 types: none (fire click event immediately), untilRelease (wait until Ripple's release animation start then fire event) and afterRelease (wait until Ripple's release animation end then fire event).

• rd_delayRipple - Delay starting ripple animation. Default is 0.

• rd_backgroundColor - The background color of ripple's layer (used in touch ripple tyle).

• rd_backgroundAnimDuration - The animation's duration of background color.

• rd_maxRippleRadius - The maximum ripple radius (used in touch ripple tyle). It can be dimension value or match_view enum(ripple effect will cover all view).

• rd_rippleColor - The color of ripple.

• rd_rippleAnimDuration - The animation's duration of ripple.

• rd_inInterpolator - The interpolator for IN animation.

• rd_outInterpolator - The interpolator for OUT animation.

• rd_maskType - The mask's type of ripple. The mask is used to restrict ripple effect only show in a part of view. There are 2 type of mask: rectangle and oval.

• rd_cornerRadius - The corner's radius of mask.

• rd_topLeftCornerRadius - The top left corner's radius of mask.

• rd_topRightCornerRadius - The top right corner's radius of mask.

• rd_bottomLeftCornerRadius - The bottom left corner's radius of mask.

• rd_bottomRightCornerRadius - The bottom right corner's radius of mask.

• rd_padding - The padding of mask.

• rd_leftPadding - The left padding of mask.

• rd_topPadding - The top padding of mask.

• rd_rightPadding - The right padding of mask.

• rd_bottomPadding - The bottom padding of mask.

Ripple Effect for Custom View

If you want to add ripple effect for your custom view.

1. Add a RippleManager object in your custom view.

   RippleManager mRippleManager;

2. Add method getRippleManager() to retrieve the RippleManager object:

    protected RippleManager getRippleManager(){
        if(mRippleManager == null){
            synchronized (RippleManager.class){
                if(mRippleManager == null)
                    mRippleManager = new RippleManager();
            }
        }
   
        return mRippleManager;
    }

3. Call onCreate() method of RippleManager in view's constructor.

   getRippleManager().onCreate(this, context, attrs, defStyleAttr, defStyleRes);

4. Override setBackgroundDrawable(), setOnClickEvent() and onTouchEvent().

   @Override
   public void setBackgroundDrawable(Drawable drawable) {
       Drawable background = getBackground();
       if(background instanceof RippleDrawable && !(drawable instanceof RippleDrawable))
           ((RippleDrawable) background).setBackgroundDrawable(drawable);
       else
           super.setBackgroundDrawable(drawable);
   }
   
   @Override
   public void setOnClickListener(OnClickListener l) {
       RippleManager rippleManager = getRippleManager();
       if(l == rippleManager)
           super.setOnClickListener(l);
        else{
           rippleManager.setOnClickListener(l);
           setOnClickListener(rippleManager);
       }	
   }
   
   @Override
   public boolean onTouchEvent(@NonNull MotionEvent event) {
       boolean result = super.onTouchEvent(event);
       return  getRippleManager().onTouchEvent(event) || result;
   }

FloatingActionButton

Attributes

• fab_backgroundColor - The background color of this view.

• fab_radius - The radius of this view.

• fab_elevation - The elevation of this view.

• fab_iconSize - The size of icon drawable.

• fab_iconSrc - The drawable used as icon.

• fab_iconLineMorphing - The style of LineMorphingDrawable will be used as icon.

• fab_interpolator - The interpolator of animation when switch icon drawable.

• fab_animDuration - The duration of animation when switch icon drawable.

LineMorphingDrawable

LineMorphingDrawable is a Drawable class that draw a series of line segments and can animate them between 2 states.

##Attributes

• lmd_state - The reference to XML resource defines states of this Drawable.

• lmd_curState - The current state of this Drawable.

• lmd_padding - The padding of this Drawable.

• lmd_paddingLeft - The left padding of this Drawable.

• lmd_paddingTop - The top padding of this Drawable.

• lmd_paddingRight - The right padding of this Drawable.

• lmd_paddingBottom - The bottom padding of this Drawable.

• lmd_animDuration - The duration of animation when it switches state.

• lmd_interpolator - The interpolator of animation when it switches state.

• lmd_strokeSize - The size of stroke.

• lmd_strokeColor - The color of stroke.

• lmd_strokeCap - The cap setting of stroke. Can be butt, round or square enum.

• lmd_strokeJoin - The join setting of stroke. Can be miter, round or bevel enum.

• lmd_clockwise - If true, the animation will rotate clockwise when switch state.

• lmd_layoutDirection - The layout direction of this Drawable. There are 3 types: ltr, rtl and locale.

##State XML To define states for LineMorphingDrawable, you need to create a XML file with format:

<state-list>
    
    <state>			    <!-- the first state !-->
        <points>                    <!-- all value are fraction !-->
        	<item>0.5</item>    <!-- the x value of start point of first line segment !-->
        	<item>0</item>      <!-- the y value of start point of first line segment !-->
        	<item>0.5</item>    <!-- the x value of end point of first line segment !-->
        	<item>1</item>      <!-- the y value of end point of first line segment !-->
        	
        	<item>0</item>      <!-- the x value of start point of second line segment !-->
        	<item>0.5</item>    <!-- the y value of start point of second line segment !-->
        	<item>1</item>      <!-- the x value of end point of second line segment !-->
        	<item>0.5</item>    <!-- the y value of end point of second line segment !-->
            ...
        </points>     

        <links>               <!-- Each pair of values define the index of 2 line segment that are linked !-->
        	<item>0</item> 	
        	<item>1</item>
        </links>    
  
    </state>
    
</state-list>