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 types of banners 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.

The Syntax for Creating a Snackbar Banner

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

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

In this syntax, we create a new instance of the Snackbar class with the desired message as the ‘text’ parameter, then call the ‘show()’ method to display the banner. You can customize the Snackbar banner further by using other properties and methods of the Snackbar class, such as ‘duration’ to set the display time or ‘button_text’ and ‘button_callback’ to add a button with a callback function.

Steps for Creating a Snackbar Banner

Here's an algorithm for creating a Snackbar banner in KivyMD-Python −

• Step 1 − Import the Snackbar class from the KivyMD library.

• Step 2 − Create a new instance of the ‘Snackbar’ class with the desired message as the ‘text’ parameter.

• Step 3 − Optionally customizes the Snackbar banner by setting other properties such as ‘duration’, ‘button_text’, or ‘button_callback’.

• Step 4 − Call the ‘show()’ method of the Snackbar instance to display the banner.

• Step 5 − The Snackbar banner will be displayed temporarily at the bottom of the screen, with the specified message and any other customizations.

Example 1

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 Test(MDApp):
   def build(self):
      return Builder.load_string(KV)
Test().run()

Output

Syntax for Creating a BottomAppBar Banner

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

MDBottomAppBar(
   MDToolbar(title="Your title here"),
   ... # Other parameters and widgets here
)

In this syntax, we create a new instance of the ‘MDBottomAppBar’ class with an MDToolbar instance as the first parameter, which sets the banner's title. Other parameters and widgets can be added to customize the appearance and functionality of the BottomAppBar banner.

For example, you can set the ‘icon’ parameter to add a menu icon to the banner and the ‘on_icon_press’ parameter to specify a callback function when the icon is pressed. You can also add other widgets, such as buttons or labels, to the BottomAppBar banner by passing them as additional parameters to the constructor.

Steps for Creating a BottomAppBar Banner

Here's an algorithm for creating a BottomAppBar banner in KivyMD-Python −

• Step 1 − Import the MDBottomAppBar and MDToolbar classes from the KivyMD library.

• Step 2 − Create a new instance of the MDToolbar class with the desired title.

• Step 3 − Create a new instance of the MDBottomAppBar class with the MDToolbar instance as the first parameter.

• Step 4 − Optionally customizes the BottomAppBar banner by setting other properties such as icon, on_icon_press, or md_bg_color.

• Step 5 − Add any other widgets, such as buttons or labels, to the BottomAppBar banner by passing them as additional parameters to the MDBottomAppBar constructor.

• Step 6 − Return the MDBottomAppBar instance from the build() method of your KivyMD application.

• Step 7 − The BottomAppBar banner will be displayed at the bottom of the screen.

Example 2

To create a banner in KivyMD-Python, you can use the ‘MDBanner’ widget. Here is a basic example of how to create a banner −

# import packages 
from kivy.lang import Builder 
from kivymd.app import MDApp   
# writing kv lang 
KV = ''' 
# declaring layout/screen 
MDScreen: 
   # this will create a space navigation bottom 
   MDBottomNavigation: 
      # this will create a navigation button on the bottom of screen 
      MDBottomNavigationItem: 
         name: 'screen 1' 
         text: 'Python' 
         icon: 'language-python' 
         # this will be triggered when screen 1 is selected 
         # creates a label 
         MDLabel: 
            text: 'Python' 
            halign: 'center' 
      # this will create a navigation button on the bottom of screen 
      MDBottomNavigationItem: 
         name: 'screen 2' 
         text: 'Java'
         icon: 'language-java' 
         # this will be triggered when screen 2 is selected 
         # creates a label 
         MDLabel: 
            text: 'Java' 
            halign: 'center' 
      # this will create a navigation button on the bottom of the screen 
      MDBottomNavigationItem: 
         name: 'screen 3' 
         text: 'CPP' 
         icon: 'language-cpp' 
         # this will be triggered when screen 3 is selected 
         # creates a label 
         MDLabel: 
            text: 'CPP' 
            halign: 'center' 
'''  
# App class 
class Test(MDApp):
   def build(self):
      # this will load kv lang
      screen = Builder.load_string(KV) 
      # returning screen 
      return screen 
# running app 
Test().run()

Output

Conclusion

Creating banners in KivyMD using Python is a simple and efficient process. Following the steps outlined in this article, anyone can easily design and implement visually appealing banners for their application.

With KivyMD's user-friendly interface and extensive library of design elements, developers can create high-quality, functional, and aesthetically pleasing banners. By incorporating these banners into their applications, developers can enhance the user experience and create a more engaging and immersive environment.