Bottom Sheet

See also

Material Design spec, Sheets: bottom

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.

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

Two classes are available to you MDListBottomSheet and MDGridBottomSheet for standard bottom sheets dialogs:

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/grid-list-bottomsheets.png

Usage MDListBottomSheet

from kivy.lang import Builder

from kivymd.toast import toast
from kivymd.uix.bottomsheet import MDListBottomSheet
from kivymd.app import MDApp

KV = '''
Screen:

    MDToolbar:
        title: "Example BottomSheet"
        pos_hint: {"top": 1}
        elevation: 10

    MDRaisedButton:
        text: "Open list bottom sheet"
        on_release: app.show_example_list_bottom_sheet()
        pos_hint: {"center_x": .5, "center_y": .5}
'''


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

    def callback_for_menu_items(self, *args):
        toast(args[0])

    def show_example_list_bottom_sheet(self):
        bottom_sheet_menu = MDListBottomSheet()
        for i in range(1, 11):
            bottom_sheet_menu.add_item(
                f"Standart Item {i}",
                lambda x, y=i: self.callback_for_menu_items(
                    f"Standart Item {y}"
                ),
            )
        bottom_sheet_menu.open()


Example().run()

The add_item method of the MDListBottomSheet class takes the following arguments:

text - element text;

callback - function that will be called when clicking on an item;

There is also an optional argument icon, which will be used as an icon to the left of the item:

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/icon-list-bottomsheets.png

Using the MDGridBottomSheet class is similar to using the MDListBottomSheet class:

from kivy.lang import Builder

from kivymd.toast import toast
from kivymd.uix.bottomsheet import MDGridBottomSheet
from kivymd.app import MDApp

KV = '''
Screen:

    MDToolbar:
        title: 'Example BottomSheet'
        pos_hint: {"top": 1}
        elevation: 10

    MDRaisedButton:
        text: "Open grid bottom sheet"
        on_release: app.show_example_grid_bottom_sheet()
        pos_hint: {"center_x": .5, "center_y": .5}
'''


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

    def callback_for_menu_items(self, *args):
        toast(args[0])

    def show_example_grid_bottom_sheet(self):
        bottom_sheet_menu = MDGridBottomSheet()
        data = {
            "Facebook": "facebook-box",
            "YouTube": "youtube",
            "Twitter": "twitter-box",
            "Da Cloud": "cloud-upload",
            "Camera": "camera",
        }
        for item in data.items():
            bottom_sheet_menu.add_item(
                item[0],
                lambda x, y=item[0]: self.callback_for_menu_items(y),
                icon_src=item[1],
            )
        bottom_sheet_menu.open()


Example().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/grid-bottomsheet.png

You can use custom content for bottom sheet dialogs:

from kivy.lang import Builder

from kivymd.uix.bottomsheet import MDCustomBottomSheet
from kivymd.app import MDApp

KV = '''
<ItemForCustomBottomSheet@OneLineIconListItem>
    on_press: app.custom_sheet.dismiss()
    icon: ""

    IconLeftWidget:
        icon: root.icon


<ContentCustomSheet@BoxLayout>:
    orientation: "vertical"
    size_hint_y: None
    height: "400dp"

    MDToolbar:
        title: 'Custom bottom sheet:'

    ScrollView:

        GridLayout:
            cols: 1
            size_hint_y: None
            height: self.minimum_height

            ItemForCustomBottomSheet:
                icon: "page-previous"
                text: "Preview"

            ItemForCustomBottomSheet:
                icon: "exit-to-app"
                text: "Exit"


Screen:

    MDToolbar:
        title: 'Example BottomSheet'
        pos_hint: {"top": 1}
        elevation: 10

    MDRaisedButton:
        text: "Open custom bottom sheet"
        on_release: app.show_example_custom_bottom_sheet()
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class Example(MDApp):
    custom_sheet = None

    def build(self):
        return Builder.load_string(KV)

    def show_example_custom_bottom_sheet(self):
        self.custom_sheet = MDCustomBottomSheet(screen=Factory.ContentCustomSheet())
        self.custom_sheet.open()


Example().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/custom-bottomsheet.png

Note

When you use the MDCustomBottomSheet class, you must specify the height of the user-defined content exactly, otherwise dp(100) heights will be used for your ContentCustomSheet class:

<ContentCustomSheet@BoxLayout>:
    orientation: "vertical"
    size_hint_y: None
    height: "400dp"

Note

The height of the bottom sheet dialog will never exceed half the height of the screen!

API - kivymd.uix.bottomsheet

class kivymd.uix.bottomsheet.MDBottomSheet

Bases: kivymd.theming.ThemableBehavior, kivy.uix.modalview.ModalView

background

Private attribute.

duration_opening

The duration of the bottom sheet dialog opening animation.

duration_opening is an NumericProperty and defaults to 0.15.

radius

The value of the rounding of the corners of the dialog.

radius is an NumericProperty and defaults to 25.

radius_from

Sets which corners to cut from the dialog. Available options are: (“top_left”, “top_right”, “top”, “bottom_right”, “bottom_left”, “bottom”).

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/bottomsheet-radius-from.png

radius_from is an OptionProperty and defaults to None.

animation

To use animation of opening of dialogue of the bottom sheet or not.

animation is an BooleanProperty and defaults to False.

bg_color

Dialog background color in rgba format.

bg_color is an ListProperty and defaults to [].

value_transparent

Background transparency value when opening a dialog.

value_transparent is an ListProperty and defaults to [0, 0, 0, 0.8].

open(self, *largs)
add_widget(self, widget, index=0, canvas=None)
on_dismiss(self)
resize_content_layout(self, content, layout, interval=0)
class kivymd.uix.bottomsheet.MDCustomBottomSheet(**kwargs)

Bases: kivymd.uix.bottomsheet.MDBottomSheet

screen

Custom content.

screen is an ObjectProperty and defaults to None.

class kivymd.uix.bottomsheet.MDListBottomSheet(**kwargs)

Bases: kivymd.uix.bottomsheet.MDBottomSheet

sheet_list

sheet_list is an ObjectProperty and defaults to None.

add_item(self, text, callback, icon=None)
Parameters

  • text – element text;

  • callback – function that will be called when clicking on an item;

  • icon_src – which will be used as an icon to the left of the item;

class kivymd.uix.bottomsheet.GridBottomSheetItem

Bases: kivy.uix.behaviors.ButtonBehavior, kivy.uix.boxlayout.BoxLayout

source

Icon path if you use a local image or icon name if you use icon names from a file kivymd/icon_definitions.py.

source is an StringProperty and defaults to ‘’.

caption

Item text.

caption is an StringProperty and defaults to ‘’.

icon_size

Icon size.

caption is an StringProperty and defaults to ’32sp’.

class kivymd.uix.bottomsheet.MDGridBottomSheet(**kwargs)

Bases: kivymd.uix.bottomsheet.MDBottomSheet

add_item(self, text, callback, icon_src)
Parameters

  • text – element text;

  • callback – function that will be called when clicking on an item;

  • icon_src – icon item;