Ripple#

#

Classes implements a circular and rectangular ripple effects.

To create a widget with сircular ripple effect, you must create a new class that inherits from the CircularRippleBehavior class.

For example, let’s create an image button with a circular ripple effect:

from kivy.lang import Builder
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image

from kivymd.app import MDApp
from kivymd.uix.behaviors import CircularRippleBehavior

KV = '''
MDScreen:

    CircularRippleButton:
        source: "data/logo/kivy-icon-256.png"
        size_hint: None, None
        size: "250dp", "250dp"
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class CircularRippleButton(CircularRippleBehavior, ButtonBehavior, Image):
    def __init__(self, **kwargs):
        self.ripple_scale = 0.85
        super().__init__(**kwargs)


class Example(MDApp):
    def build(self):
        return Builder.load_string(KV)


Example().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/circular-ripple-effect.gif

To create a widget with rectangular ripple effect, you must create a new class that inherits from the RectangularRippleBehavior class:

from kivy.lang import Builder
from kivy.uix.behaviors import ButtonBehavior

from kivymd.app import MDApp
from kivymd.uix.behaviors import RectangularRippleBehavior, BackgroundColorBehavior

KV = '''
MDScreen:

    RectangularRippleButton:
        size_hint: None, None
        size: "250dp", "50dp"
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class RectangularRippleButton(
    RectangularRippleBehavior, ButtonBehavior, BackgroundColorBehavior
):
    md_bg_color = [0, 0, 1, 1]


class Example(MDApp):
    def build(self):
        return Builder.load_string(KV)


Example().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/rectangular-ripple-effect.gif

API - kivymd.uix.behaviors.ripple_behavior#

class kivymd.uix.behaviors.ripple_behavior.CommonRipple#

Base class for ripple effect.

ripple_rad_default#

The starting value of the radius of the ripple effect.

CircularRippleButton:
    ripple_rad_default: 100
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-rad-default.gif

ripple_rad_default is an NumericProperty and defaults to 1.

ripple_color#

Ripple color in (r, g, b, a) format.

CircularRippleButton:
    ripple_color: app.theme_cls.primary_color
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-color.gif

ripple_color is an ColorProperty and defaults to None.

ripple_alpha#

Alpha channel values for ripple effect.

CircularRippleButton:
    ripple_alpha: .9
    ripple_color: app.theme_cls.primary_color
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-alpha.gif

ripple_alpha is an NumericProperty and defaults to 0.5.

ripple_scale#

Ripple effect scale.

CircularRippleButton:
    ripple_scale: .5
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-scale-05.gif
CircularRippleButton:
    ripple_scale: 1
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-scale-1.gif

ripple_scale is an NumericProperty and defaults to None.

ripple_duration_in_fast#

Ripple duration when touching to widget.

CircularRippleButton:
    ripple_duration_in_fast: .1
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-duration-in-fast.gif

ripple_duration_in_fast is an NumericProperty and defaults to 0.3.

ripple_duration_in_slow#

Ripple duration when long touching to widget.

CircularRippleButton:
    ripple_duration_in_slow: 5
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-duration-in-slow.gif

ripple_duration_in_slow is an NumericProperty and defaults to 2.

ripple_duration_out#

The duration of the disappearance of the wave effect.

CircularRippleButton:
    ripple_duration_out: 5
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-duration-out.gif

ripple_duration_out is an NumericProperty and defaults to 0.3.

ripple_canvas_after#

The ripple effect is drawn above/below the content.

New in version 1.0.0.

MDIconButton:
    ripple_canvas_after: True
    icon: "android"
    ripple_alpha: .8
    ripple_color: app.theme_cls.primary_color
    icon_size: "100sp"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-canvas-after-true.gif
MDIconButton:
    ripple_canvas_after: False
    icon: "android"
    ripple_alpha: .8
    ripple_color: app.theme_cls.primary_color
    icon_size: "100sp"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ripple-canvas-after-false.gif

ripple_canvas_after is an BooleanProperty and defaults to True.

ripple_func_in#

Type of animation for ripple in effect.

ripple_func_in is an StringProperty and defaults to ‘out_quad’.

ripple_func_out#

Type of animation for ripple out effect.

ripple_func_out is an StringProperty and defaults to ‘ripple_func_out’.

ripple_effect#

Should I use the ripple effect.

ripple_effect is an BooleanProperty and defaults to True.

abstract lay_canvas_instructions() NoReturn#
start_ripple() None#
finish_ripple() None#
fade_out(*args) None#
anim_complete(*args) None#

Fired when the “fade_out” animation complete.

on_touch_down(touch)#
call_ripple_animation_methods(touch) None#
on_touch_move(touch, *args)#
on_touch_up(touch)#
class kivymd.uix.behaviors.ripple_behavior.RectangularRippleBehavior#

Class implements a rectangular ripple effect.

For more information, see in the CommonRipple class documentation.

ripple_scale#

See ripple_scale.

ripple_scale is an NumericProperty and defaults to 2.75.

lay_canvas_instructions() None#

Adds graphic instructions to the canvas to implement ripple animation.

class kivymd.uix.behaviors.ripple_behavior.CircularRippleBehavior#

Class implements a circular ripple effect.

For more information, see in the CommonRipple class documentation.

ripple_scale#

See ripple_scale.

ripple_scale is an NumericProperty and defaults to 1.

lay_canvas_instructions() None#