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

John Elder

John is the CEO of Codemy.com where he teaches over 100,000 students how to code! He founded one of the Internet's earliest advertising networks and sold it to a publicly company at the height of the first dot com boom. After that he developed the award-winning Submission-Spider search engine submission software that's been used by over 3 million individuals, businesses, and governments in over 42 countries. He's written several Amazon #1 best selling books on coding, and runs a popular Youtube coding channel.

View all posts

Add comment

Your email address will not be published. Required fields are marked *

John Elder