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:
Customization:
KivyMD buttons offer customization options to match your app's design:
- Text: Set the button text using the
textproperty. - Icon: Include an icon using the
iconproperty. KivyMD uses its own icon library. - Colors: Change the button's background and text color using properties like
theme_text_colorandbackground_color.
Additional Features:
- Buttons support disabling interaction with the
disabledproperty. - You can control the button's size with properties like
size_hint.
KivyMD Button Component provides the following button classes
- MDIconButton
- MDFloatingActionButton
- MDFlatButton
- MDRaisedButton
- MDRectangleFlatButton
- MDRectangleFlatIconButton
- MDRoundFlatButton
- MDRoundFlatIconButton
- MDFillRoundFlatButton
- MDFillRoundFlatIconButton
- MDTextButton
- 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:-
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:-
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:-
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:-
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:-
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:-
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:-
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:-
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.
