Backdrop

See also

Material Design spec, Backdrop

Skeleton layout for using MDBackdrop:

Usage

<Root>

    MDBackdrop:

        MDBackdropBackLayer:

            ContentForBackdropBackLayer:

        MDBackdropFrontLayer:

             ContentForBackdropFrontLayer:

Example

Declarative KV stylesDeclarative python styles

from kivy.lang import Builder

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

# Your layouts.
Builder.load_string(
    '''
#:import os os
#: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: os.path.join(images_path, "logo", "kivymd-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 Example(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "Orange"
        return ExampleBackdrop()


Example().run()

Note

See full example

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 in (r, g, b, a) or string format.

back_layer_color is an ColorProperty and defaults to None.

front_layer_color

Background color of front layer in (r, g, b, a) or string format.

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.