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](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](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
ripple_rad_default
is anNumericProperty
and defaults to 1.
- ripple_color#
Ripple color in (r, g, b, a) format.
CircularRippleButton: ripple_color: app.theme_cls.primary_color
ripple_color
is anColorProperty
and defaults to None.
- ripple_alpha#
Alpha channel values for ripple effect.
CircularRippleButton: ripple_alpha: .9 ripple_color: app.theme_cls.primary_color
ripple_alpha
is anNumericProperty
and defaults to 0.5.
- ripple_scale#
Ripple effect scale.
CircularRippleButton: ripple_scale: .5
CircularRippleButton: ripple_scale: 1
ripple_scale
is anNumericProperty
and defaults to None.
- ripple_duration_in_fast#
Ripple duration when touching to widget.
CircularRippleButton: ripple_duration_in_fast: .1
ripple_duration_in_fast
is anNumericProperty
and defaults to 0.3.
- ripple_duration_in_slow#
Ripple duration when long touching to widget.
CircularRippleButton: ripple_duration_in_slow: 5
ripple_duration_in_slow
is anNumericProperty
and defaults to 2.
- ripple_duration_out#
The duration of the disappearance of the wave effect.
CircularRippleButton: ripple_duration_out: 5
ripple_duration_out
is anNumericProperty
and defaults to 0.3.
- ripple_canvas_after#
The ripple effect is drawn above/below the content.
Added 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"
MDIconButton: ripple_canvas_after: False icon: "android" ripple_alpha: .8 ripple_color: app.theme_cls.primary_color icon_size: "100sp"
ripple_canvas_after
is anBooleanProperty
and defaults to True.
- ripple_func_in#
Type of animation for ripple in effect.
ripple_func_in
is anStringProperty
and defaults to ‘out_quad’.
- ripple_func_out#
Type of animation for ripple out effect.
ripple_func_out
is anStringProperty
and defaults to ‘ripple_func_out’.
- ripple_effect#
Should I use the ripple effect.
ripple_effect
is anBooleanProperty
and defaults to True.
- abstract lay_canvas_instructions() NoReturn #
- on_touch_down(touch)#
- 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 anNumericProperty
and defaults to 2.75.
- 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 anNumericProperty
and defaults to 1.