Backdrop

See also

Material Design spec, Backdrop

Skeleton layout for using MDBackdrop:

Usage

<Root>:

    MDBackdrop:

        MDBackdropBackLayer:

            ContentForBackdropBackLayer:

        MDBackdropFrontLayer:

             ContentForBackdropFrontLayer:

Example

from kivy.lang import Builder
from kivy.uix.screenmanager import Screen

from kivymd.app import MDApp

# Your layouts.
Builder.load_string(
    '''
#:import Window kivy.core.window.Window
#:import IconLeftWidget kivymd.uix.list.IconLeftWidget
#:import images_path kivymd.images_path


<ItemBackdropFrontLayer@TwoLineAvatarListItem>
    icon: "android"

    IconLeftWidget:
        icon: root.icon


<MyBackdropFrontLayer@ItemBackdropFrontLayer>
    backdrop: None
    text: "Lower the front layer"
    secondary_text: " by 50 %"
    icon: "transfer-down"
    on_press: root.backdrop.open(-Window.height / 2)
    pos_hint: {"top": 1}
    _no_ripple_effect: True


<MyBackdropBackLayer@Image>
    size_hint: .8, .8
    source: f"{images_path}/kivymd_logo.png"
    pos_hint: {"center_x": .5, "center_y": .6}
'''
)

# Usage example of MDBackdrop.
Builder.load_string(
    '''
<ExampleBackdrop>

    MDBackdrop:
        id: backdrop
        left_action_items: [['menu', lambda x: self.open()]]
        title: "Example Backdrop"
        header_text: "Menu:"

        MDBackdropBackLayer:
            MyBackdropBackLayer:
                id: backlayer

        MDBackdropFrontLayer:
            MyBackdropFrontLayer:
                backdrop: backdrop
'''
)


class ExampleBackdrop(Screen):
    pass


class TestBackdrop(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

    def build(self):
        return ExampleBackdrop()


TestBackdrop().run()

Note

See full example

API - kivymd.uix.backdrop

class kivymd.uix.backdrop.MDBackdrop(**kwargs)

Bases: kivymd.theming.ThemableBehavior, kivy.uix.floatlayout.FloatLayout

Events

on_open

When the front layer drops.

on_close

When the front layer rises.

padding

Padding for contents of the front layer.

padding is an ListProperty and defaults to [0, 0, 0, 0].

left_action_items

The icons and methods left of the kivymd.uix.toolbar.MDToolbar in back layer. For more information, see the kivymd.uix.toolbar.MDToolbar module and left_action_items parameter.

left_action_items is an ListProperty and defaults to [].

right_action_items

Works the same way as left_action_items.

right_action_items is an ListProperty and defaults to [].

title

See the kivymd.uix.toolbar.MDToolbar.title parameter.

title is an StringProperty and defaults to ‘’.

background_color

Background color of back layer.

background_color is an ListProperty and defaults to [].

radius

The value of the rounding radius of the upper left corner of the front layer.

radius is an NumericProperty and defaults to 25.

header

Whether to use a header above the contents of the front layer.

header is an BooleanProperty and defaults to True.

header_text

Text of header.

header_text is an StringProperty and defaults to ‘Header’.

close_icon

The name of the icon that will be installed on the toolbar on the left when opening the front layer.

close_icon is an StringProperty and defaults to ‘close’.

on_open(self)

When the front layer drops.

on_close(self)

When the front layer rises.

on_left_action_items(self, instance, value)

on_header(self, instance, value)

open(self, open_up_to=0)

Opens the front layer.

Open_up_to

the height to which the front screen will be lowered; if equal to zero - falls to the bottom of the screen;

close(self)

Opens the front layer.

animtion_icon_menu(self)

animtion_icon_close(self, instance_animation, instance_icon_menu)

add_widget(self, widget, index=0, canvas=None)

class kivymd.uix.backdrop.MDBackdropToolbar

Bases: kivymd.uix.toolbar.MDToolbar

class kivymd.uix.backdrop.MDBackdropFrontLayer

Bases: kivy.uix.boxlayout.BoxLayout

class kivymd.uix.backdrop.MDBackdropBackLayer

Bases: kivy.uix.boxlayout.BoxLayout