Create A Bottom Bar Button with KivyMD – Python Kivy GUI Tutorial #45

In this video we’ll learn how to create a bottom bar button with KivyMD.

Many modern mobile apps have a round button at the bottom of the screen, either on the bottom right corner or centered at the bottom of the screen.

In this video we’ll look at creating those buttons using MDBottomAppBar and MDToolbar.

We’ll look at positioning them using free-end, end, free-center, and center modes.

#kivy #codemy

Python Code: bbutton.py
GitHub Code: bbutton.py

from kivy.lang import Builder
from kivymd.app import MDApp


class MainApp(MDApp):
	def build(self):
		self.theme_cls.theme_style = "Dark"
		self.theme_cls.primary_palette = "BlueGray"
		return Builder.load_file('bbutton.kv')
	
	def presser(self):
		self.root.ids.my_label.text = "You Pressed It!!!"
	
MainApp().run()

Kivy Design Code: bbutton.kv
GitHub Code: bbutton.kv

MDBoxLayout:
    orientation: 'vertical'

    MDToolbar:
        title: "Our Top Toolbar"
        left_action_items: [["menu"]]
        right_action_items: [["dots-vertical"]]

    MDLabel:
        id: my_label
        text: "Some Stuff"
        halign: "center"

    MDBottomAppBar:
        MDToolbar:
            icon: 'git'
            left_action_items: [["menu", lambda x: app.presser()]]
            title: "Bottom Menu"
            type: 'bottom'
            #mode: "free-end"
            mode: 'end'
            #mode: 'center'
            #mode: 'free-center'
            # Click The Button
            on_action_button: app.presser()