Elevation

Classes implements a circular and rectangular elevation effects.

To create a widget with rectangular or circular elevation effect, you must create a new class that inherits from the RectangularElevationBehavior or CircularElevationBehavior class.

For example, let’s create an button with a rectangular elevation effect:

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

from kivymd.app import MDApp
from kivymd.uix.behaviors import (
    RectangularRippleBehavior,
    BackgroundColorBehavior,
    RectangularElevationBehavior,
)

KV = '''
<RectangularElevationButton>:
    size_hint: None, None
    size: "250dp", "50dp"


Screen:

    # With elevation effect
    RectangularElevationButton:
        pos_hint: {"center_x": .5, "center_y": .6}
        elevation: 11

    # Without elevation effect
    RectangularElevationButton:
        pos_hint: {"center_x": .5, "center_y": .4}
'''


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


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


Example().run()

Similarly, create a button with a circular elevation effect:

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

from kivymd.app import MDApp
from kivymd.uix.behaviors import (
    CircularRippleBehavior,
    CircularElevationBehavior,
)

KV = '''
#:import images_path kivymd.images_path


<CircularElevationButton>:
    size_hint: None, None
    size: "100dp", "100dp"
    source: f"{images_path}/kivymd_logo.png"


Screen:

    # With elevation effect
    CircularElevationButton:
        pos_hint: {"center_x": .5, "center_y": .6}
        elevation: 5

    # Without elevation effect
    CircularElevationButton:
        pos_hint: {"center_x": .5, "center_y": .4}
        elevation: 0
'''


class CircularElevationButton(
    CircularRippleBehavior,
    CircularElevationBehavior,
    ButtonBehavior,
    Image,
):
    md_bg_color = [0, 0, 1, 1]


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


Example().run()

API - kivymd.uix.behaviors.elevation

class kivymd.uix.behaviors.elevation.CommonElevationBehavior(**kwargs)

Bases: object

elevation

Elevation value.

elevation is an AliasProperty that returns the value for elevation.

class kivymd.uix.behaviors.elevation.RectangularElevationBehavior

Bases: kivymd.uix.behaviors.elevation.CommonElevationBehavior

class kivymd.uix.behaviors.elevation.CircularElevationBehavior(**kwargs)

Bases: kivymd.uix.behaviors.elevation.CommonElevationBehavior