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


Screen:

    CircularRippleButton:
        source: f"{images_path}/kivymd_logo.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()

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 = '''
Screen:

    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()

API - kivymd.uix.behaviors.ripplebehavior

class kivymd.uix.behaviors.ripplebehavior.CommonRipple

Bases: object

Base class for ripple effect.

ripple_rad_default

Default value of the ripple effect radius.

ripple_rad_default is an NumericProperty and defaults to 1.

ripple_color

Ripple color in rgba format.

ripple_color is an ListProperty and defaults to [].

ripple_alpha

Alpha channel values for ripple effect.

ripple_alpha is an NumericProperty and defaults to 0.5.

ripple_scale

Ripple effect scale.

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.

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_in is an StringProperty and defaults to ‘ripple_func_out’.

on_touch_down(self, touch)

abstract lay_canvas_instructions(self)

on_touch_move(self, touch, *args)

on_touch_up(self, touch)

start_ripple(self)

finish_ripple(self)

fade_out(self, *args)

anim_complete(self, *args)

class kivymd.uix.behaviors.ripplebehavior.RectangularRippleBehavior

Bases: kivymd.uix.behaviors.ripplebehavior.CommonRipple

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.ripplebehavior.CircularRippleBehavior

Bases: kivymd.uix.behaviors.ripplebehavior.CommonRipple

Class implements a circular ripple effect.

ripple_scale

See ripple_scale.

ripple_scale is an NumericProperty and defaults to 1.

lay_canvas_instructions(self)