SliverAppbar

New in version 1.0.0.

MDSliverAppbar is a Material Design widget in KivyMD which gives scrollable or collapsible MDTopAppBar

Note

This widget is a modification of the silverappbar.py module.

Usage

MDScreen:

    MDSliverAppbar:

        MDSliverAppbarHeader:

            # Custom content.
            ...

        # Custom list.
        MDSliverAppbarContent:

Example

from kivy.lang.builder import Builder

from kivymd.app import MDApp
from kivymd.uix.card import MDCard

KV = '''
<CardItem>
    size_hint_y: None
    height: "86dp"
    padding: "4dp"
    radius: 12

    FitImage:
        source: "avatar.jpg"
        radius: root.radius
        size_hint_x: None
        width: root.height

    MDBoxLayout:
        orientation: "vertical"
        adaptive_height: True
        spacing: "6dp"
        padding: "12dp", 0, 0, 0
        pos_hint: {"center_y": .5}

        MDLabel:
            text: "Title text"
            font_style: "H5"
            bold: True
            adaptive_height: True

        MDLabel:
            text: "Subtitle text"
            theme_text_color: "Hint"
            adaptive_height: True


MDScreen:

    MDSliverAppbar:
        background_color: "2d4a50"

        MDSliverAppbarHeader:

            MDRelativeLayout:

                FitImage:
                    source: "bg.jpg"

        MDSliverAppbarContent:
            id: content
            orientation: "vertical"
            padding: "12dp"
            spacing: "12dp"
            adaptive_height: True
'''


class CardItem(MDCard):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.elevation = 1


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

    def on_start(self):
        for x in range(10):
            self.root.ids.content.add_widget(CardItem())


Example().run()

API - kivymd.uix.sliverappbar.sliverappbar

class kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbarContent(**kwargs)

Implements a box for a scrollable list of custom items.

For more information, see in the MDBoxLayout class documentation.

md_bg_color

See background_color.

md_bg_color is an ColorProperty and defaults to [0, 0, 0, 0].

set_bg_color(self, interval: int | float)

class kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbarHeader(*args, **kwargs)

Sliver app bar header class.

For more information, see in the MDBoxLayout class documentation.

class kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbar(*args, **kwargs)

Sliver app bar class.

For more information, see in the MDBoxLayout class documentation.

Events:

on_scroll_content

Called when the list of custom content is being scrolled.

toolbar_cls

Must be an object of the MDTopAppBar class documentation for more information.

By default, MDSliverAppbar widget uses the MDTopAppBar class with no parameters.

from kivy.lang.builder import Builder

from kivymd.uix.card import MDCard
from kivymd.uix.toolbar import MDTopAppBar

KV = '''
#:import SliverToolbar __main__.SliverToolbar


<CardItem>
    size_hint_y: None
    height: "86dp"
    padding: "4dp"
    radius: 12

    FitImage:
        source: "avatar.jpg"
        radius: root.radius
        size_hint_x: None
        width: root.height

    MDBoxLayout:
        orientation: "vertical"
        adaptive_height: True
        spacing: "6dp"
        padding: "12dp", 0, 0, 0
        pos_hint: {"center_y": .5}

        MDLabel:
            text: "Title text"
            font_style: "H5"
            bold: True
            adaptive_height: True

        MDLabel:
            text: "Subtitle text"
            theme_text_color: "Hint"
            adaptive_height: True


MDScreen:

    MDSliverAppbar:
        background_color: "2d4a50"
        toolbar_cls: SliverToolbar()

        MDSliverAppbarHeader:

            MDRelativeLayout:

                FitImage:
                    source: "bg.jpg"

        MDSliverAppbarContent:
            id: content
            orientation: "vertical"
            padding: "12dp"
            spacing: "12dp"
            adaptive_height: True
'''


class CardItem(MDCard):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.elevation = 1


class SliverToolbar(MDTopAppBar):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.shadow_color = (0, 0, 0, 0)
        self.type_height = "medium"
        self.headline_text = "Headline medium"
        self.left_action_items = [["arrow-left", lambda x: x]]
        self.right_action_items = [
            ["attachment", lambda x: x],
            ["calendar", lambda x: x],
            ["dots-vertical", lambda x: x],
        ]


class Example(MDApp):
    def build(self):
        self.theme_cls.material_style = "M3"
        return Builder.load_string(KV)

    def on_start(self):
        for x in range(10):
            self.root.ids.content.add_widget(CardItem())


Example().run()

toolbar_cls is an ObjectProperty and defaults to None.

background_color

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

MDSliverAppbar:
    background_color: "2d4a50"

background_color is an ColorProperty and defaults to None.

max_height

Distance from top of screen to start of custom list content.

MDSliverAppbar:
    max_height: "200dp"

max_height is an NumericProperty and defaults to Window.height / 2.

hide_toolbar

Whether to hide the toolbar when scrolling through a list of custom content.

MDSliverAppbar:
    hide_toolbar: False

hide_toolbar is an BooleanProperty and defaults to True.

radius

Box radius for custom item list.

MDSliverAppbar:
    radius: 20

radius is an VariableListProperty and defaults to [20].

max_opacity

Maximum background transparency value for the MDSliverAppbarHeader class.

MDSliverAppbar:
    max_opacity: .5

max_opacity is an NumericProperty and defaults to 1.

on_scroll_content(self, instance_sliverappbar: object = None, value: float = 1.0, direction: str = 'up')

Called when the list of custom content is being scrolled.

Parameters:

• instance_sliverappbar – MDSliverAppbar

• value – see scroll_y

• direction – scroll direction: ‘up/down’

on_background_color(self, instance_sliver_appbar, color_value: list)

on_toolbar_cls(self, instance_sliver_appbar, instance_toolbar_cls: MDTopAppBar)

Called when a value is set to the toolbar_cls parameter.

on_vbar(self)

get_default_toolbar(self)

Called if no value is passed for the toolbar_cls attribute.

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)