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 = '''
#:import images_path kivymd.images_path


MDScreen:

    CircularRippleButton:
        source: f"{images_path}/kivymd.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):
        self.theme_cls.theme_style = "Dark"
        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):
        self.theme_cls.theme_style = "Dark"
        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

Default value of the ripple effect radius.

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 rgba format.

ripple_color is an ColorProperty and defaults to None.

ripple_alpha

Alpha channel values for ripple effect.

ripple_alpha is an NumericProperty and defaults to 0.5.

ripple_scale

Ripple effect scale.

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.

ripple_duration_in_fast is an NumericProperty and defaults to 0.3.

ripple_duration_in_slow

Ripple duration when long touching to widget.

ripple_duration_in_slow is an NumericProperty and defaults to 2.

ripple_duration_out

The duration of the disappearance of the wave effect.

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_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’.

abstract lay_canvas_instructions(self)
start_ripple(self)
finish_ripple(self)
fade_out(self, *args)
anim_complete(self, *args)
on_touch_down(self, touch)
call_ripple_animation_methods(self, touch)
on_touch_move(self, touch, *args)
on_touch_up(self, touch)
class kivymd.uix.behaviors.ripple_behavior.RectangularRippleBehavior

Class implements a rectangular ripple effect.

ripple_scale

See ripple_scale.

ripple_scale is an NumericProperty and defaults to 2.75.

lay_canvas_instructions(self)
class kivymd.uix.behaviors.ripple_behavior.CircularRippleBehavior

Class implements a circular ripple effect.

ripple_scale

See ripple_scale.

ripple_scale is an NumericProperty and defaults to 1.

lay_canvas_instructions(self)