Backdrop#

Skeleton layout for using MDBackdrop:

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/backdrop.png

Usage#

<Root>

    MDBackdrop:

        MDBackdropBackLayer:

            ContentForBackdropBackLayer:

        MDBackdropFrontLayer:

             ContentForBackdropFrontLayer:

Example#

from kivy.lang import Builder

from kivymd.uix.screen import MDScreen
from kivymd.app import MDApp

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


<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: "data/logo/kivy-icon-512.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"
        radius_left: "25dp"
        radius_right: "0dp"
        header_text: "Menu:"

        MDBackdropBackLayer:
            MyBackdropBackLayer:
                id: backlayer

        MDBackdropFrontLayer:
            MyBackdropFrontLayer:
                backdrop: backdrop
'''
)


class ExampleBackdrop(MDScreen):
    pass


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

    def build(self):
        return ExampleBackdrop()


TestBackdrop().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/backdrop.gif

API - kivymd.uix.backdrop.backdrop#

class kivymd.uix.backdrop.backdrop.MDBackdrop(*args, **kwargs)#
Events:

on_open

When the front layer drops.

on_close

When the front layer rises.

anchor_title#

Position toolbar title. Only used with material_style = ‘M3’ Available options are: ‘left’, ‘center’, ‘right’.

New in version 1.0.0.

anchor_title is an OptionProperty and defaults to ‘left’.

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.MDTopAppBar in back layer. For more information, see the kivymd.uix.toolbar.MDTopAppBar 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.MDTopAppBar.title parameter.

title is an StringProperty and defaults to ‘’.

back_layer_color#

Background color of back layer.

back_layer_color is an ColorProperty and defaults to None.

front_layer_color#

Background color of front layer.

front_layer_color is an ColorProperty and defaults to None.

radius_left#

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

radius_left is an NumericProperty and defaults to 16dp.

radius_right#

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

radius_right is an NumericProperty and defaults to 16dp.

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

opening_time#

The time taken for the panel to slide to the state ‘open’.

New in version 1.0.0.

opening_time is a NumericProperty and defaults to 0.2.

opening_transition#

The name of the animation transition type to use when animating to the state ‘open’.

New in version 1.0.0.

opening_transition is a StringProperty and defaults to ‘out_quad’.

closing_time#

The time taken for the panel to slide to the state ‘close’.

New in version 1.0.0.

closing_time is a NumericProperty and defaults to 0.2.

closing_transition#

The name of the animation transition type to use when animating to the state ‘close’.

New in version 1.0.0.

closing_transition is a StringProperty and defaults to ‘out_quad’.

on_open(self)#

When the front layer drops.

on_close(self)#

When the front layer rises.

on_left_action_items(self, instance_backdrop, menu: list)#
on_header(self, instance_backdrop, value: bool)#
open(self, open_up_to: int = 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.

animate_opacity_icon(self, instance_icon_menu: Union[ActionTopAppBarButton, None] = None, opacity_value: int = 0, call_set_new_icon: bool = True)#

Starts the opacity animation of the icon.

set_new_icon(self, instance_animation: Animation, instance_icon_menu: ActionTopAppBarButton)#

Sets the icon of the button depending on the state of the backdrop.

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

Add a new widget as a child of this widget.

Parameters:
widget: Widget

Widget to add to our list of children.

index: int, defaults to 0

Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.

New in version 1.0.5.

canvas: str, defaults to None

Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.

New in version 1.9.0.

>>> from kivy.uix.button import Button
>>> from kivy.uix.slider import Slider
>>> root = Widget()
>>> root.add_widget(Button())
>>> slider = Slider()
>>> root.add_widget(slider)
class kivymd.uix.backdrop.backdrop.MDBackdropToolbar(**kwargs)#

Implements a toolbar for back content.

class kivymd.uix.backdrop.backdrop.MDBackdropFrontLayer(*args, **kwargs)#

Container for front content.

class kivymd.uix.backdrop.backdrop.MDBackdropBackLayer(*args, **kwargs)#

Container for back content.