How to Create banner in kivymd-Python?

In KivyMD-Python, a banner is a graphical element that displays a short message or notification to the user. It can be used to inform the user about the status of the application, such as the successful completion of a task or an error that occurred.

Banners can be customized in colour, text, and position on the screen. They are particularly useful for mobile applications where space is limited and quick feedback to the user is important. Banners can improve the overall user experience by providing timely and relevant information.

Types of Banners

In KivyMD-Python, there are two main types of bannerlike components available

• Snackbar Banner Snackbar is a brief message that appears at the bottom of the screen and disappears shortly. It is commonly used to display notifications or alerts.

• BottomAppBar Banner BottomAppBar is a persistent banner that appears at the bottom of the screen and can contain navigation options or action buttons. It is typically used in mobile applications to replace the traditional toolbar.

Both types of banners can be customized with different colours, icons, and text.

Creating a Snackbar Banner

Syntax

The syntax for creating a Snackbar banner in KivyMD-Python is as follows

Snackbar(text="Your message here").open()

In this syntax, we create a new instance of the Snackbar class with the desired message as the 'text' parameter, then call the 'open()' method to display the banner. You can customize the Snackbar banner further by using other properties such as 'duration' to set the display time.

Example

Here's how to create a simple Snackbar banner

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

KV = '''
#:import Snackbar kivymd.uix.snackbar.Snackbar

MDScreen:
    MDRaisedButton:
        text: "Create Simple Snackbar"
        on_release: Snackbar(text="This is a snackbar!").open()
        pos_hint: {"center_x": .5, "center_y": .5}
'''

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

SnackbarApp().run()

The output shows a button that, when clicked, displays a snackbar at the bottom of the screen with the message "This is a snackbar!".

Creating a BottomAppBar Banner

Syntax

The syntax for creating a BottomAppBar banner in KivyMD-Python is as follows

MDBottomNavigation:
    MDBottomNavigationItem:
        name: 'screen_name'
        text: 'Tab Text'
        icon: 'icon_name'

In this syntax, we create a new instance of the 'MDBottomNavigation' class with multiple 'MDBottomNavigationItem' instances as navigation tabs. Each tab can contain different content and icons.

Example

Here's how to create a BottomAppBar with multiple navigation tabs

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

KV = '''
MDScreen:
    MDBottomNavigation:
        MDBottomNavigationItem:
            name: 'screen1'
            text: 'Python'
            icon: 'language-python'
            
            MDLabel:
                text: 'Python Programming'
                halign: 'center'
                
        MDBottomNavigationItem:
            name: 'screen2'
            text: 'Java'
            icon: 'language-java'
            
            MDLabel:
                text: 'Java Programming'
                halign: 'center'
                
        MDBottomNavigationItem:
            name: 'screen3'
            text: 'CPP'
            icon: 'language-cpp'
            
            MDLabel:
                text: 'C++ Programming'
                halign: 'center'
'''

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

BottomNavApp().run()

The output displays a bottom navigation bar with three tabs: Python, Java, and CPP. Each tab shows different content when selected.

Customizing Banners

You can customize banners by adding properties like duration, background color, and button callbacks. For Snackbar, use properties like 'duration' to control how long it stays visible. For BottomNavigation, use 'md_bg_color' to change the background color.

Conclusion

KivyMD provides two main bannerlike components: Snackbar for temporary notifications and BottomNavigation for persistent navigation. Both can be easily customized to match your application's design and provide better user experience.