Toolbar

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/app-bar-top.png

KivyMD provides the following toolbar positions for use:

Top

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDBoxLayout:
    orientation: "vertical"

    MDToolbar:
        title: "MDToolbar"

    MDLabel:
        text: "Content"
        halign: "center"
'''


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


Test().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-1.png

Add left menu

MDToolbar:
    title: "MDToolbar"
    left_action_items: [["menu", lambda x: app.callback()]]
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-2.png

Note

The callback is optional. left_action_items: [["menu"]] would also work for a button that does nothing.

Add right menu

MDToolbar:
    title: "MDToolbar"
    right_action_items: [["dots-vertical", lambda x: app.callback()]]
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-3.png

Add two item to the right menu

MDToolbar:
    title: "MDToolbar"
    right_action_items: [["dots-vertical", lambda x: app.callback_1()], ["clock", lambda x: app.callback_2()]]
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-4.png

Change toolbar color

MDToolbar:
    title: "MDToolbar"
    md_bg_color: app.theme_cls.accent_color
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-5.png

Change toolbar text color

MDToolbar:
    title: "MDToolbar"
    specific_text_color: app.theme_cls.accent_color
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-6.png

Shadow elevation control

MDToolbar:
    title: "Elevation 10"
    elevation: 10
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-7.png

Bottom

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/app-bar-bottom.png

Usage

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDBoxLayout:

    # Will always be at the bottom of the screen.
    MDBottomAppBar:

        MDToolbar:
            title: "Title"
            icon: "git"
            type: "bottom"
            left_action_items: [["menu", lambda x: x]]
'''


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


Test().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-8.png

Event on floating button

Event on_action_button:

MDBottomAppBar:

    MDToolbar:
        title: "Title"
        icon: "git"
        type: "bottom"
        left_action_items: [["menu", lambda x: x]]
        on_action_button: app.callback(self.icon)

Floating button position

Mode:

  • ’free-end’

  • ’free-center’

  • ’end’

  • ’center’

MDBottomAppBar:

    MDToolbar:
        title: "Title"
        icon: "git"
        type: "bottom"
        left_action_items: [["menu", lambda x: x]]
        mode: "end"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-9.png
MDBottomAppBar:

    MDToolbar:
        title: "Title"
        icon: "git"
        type: "bottom"
        left_action_items: [["menu", lambda x: x]]
        mode: "free-end"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-10.png

Custom color

MDBottomAppBar:
    md_bg_color: 0, 1, 0, 1

    MDToolbar:
        title: "Title"
        icon: "git"
        type: "bottom"
        left_action_items: [["menu", lambda x: x]]
        icon_color: 0, 1, 0, 1
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-11.png

Tooltips

You can add MDTooltips to the Toolbar icons by ading a text string to the toolbar item, as shown below

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.snackbar import Snackbar

KV = '''
MDBoxLayout:
    orientation: "vertical"

    MDToolbar:
        title: "MDToolbar"
        left_action_items: [["menu", "This is the navigation"]]
        right_action_items:
            [["dots-vertical", lambda x: app.callback(x), "this is the More Actions"]]

    MDLabel:
        text: "Content"
        halign: "center"
'''


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

    def callback(self, button):
        Snackbar(text="Hello World").open()

Test().run()

Material design 3 style

from kivy.lang import Builder
from kivy.utils import get_color_from_hex

from kivymd.app import MDApp
from kivymd.uix.toolbar import MDToolbar

KV = '''
MDScreen:

    MDBoxLayout:
        id: box
        orientation: "vertical"
        spacing: "12dp"
        pos_hint: {"top": 1}
        adaptive_height: True
'''


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

    def on_start(self):
        for type_height in ["medium", "large", "small"]:
            self.root.ids.box.add_widget(
                MDToolbar(
                    type_height=type_height,
                    headline_text=f"Headline {type_height.lower()}",
                    md_bg_color=get_color_from_hex("#2d2734"),
                    left_action_items=[["arrow-left", lambda x: x]],
                    right_action_items=[
                        ["attachment", lambda x: x],
                        ["calendar", lambda x: x],
                        ["dots-vertical", lambda x: x],
                    ],
                    title="Title" if type_height == "small" else ""
                )
            )


TestNavigationDrawer().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-m3.png

API - kivymd.uix.toolbar.toolbar

class kivymd.uix.toolbar.toolbar.MDActionTopAppBarButton(**kwargs)

Base class for all round buttons, bringing in the appropriate on-touch behavior

class kivymd.uix.toolbar.toolbar.MDToolbar(**kwargs)
Events

on_action_button

Method for the button used for the MDBottomAppBar class.

left_action_items

The icons on the left of the toolbar. To add one, append a list like the following:

left_action_items: [`'icon_name'`, callback, tooltip text]

where ‘icon_name’ is a string that corresponds to an icon definition, callback is the function called on a touch release event and tooltip text` is the text to be displayed in the tooltip. Both the ``callback and tooltip text are optional but the order must be preserved.

left_action_items is an ListProperty and defaults to [].

right_action_items

The icons on the left of the toolbar. Works the same way as left_action_items.

right_action_items is an ListProperty and defaults to [].

title

Text toolbar.

title is an StringProperty and defaults to ‘’.

headline_text

Headline text toolbar.

New in version 1.0.0.

headline_text is an StringProperty and defaults to ‘’.

headline_text_color

Headline text color.

New in version 1.0.0.

headline_text_color is an ColorProperty and defaults to None.

anchor_title

Position toolbar title. Available options are: ‘left’, ‘center’, ‘right’.

anchor_title is an OptionProperty and defaults to ‘left’.

mode

Floating button position. Only for MDBottomAppBar class. Available options are: ‘free-end’, ‘free-center’, ‘end’, ‘center’.

mode is an OptionProperty and defaults to ‘center’.

round

Rounding the corners at the notch for a button. Only for MDBottomAppBar class.

round is an NumericProperty and defaults to ‘10dp’.

icon

Floating button. Only for MDBottomAppBar class.

icon is an StringProperty and defaults to ‘android’.

icon_color

Color action button. Only for MDBottomAppBar class.

icon_color is an ColorProperty and defaults to [].

type

When using the MDBottomAppBar class, the parameter type must be set to ‘bottom’:

MDBottomAppBar:

    MDToolbar:
        type: "bottom"

Available options are: ‘top’, ‘bottom’.

type is an OptionProperty and defaults to ‘top’.

type_height

Toolbar height type.

New in version 1.0.0.

Available options are: ‘small’, ‘large’, ‘small’.

type_height is an OptionProperty and defaults to ‘small’.

opposite_colors

Changes the color of the label to the color opposite to the main theme.

MDToolbar:
    title: "MDToolbar"
    opposite_colors: True
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-opposite-true.png
MDToolbar:
    title: "MDToolbar"
    opposite_colors: True
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/toolbar-opposite-false.png
md_bg_bottom_color

The background color for the toolbar with the bottom mode.

New in version 1.0.0.

md_bg_bottom_color is an ColorProperty and defaults to None.

set_headline_font_style(self, interval: Union[int, float])
on_type(self, instance_toolbar, type_value: str)
on_type_height(self, instance_toolbar, height_type_value: str)
on_action_button(self, *args)
on_md_bg_color(self, instance_toolbar, color_value: list)
on_left_action_items(self, instance_toolbar, items_value: list)
on_right_action_items(self, instance_toolbar, items_value: list)
on_icon(self, instance_toolbar, icon_name: str)
on_icon_color(self, instance, icon_name: str)
on_md_bg_bottom_color(self, instance_toolbar, color_value: list)
on_anchor_title(self, instance_toolbar, anchor_value: str)
on_mode(self, instance_toolbar, mode_value: str)
set_md_bg_color(self, instance_toolbar, color_value: list)
set_notch(self)
set_shadow(self, *args)
update_bar_height(self, instance_theme_manager, material_style_value: str)
update_floating_radius(self, interval: Union[int, float])
update_anchor_title(self, material_style_value: str)
update_action_bar(self, instance_box_layout, action_bar_items: list)
update_md_bg_color(self, *args)
update_opposite_colors(self, instance_toolbar, opposite_value: bool)
update_action_bar_text_colors(self, *args)
remove_notch(self)
remove_shadow(self)
class kivymd.uix.toolbar.toolbar.MDBottomAppBar(**kwargs)

Float layout class. See module documentation for more information.

md_bg_color

Color toolbar.

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

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)