Subscribe Us

KivyMD Button Component and following Button Classes

KivyMD offers a variety of button components to create interactive elements in your user interface. These buttons provide a consistent look and feel that adheres to Material Design guidelines. Here's a breakdown of the key aspects:


KivyMD Button Component and following Button Classes

Customization:


KivyMD buttons offer customization options to match your app's design:

  • Text: Set the button text using the text property.
  • Icon: Include an icon using the icon property. KivyMD uses its own icon library.
  • Colors: Change the button's background and text color using properties like theme_text_color and background_color.


Additional Features:

  • Buttons support disabling interaction with the disabled property.
  • You can control the button's size with properties like size_hint.

KivyMD Button Component provides the following button classes


  1. MDIconButton

  2. MDFloatingActionButton

  3. MDFlatButton

  4. MDRaisedButton

  5. MDRectangleFlatButton

  6. MDRectangleFlatIconButton

  7. MDRoundFlatButton

  8. MDRoundFlatIconButton

  9. MDFillRoundFlatButton

  10. MDFillRoundFlatIconButton

  11. MDTextButton

  12. MDFloatingActionButtonSpeedDial


MDIconButton


MDIconButton is a specific type of button offered by the KivyMD library for building user interfaces. It allows you to create a button that consists solely of an icon, without any text. This makes them ideal for:

  • Compact UIs: MDIconButtons are small and efficient in terms of screen space, making them suitable for mobile apps or situations where you want to minimize clutter.
  • Quick Actions: Since they rely solely on icons, users can instantly understand the action they represent without needing to read text.
  • Consistent Design: By using icons that follow Material Design guidelines, MDIconButtons contribute to a uniform and visually appealing interface.


Example:-

from kivy.lang import Builder

        from kivymd.app import MDApp
        
        rahul = '''
        MDScreen:
        
            MDIconButton:
                icon: "account"
                pos_hint: {"center_x": 0.5, "center_y": 0.5}
        '''
        
        
        class rahultechweb(MDApp):
            def build(self):
                self.theme_cls.theme_style = "Light"
                self.theme_cls.primary_palette = "Red"
                return Builder.load_string(rahul)
        
        
        rahultechweb().run()





Output:-


KivyMD Button Component and following Button classes




MDRectangleFlatIconButton is a widget from the KivyMD library used to create flat rectangular buttons with optional icons in your Kivy application.

Here's a breakdown of MDRectangleFlatIconButton:-


features:

  • Rectangular shape: Maintains a flat rectangular design.
  • Text and icon: Can display text alongside an optional icon.
  • Flat design: Lacks an elevated background, giving it a subtle appearance.
  • Customization: Offers various properties to customize its look and feel.

Comparison with other KivyMD buttons:

  • MDRectangleFlatButton: Similar button without the icon functionality.
  • MDIconButton: Focuses solely on displaying icons for quick actions.
  • MDFloatingActionButton: Creates circular floating buttons for primary actions.

Use cases:

  • Regular buttons within an app screen.
  • Options or settings menus.
  • Lists with actionable items.

Example:-

from kivymd.app import MDApp
        from kivy.lang.builder import Builder
        
        rahul ="""
        
        MDRectangleFlatIconButton:
            text: "RAHULTECHWEB.COM"
            icon: "language-python"
            line_color: 1, 0, 0, 0
            pos_hint: {"center_x": .5, "center_y": .5}
        
        """
        class MDRectangleFlatIconButton(MDApp):
            def build(self):
                self.theme_cls.theme_style = "Dark"
                self.theme_cls.primary_palette = "Orange"
                blr= Builder.load_string(rahul)
                return blr
        
        MDRectangleFlatIconButton().run()


Output:-


KivyMD Button Component and following Button classes




MDRoundFlatButton



MDRoundFlatButton is a widget from the KivyMD library used to create flat buttons with rounded corners in your Kivy application. It provides a modern and visually appealing way to represent clickable elements within your app's user interface.

Here's a closer look at MDRoundFlatButton:


characteristics:

  • Rounded corners: As the name suggests, it has a rectangular shape with rounded corners, offering a softer look compared to standard rectangular buttons.
  • Flat design: It maintains a flat appearance without an elevated background, adhering to the Material Design principles.
  • Text label: Primarily functions for displaying text on the button's surface.
  • Customization: Provides various properties to control the button's appearance, such as text color, background color, and corner radius.


Example:-

from kivymd.app import MDApp
        from kivy.lang.builder import Builder
        
        rahul ="""
        
        MDRoundFlatButton:
            text: "RAHULWEBTECH.COM"
            text_color: "white"
            pos_hint: {"center_x": .5, "center_y": .5}
        
        """
        class MMDRoundFlatButton(MDApp):
            def build(self):
                self.theme_cls.theme_style = "Dark"
                self.theme_cls.primary_palette = "Orange"
                blr= Builder.load_string(rahul)
                return blr
        
        MMDRoundFlatButton().run()



Output:-


KivyMD Button Component and following Button classes




MDRoundFlatIconButton


MDRoundFlatIconButton is a widget from the KivyMD library designed to create flat buttons with rounded corners that also include an icon for visual representation in your Kivy application. It combines the functionality of MDRoundFlatButton (rounded corners) with MDIconButton (icon capability).

Here's a breakdown of MDRoundFlatIconButton:


Features:

  • Rounded rectangle shape: Like MDRoundFlatButton, it has a flat rectangular base with rounded corners for a modern aesthetic.
  • Icon and text: It incorporates an icon alongside an optional text label, providing both visual representation and textual description of the button's action.
  • Flat design: Maintains a subtle appearance by adhering to Material Design principles with a flat background.
  • Customization: Offers various properties to customize its look and feel, including icon selection, text content, button colors, and corner radius.


Example:-

from kivymd.app import MDApp
        from kivy.lang.builder import Builder
        
        rahul ="""
        
        MDRoundFlatIconButton:
            text: "RAHULTECHWEB.COM"
            icon: "git"
            text_color: "white"
            pos_hint: {"center_x": .5, "center_y": .5}
        
        """
        class MDRoundFlatIconButton(MDApp):
            def build(self):
                self.theme_cls.theme_style = "Dark"
                self.theme_cls.primary_palette = "Red"
                blr= Builder.load_string(rahul)
                return blr
        
        MDRoundFlatIconButton().run()



Output:-


KivyMD Button Component and following Button classes




MDFillRoundFlatButton



MDFillRoundFlatButton is a widget from the KivyMD library used to create buttons with a filled background and rounded corners in your Kivy application. It provides a visually prominent and actionable element within your app's user interface.

Here's a breakdown of MDFillRoundFlatButton:

Key characteristics:

  • Rounded rectangle shape: Similar to MDRoundFlatButton, it has a rectangular base with rounded corners for a modern aesthetic.
  • Filled background: Unlike flat buttons, MDFillRoundFlatButton has a solid background color, making it stand out more on the screen. This filled background makes it a suitable choice for primary actions within your app.
  • Text label: Primarily functions for displaying text on the button's surface.
  • Customization: Offers various properties to control the button's appearance, such as text color, background color, corner radius, and even the background color's pressed state for user interaction feedback.


Example:-

from kivymd.app import MDApp
        from kivy.lang.builder import Builder
        
        rahul ="""
        
        MDFillRoundFlatButton:
            text: "RAHULTECHWEB.COM"
            text_color: "white"
            pos_hint: {"center_x": .5, "center_y": .5}
        
        """
        class MDFillRoundFlatButton(MDApp):
            def build(self):
                self.theme_cls.theme_style = "Dark"
                self.theme_cls.primary_palette = "Red"
                blr= Builder.load_string(rahul)
                return blr
        
        MDFillRoundFlatButton().run()



Output:-


KivyMD Button Component and following Button classes




MDFillRoundFlatIconButton



MDFillRoundFlatIconButton, while not explicitly documented in the latest KivyMD versions, appears to be a combination of two existing widgets:

  • MDFillRoundFlatButton: This provides a filled background and rounded corners.
  • MDIconButton: This offers the capability to include an icon alongside the button text.

Here's what we can infer about MDFillRoundFlatIconButton:

  • Features: It likely combines the functionalities of both parent widgets, resulting in a button with:
    • Filled background for a prominent look.
    • Rounded corners for a modern aesthetic.
    • Text label for clear description of the button's action.
    • Icon for visual representation.


Example:-

from kivymd.app import MDApp
        from kivy.lang.builder import Builder
        
        rahul ="""
        
        MDFillRoundFlatIconButton:
            text: "RAHULTECHWEB.COM"
            icon:"git"
            text_color: "white"
            pos_hint: {"center_x": .5, "center_y": .5}
        
        """
        class MDFillRoundFlatIconButton(MDApp):
            def build(self):
                self.theme_cls.theme_style = "Dark"
                self.theme_cls.primary_palette = "Red"
                blr= Builder.load_string(rahul)
                return blr
        
        MDFillRoundFlatIconButton().run()




Output:-



KivyMD Button Component and following Button classes





MDTextButton



MDTextButton is a widget from the KivyMD library used to create text-based buttons with a flat, minimalist design in your Kivy application. These buttons prioritize text readability and offer a subtle visual appearance.

Here's a breakdown of MDTextButton:

  • Key characteristics:

    • Text-based: Primarily focuses on displaying text for the button's label.
    • Flat design: Maintains a flat, unraised appearance with no background fill or borders.
    • Emphasis on text: Relies on clear and concise text to convey the button's action.
    • Customization: Offers properties to control text color, font size, and other visual aspects.


Example:-

from kivymd.app import MDApp
        from kivy.lang.builder import Builder
        
        rahul ="""
        
        MDTextButton:
            text: "RAHULWEBTECH.COM"
            color:"red"
            custom_color: "white"
            pos_hint: {"center_x": .5, "center_y": .5}
        
        """
        class MDTextButton(MDApp):
            def build(self):
                self.theme_cls.theme_style = "Dark"
                self.theme_cls.primary_palette = "Red"
                blr= Builder.load_string(rahul)
                return blr
        
        MDTextButton().run()


Output:-


KivyMD Button Component and following Button classes


MDFloatingActionButtonSpeedDial


MDFloatingActionButtonSpeedDial is a component from the KivyMD library used to create a circular floating action button (FAB) that expands to reveal a set of child buttons. It provides a convenient way to offer a primary action button with additional options accessible through a quick tap.

Here's a breakdown of key features and functionalities of MDFloatingActionButtonSpeedDial:

  • Circular FAB with Child Buttons: It acts as a main FAB that expands to display child buttons in a radial pattern upon tapping.
  • Customization: You can customize the appearance of the main FAB and child buttons using various properties like colors, icons, and button types.
  • Callbacks: Attach callback functions to handle user interactions with the main FAB and each child button.
  • Animation: The opening and closing of the child button list is animated for a smooth user experience.


Example:-

from kivy.lang import Builder

      from kivymd.app import MDApp
      
      rahul = '''
      MDScreen:
      
          MDFloatingActionButtonSpeedDial:
              data: app.data
              root_button_anim: True
      '''
      
      
      class MDFloatingActionButtonSpeedDial(MDApp):
          data = {
              'Git': 'git',
              'Account': 'account',
              'Facebook': 'facebook',
          }
      
          def build(self):
              self.theme_cls.theme_style = "Dark"
              self.theme_cls.primary_palette = "Red"
              return Builder.load_string(rahul)
      
      
      MDFloatingActionButtonSpeedDial().run()





Output:-




KivyMD Button Component and following Button Classes





You can use various types of animation of labels for buttons on the stack:

MDFloatingActionButtonSpeedDial:
    hint_animation: True
You can set your color values for background, text of buttons etc:
MDFloatingActionButtonSpeedDial:
    hint_animation: True
    bg_hint_color: app.theme_cls.primary_dark



Conclusion:


 KivyMD Buttons! Here are some additional points you can consider including in your conclusion:

  • Theming: KivyMD buttons integrate well with the KivyMD theming system, allowing you to easily match their appearance to your app's overall theme.
  • Performance: KivyMD buttons are generally lightweight and perform well, making them suitable for various mobile development projects.
  • Easy to Use: KivyMD buttons are designed with a simple and intuitive API, making them easy to learn and integrate into your Kivy application.
Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.