Toolbar

See also

Material Design spec, App bars: top

Material Design spec, App bars: bottom

KivyMD provides the following toolbar positions for use:

• Top

• Bottom

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()

Add left menu

MDToolbar:
    title: "MDToolbar"
    left_action_items: [["menu", lambda x: app.callback()]]

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()]]

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()]]

Change toolbar color

MDToolbar:
    title: "MDToolbar"
    md_bg_color: app.theme_cls.accent_color

Change toolbar text color

MDToolbar:
    title: "MDToolbar"
    specific_text_color: app.theme_cls.accent_color

Shadow elevation control

MDToolbar:
    title: "Elevation 10"
    elevation: 10

Bottom

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()

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"

MDBottomAppBar:

    MDToolbar:
        title: "Title"
        icon: "git"
        type: "bottom"
        left_action_items: [["menu", lambda x: x]]
        mode: "free-end"

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

MDToolbar with Menus

A Toolbar without Menus is not particularly useful. However, the MDDropdownMenu works well with the standard MDToolbar to provide this functionality, as shown in the image below.

See also

See the MDDropdownMenu documentation for details of how to implement this.

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()

See also

Components-Bottom-App-Bar

API - kivymd.uix.toolbar

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

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

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

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

class kivymd.uix.toolbar.NotchedBox(**kw)

FakeRectangularElevationBehavio`r is a shadow mockup for widgets. Improves performance using cached images inside `kivymd.images dir

This class cast a fake Rectangular shadow behaind the widget.

You can either use this behavior to overwrite the elevation of a prefab widget, or use it directly inside a new widget class definition.

Use this class as follows for new widgets:

class NewWidget(
    ThemableBehavior,
    FakeCircularElevationBehavior,
    SpecificBackgroundColorBehavior,
    # here you add the other front end classes for the widget front_end,
):
    [...]

With this method each class can draw it’s content in the canvas in the correct order, avoiding some visual errors.

FakeCircularElevationBehavior will load prefabricated textures to optimize loading times.

Also, this class allows you to overwrite real time shadows, in the sence that if you are using a standard widget, like a button, MDCard or Toolbar, you can include this class after the base class to optimize the loading times.

As an example of this flexibility:

class Custom_rectangular_Card(
    MDCard,
    FakeRectangularElevationBehavior
):
    [...]

Note

About rounded corners: be careful, since this behavior is a mockup and will not draw any rounded corners.

elevation

Elevation value.

elevation is an NumericProperty and defaults to 6.

notch_radius

notch_center_x

class kivymd.uix.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 ‘’.

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. Onle for MDBottomAppBar class.

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

icon

Floating button. Onle for MDBottomAppBar class.

icon is an StringProperty and defaults to ‘android’.

icon_color

Color action button. Onle 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’.

opposite_colors

on_type(self, instance, value)

on_action_button(self, *args)

on_md_bg_color(self, instance, value)

on_left_action_items(self, instance, value)

on_right_action_items(self, instance, value)

set_md_bg_color(self, instance, value)

update_action_bar(self, action_bar, action_bar_items)

update_md_bg_color(self, *args)

update_opposite_colors(self, instance, value)

update_action_bar_text_colors(self, *args)

on_icon(self, instance, value)

on_icon_color(self, instance, value)

on_mode(self, instance, value)

remove_notch(self)

set_notch(self)

remove_shadow(self)

set_shadow(self, *args)

class kivymd.uix.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)