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 = '''
BoxLayout:
    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()]]

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 = '''
BoxLayout:

    # 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"

See also

Components-Bottom-App-Bar

API - kivymd.uix.toolbar

class kivymd.uix.toolbar.MDActionBottomAppBarButton

Bases: kivymd.uix.button.MDFloatingActionButton

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

Bases: kivymd.theming.ThemableBehavior, kivymd.uix.behaviors.RectangularElevationBehavior, kivymd.uix.behaviors.SpecificBackgroundColorBehavior, kivy.uix.boxlayout.BoxLayout

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]

where ‘icon_name’ is a string that corresponds to an icon definition and callback is the function called on a touch release event.

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 ‘’.

md_bg_color

Color toolbar.

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

anchor_title

mode

Floating button position. Onle 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 ListProperty 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’.

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)

update_action_bar(self, action_bar, action_bar_items)

update_action_bar_text_colors(self, instance, value)

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)

Bases: kivy.uix.floatlayout.FloatLayout

add_widget(self, widget, index=0, canvas=None)