Button¶
Buttons allow users to take actions, and make choices, with a single tap.
KivyMD provides the following button classes for use:
MDIconButton¶
from kivy.lang import Builder
from kivymd.app import MDApp
KV = '''
MDScreen:
MDIconButton:
icon: "language-python"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
The icon
parameter must have the name of the icon
from kivymd/icon_definitions.py
file.
You can also use custom icons:
MDIconButton:
icon: "data/logo/kivy-icon-256.png"
By default, MDIconButton
button has a size (dp(48), dp (48))
.
Use user_font_size
attribute to resize the button:
MDIconButton:
icon: "android"
user_font_size: "64sp"
By default, the color of MDIconButton
(depending on the style of the application) is black or white.
You can change the color of MDIconButton
as the text color
of MDLabel
:
MDIconButton:
icon: "android"
theme_text_color: "Custom"
text_color: app.theme_cls.primary_color
MDFloatingActionButton¶
The above parameters for MDIconButton
apply
to MDFloatingActionButton
.
To change MDFloatingActionButton
background, use the
md_bg_color
parameter:
MDFloatingActionButton:
icon: "android"
md_bg_color: app.theme_cls.primary_color
The length of the shadow is controlled by the elevation_normal
parameter:
MDFloatingActionButton:
icon: "android"
elevation_normal: 12
MDFlatButton¶
To change the text color of: class:~MDFlatButton use the text_color
parameter:
MDFlatButton:
text: "MDFLATBUTTON"
theme_text_color: "Custom"
text_color: 0, 0, 1, 1
Or use markup:
MDFlatButton:
text: "[color=#00ffcc]MDFLATBUTTON[/color]"
To specify the font size and font name, use the parameters as in the usual Kivy buttons:
MDFlatButton:
text: "MDFLATBUTTON"
font_size: "18sp"
font_name: "path/to/font"
MDRaisedButton¶
This button is similar to the MDFlatButton
button except that you
can set the background color for MDRaisedButton
:
MDRaisedButton:
text: "MDRAISEDBUTTON"
md_bg_color: 1, 0, 1, 1
MDRectangleFlatButton¶
MDRectangleFlatButton:
text: "MDRECTANGLEFLATBUTTON"
theme_text_color: "Custom"
text_color: 1, 0, 0, 1
line_color: 0, 0, 1, 1
MDRectangleFlatIconButton¶
Button parameters MDRectangleFlatButton
are the same as
button MDRectangleFlatButton
:
MDRectangleFlatIconButton:
icon: "android"
text: "MDRECTANGLEFLATICONBUTTON"
theme_text_color: "Custom"
text_color: 0, 0, 1, 1
line_color: 1, 0, 1, 1
icon_color: 1, 0, 0, 1
Without border¶
from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen
from kivymd.uix.button import MDRectangleFlatIconButton
class Example(MDApp):
def build(self):
screen = MDScreen()
screen.add_widget(
MDRectangleFlatIconButton(
text="MDRectangleFlatIconButton",
icon="language-python",
line_color=(0, 0, 0, 0),
pos_hint={"center_x": .5, "center_y": .5},
)
)
return screen
Example().run()
MDRectangleFlatIconButton:
text: "MDRectangleFlatIconButton"
icon: "language-python"
line_color: 0, 0, 0, 0
pos_hint: {"center_x": .5, "center_y": .5}
MDRoundFlatButton¶
MDRoundFlatButton:
text: "MDROUNDFLATBUTTON"
text_color: 0, 1, 0, 1
MDRoundFlatIconButton¶
Button parameters MDRoundFlatIconButton
are the same as
button MDRoundFlatButton
:
MDRoundFlatIconButton:
icon: "android"
text: "MDROUNDFLATICONBUTTON"
MDFillRoundFlatButton¶
Button parameters MDFillRoundFlatButton
are the same as
button MDRaisedButton
.
MDFillRoundFlatIconButton¶
Button parameters MDFillRoundFlatIconButton
are the same as
button MDRaisedButton
.
Note
Notice that the width of the MDFillRoundFlatIconButton
button matches the size of the button text.
MDTextButton¶
MDTextButton:
text: "MDTEXTBUTTON"
custom_color: 0, 1, 0, 1
MDFloatingActionButtonSpeedDial¶
Note
See the full list of arguments in the class
MDFloatingActionButtonSpeedDial
.
from kivy.lang import Builder
from kivymd.app import MDApp
KV = '''
MDScreen:
MDFloatingActionButtonSpeedDial:
data: app.data
root_button_anim: True
'''
class Example(MDApp):
data = {
'Python': 'language-python',
'PHP': 'language-php',
'C++': 'language-cpp',
}
def build(self):
return Builder.load_string(KV)
Example().run()
Or without KV Language:
from kivymd.uix.screen import MDScreen
from kivymd.app import MDApp
from kivymd.uix.button import MDFloatingActionButtonSpeedDial
class Example(MDApp):
data = {
'Python': 'language-python',
'PHP': 'language-php',
'C++': 'language-cpp',
}
def build(self):
screen = MDScreen()
speed_dial = MDFloatingActionButtonSpeedDial()
speed_dial.data = self.data
speed_dial.root_button_anim = True
screen.add_widget(speed_dial)
return screen
Example().run()
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:
bg_hint_color: app.theme_cls.primary_light
See also
API - kivymd.uix.button
¶
- class kivymd.uix.button.MDRaisedButton(**kwargs)¶
Base class for all rectangular buttons.
- theme_text_color¶
- update_text_color(self, *args)¶
- class kivymd.uix.button.MDFlatButton(**kwargs)¶
Base class for all rectangular buttons.
- md_bg_color¶
- class kivymd.uix.button.MDRectangleFlatButton(**kwargs)¶
Base class for all rectangular buttons.
- class kivymd.uix.button.MDRectangleFlatIconButton(**kwargs)¶
Base class for all rectangular buttons.
- icon¶
Button icon.
icon
is anStringProperty
and defaults to ‘android’.
- icon_color¶
Button icon color.
icon_color
is anColorProperty
and defaults to None.
- update_md_bg_color(self, instance, value)¶
Called when the application color palette changes.
- set_icon_color(self, interval)¶
Sets the icon color if no custom value is specified.
- remove_label(self, interval)¶
- class kivymd.uix.button.MDRoundFlatButton(**kwargs)¶
Base class for all rectangular buttons.
- line_width¶
Line width for button border.
line_width
is anNumericProperty
and defaults to 1.
- line_color¶
Line color for button border.
line_color
is anColorProperty
and defaults to None.
- lay_canvas_instructions(self)¶
- class kivymd.uix.button.MDRoundFlatIconButton(**kwargs)¶
Base class for all rectangular buttons.
- icon¶
Button icon.
icon
is anStringProperty
and defaults to ‘android’.
- icon_color¶
Button icon color.
icon_color
is anColorProperty
and defaults to None.
- set_icon_color(self, interval)¶
Sets the icon color if no custom value is specified.
- update_md_bg_color(self, instance, value)¶
Called when the application color palette changes.
- on_icon_color(self, instance, value)¶
- remove_label(self, interval)¶
- class kivymd.uix.button.MDFillRoundFlatButton(**kwargs)¶
Base class for all rectangular buttons.
- opposite_colors¶
- set_text_color(self, interval)¶
Sets the text color if no custom value is specified.
- update_md_bg_color(self, instance, value)¶
Called when the application color palette changes.
- on_md_bg_color(self, instance, value)¶
We override this method, thus prohibiting setting the background color for the button.
Allows to set the background color only in the rangefrom [0.0, 0.0, 0.0, 0.0] to [0.0, 0.0, 0.0, 0.1]. This color is set in the
BasePressedButton
class when the button is pressed and Ignore other custom colors.
- class kivymd.uix.button.MDFillRoundFlatIconButton(**kwargs)¶
Base class for all rectangular buttons.
- set_md_bg_color(self, interval)¶
Checks if a value is set for the md_bg_color parameter.
- on_md_bg_color(self, instance, value)¶
We override this method, thus prohibiting setting the background color for the button.
Allows to set the background color only in the rangefrom [0.0, 0.0, 0.0, 0.0] to [0.0, 0.0, 0.0, 0.1]. This color is set in the
BasePressedButton
class when the button is pressed and Ignore other custom colors.
- update_md_bg_color(self, instance, value)¶
Called when the application color palette changes.
- update_text_color(self, *args)¶
- set_text_color(self, interval)¶
Sets the text color if no custom value is specified.
- update_icon_color(self, interval)¶
- on_disabled(self, instance, value)¶
This function hides the shadow when the widget is disabled. It sets the shadow to 0.
- set_icon_color(self, interval)¶
Sets the icon color if no custom value is specified.
- class kivymd.uix.button.MDIconButton(**kwargs)¶
Base class for all round buttons, bringing in the appropriate on-touch behavior
- icon¶
Button icon.
icon
is anStringProperty
and defaults to ‘checkbox-blank-circle’.
- set_size(self, interval)¶
Sets the custom icon size if the value of the user_font_size attribute is not zero. Otherwise, the icon size is set to (48, 48).
- update_md_bg_color(self, instance, value)¶
Called when the application color palette changes.
- class kivymd.uix.button.MDFloatingActionButton(**kwargs)¶
Base class for all round buttons, bringing in the appropriate on-touch behavior
- icon¶
Button icon.
icon
is anStringProperty
and defaults to ‘android’.
- update_text_color(self, *args)¶
- set_md_bg_color(self, interval)¶
Checks if a value is set for the md_bg_color parameter.
- set_size(self, interval)¶
- on_touch_down(self, touch)¶
Receive a touch down event.
- Parameters
- touch:
MotionEvent
class Touch received. The touch is in parent coordinates. See
relativelayout
for a discussion on coordinate systems.
- touch:
- Returns
bool If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree.
- on_touch_move(self, touch)¶
Receive a touch move event. The touch is in parent coordinates.
See
on_touch_down()
for more information.
- on_touch_up(self, touch)¶
Receive a touch up event. The touch is in parent coordinates.
See
on_touch_down()
for more information.
- class kivymd.uix.button.MDTextButton(**kwargs)¶
This mixin class provides
Button
behavior. Please see thebutton behaviors module
documentation for more information.- Events
- on_press
Fired when the button is pressed.
- on_release
Fired when the button is released (i.e. the touch/click that pressed the button goes away).
- color¶
Button color in (r, g, b, a) format.
color
is anColorProperty
and defaults to None.
- color_disabled¶
Button color disabled in (r, g, b, a) format.
color_disabled
is anColorProperty
and defaults to None.
- animation_label(self)¶
- on_press(self, *args)¶
- on_md_bg_color(self, instance, value)¶
- on_disabled(self, instance, value)¶
This function hides the shadow when the widget is disabled. It sets the shadow to 0.
- class kivymd.uix.button.MDFloatingActionButtonSpeedDial(**kwargs)¶
- Events
- icon¶
Root button icon name.
icon
is aStringProperty
and defaults to ‘plus’.
- anchor¶
Stack anchor. Available options are: ‘right’.
anchor
is aOptionProperty
and defaults to ‘right’.
- callback¶
Custom callback.
MDFloatingActionButtonSpeedDial: callback: app.callback
def callback(self, instance): print(instance.icon)
callback
is aObjectProperty
and defaults to None.
- label_text_color¶
Floating text color in (r, g, b, a) format.
label_text_color
is aColorProperty
and defaults to [0, 0, 0, 1].
- data¶
Must be a dictionary
{ 'name-icon': 'Text label', ..., ..., }
- right_pad¶
If True, the button will increase on the right side by 2.5 pixels if the
hint_animation
parameter equal to True.False
True
right_pad
is aBooleanProperty
and defaults to False.
- root_button_anim¶
If
True
then the root button will rotate 45 degrees when the stack is opened.root_button_anim
is aBooleanProperty
and defaults to False.
- opening_transition¶
The name of the stack opening animation type.
opening_transition
is aStringProperty
and defaults to ‘out_cubic’.
- closing_transition¶
The name of the stack closing animation type.
closing_transition
is aStringProperty
and defaults to ‘out_cubic’.
- opening_transition_button_rotation¶
The name of the animation type to rotate the root button when opening the stack.
opening_transition_button_rotation
is aStringProperty
and defaults to ‘out_cubic’.
- closing_transition_button_rotation¶
The name of the animation type to rotate the root button when closing the stack.
closing_transition_button_rotation
is aStringProperty
and defaults to ‘out_cubic’.
- opening_time¶
Time required for the stack to go to: attr:state ‘open’.
opening_time
is aNumericProperty
and defaults to 0.2.
- closing_time¶
Time required for the stack to go to: attr:state ‘close’.
closing_time
is aNumericProperty
and defaults to 0.2.
- opening_time_button_rotation¶
Time required to rotate the root button 45 degrees during the stack opening animation.
opening_time_button_rotation
is aNumericProperty
and defaults to 0.2.
- closing_time_button_rotation¶
Time required to rotate the root button 0 degrees during the stack closing animation.
closing_time_button_rotation
is aNumericProperty
and defaults to 0.2.
- state¶
Indicates whether the stack is closed or open. Available options are: ‘close’, ‘open’.
state
is aOptionProperty
and defaults to ‘close’.
- bg_color_root_button¶
Root button color in (r, g, b, a) format.
bg_color_root_button
is aColorProperty
and defaults to [].
- bg_color_stack_button¶
The color of the buttons in the stack (r, g, b, a) format.
bg_color_stack_button
is aColorProperty
and defaults to [].
- color_icon_stack_button¶
The color icon of the buttons in the stack (r, g, b, a) format.
color_icon_stack_button
is aColorProperty
and defaults to [].
- color_icon_root_button¶
The color icon of the root button (r, g, b, a) format.
color_icon_root_button
is aColorProperty
and defaults to [].
- bg_hint_color¶
Background color for the text of the buttons in the stack (r, g, b, a) format.
bg_hint_color
is aColorProperty
and defaults to None.
- hint_animation¶
Whether to use button extension animation to display text labels.
hint_animation
is aBooleanProperty
and defaults to False.
- on_open(self, *args)¶
Called when a stack is opened.
- on_close(self, *args)¶
Called when a stack is closed.
- on_leave(self, instance)¶
Called when the mouse cursor goes outside the button of stack.
- on_enter(self, instance)¶
Called when the mouse cursor is over a button from the stack.
- on_data(self, instance, value)¶
Creates a stack of buttons.
- on_icon(self, instance, value)¶
- on_label_text_color(self, instance, value)¶
- on_color_icon_stack_button(self, instance, value)¶
- on_hint_animation(self, instance, value)¶
- on_bg_hint_color(self, instance, value)¶
- on_color_icon_root_button(self, instance, value)¶
- on_bg_color_stack_button(self, instance, value)¶
- on_bg_color_root_button(self, instance, value)¶
- set_pos_labels(self, widget)¶
Sets the position of the floating labels.
- set_pos_root_button(self, instance)¶
Sets the position of the root button.
- set_pos_bottom_buttons(self, instance)¶
Sets the position of the bottom buttons in a stack.
- open_stack(self, instance)¶
Opens a button stack.
- do_animation_open_stack(self, anim_data)¶
- close_stack(self)¶
Closes the button stack.