Kivymd Readthedocs Io en Latest
Kivymd Readthedocs Io en Latest
Kivymd Readthedocs Io en Latest
Release 1.2.0.dev0
1 KivyMD 1
2 Contents 3
2.1 Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.4 Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
2.5 Behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
2.6 Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
2.7 Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
2.8 Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564
2.9 About . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
2.10 KivyMD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577
Index 615
i
ii
CHAPTER
ONE
KIVYMD
Is a collection of Material Design compliant widgets for use with, Kivy cross-platform graphical framework a frame-
work for cross-platform, touch-enabled graphical applications. The project’s goal is to approximate Google’s Material
Design spec as close as possible without sacrificing ease of use.
This library is a fork of the KivyMD project. We found the strength and brought this project to a new level.
If you wish to become a project developer (permission to create branches on the project without forking for easier
collaboration), have at least one PR approved and ask for it. If you contribute regularly to the project the role may be
offered to you without asking too.
1
KivyMD, Release 1.2.0.dev0
2 Chapter 1. KivyMD
CHAPTER
TWO
CONTENTS
In order to start using KivyMD, you must first install the Kivy framework on your computer. Once you have installed
Kivy, you can install KivyMD.
Warning: KivyMD depends on Kivy! Therefore, before using KivyMD, first learn how to work with Kivy.
2.1.1 Installation
Note: Replace master.zip with <commit hash>.zip (eg 51b8ef0.zip) to download KivyMD from specific commit.
Also you can install manually from sources. Just clone the project and run pip:
Note: If you don’t need full commit history (about 320 MiB), you can use a shallow clone (git clone
https://github.com/kivymd/KivyMD.git –depth 1) to save time. If you need full commit history, then remove –depth
1.
3
KivyMD, Release 1.2.0.dev0
class MainApp(MDApp):
def build(self):
return MDLabel(text="Hello, World", halign="center")
MainApp().run()
class MainApp(App):
def build(self):
return Label(text="Hello, World")
MainApp().run()
At first glance, the KivyMD example contains more code. . . However, the following example already demonstrates how
difficult it is to create a custom button in Kivy:
4 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
KV = """
#:import get_color_from_hex kivy.utils.get_color_from_hex
<RectangleFlatButton>:
ripple_color: 0, 0, 0, .2
background_color: 0, 0, 0, 0
color: root.primary_color
canvas.before:
Color:
rgba: root.primary_color
Line:
width: 1
rectangle: (self.x, self.y, self.width, self.height)
Screen:
canvas:
Color:
rgba: get_color_from_hex("#0F0F0F")
Rectangle:
pos: self.pos
size: self.size
"""
class MainApp(App):
def build(self):
screen = Builder.load_string(KV)
screen.add_widget(
RectangleFlatButton(
text="Hello, World",
(continues on next page)
MainApp().run()
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDRectangleFlatButton(
text="Hello, World",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
)
MainApp().run()
KivyMD:
Kivy:
6 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
2.2 Themes
2.2.1 Theming
See also:
Material Design spec, Material theming
Material App
The main class of your application, which in Kivy inherits from the App class, in KivyMD must inherit from the MDApp
class. The MDApp class has properties that allow you to control application properties such as color/style/font of
interface elements and much more.
The main application class inherited from the MDApp class has the theme_cls attribute, with which you control the
material properties of your application.
The standard theme_cls is designed to provide the standard themes and colors as defined by Material Design.
We do not recommend that you change this.
However, if you do need to change the standard colors, for instance to meet branding guidelines, you can do this by
overloading the color_definitions.py object.
Create a custom color defintion object. This should have the same format as the colors object in color_definitions.py
and contain definitions for at least the primary color, the accent color and the Light and Dark backgrounds.
Note: Your custom colors must use the names of the existing colors as defined in the palette e.g. You can have Blue
but you cannot have NavyBlue.
Add the custom theme to the MDApp as shown in the following snippet.
Imperative python style with KV
colors = {
"Teal": {
"200": "#212121",
(continues on next page)
2.2. Themes 7
KivyMD, Release 1.2.0.dev0
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "Custom theme"
MDTabs:
id: tabs
<Tab>
MDIconButton:
id: icon
icon: root.icon
icon_size: "48sp"
theme_icon_color: "Custom"
icon_color: "white"
pos_hint: {"center_x": .5, "center_y": .5}
'''
icon = ObjectProperty()
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
self.theme_cls.colors = colors
(continues on next page)
8 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
def on_start(self):
for name_tab in self.icons:
tab = Tab(title="This is " + name_tab, icon=name_tab)
self.root.ids.tabs.add_widget(tab)
Example().run()
colors = {
"Teal": {
"200": "#212121",
"500": "#212121",
"700": "#212121",
},
"Red": {
"200": "#C25554",
"500": "#C25554",
"700": "#C25554",
},
"Light": {
"StatusBar": "E0E0E0",
"AppBar": "#202020",
"Background": "#2E3032",
"CardsDialogs": "#FFFFFF",
"FlatButtonDown": "#CCCCCC",
},
}
icon = ObjectProperty()
class Example(MDApp):
(continues on next page)
2.2. Themes 9
KivyMD, Release 1.2.0.dev0
def build(self):
self.theme_cls.colors = colors
self.theme_cls.primary_palette = "Teal"
self.theme_cls.accent_palette = "Red"
return (
MDBoxLayout(
MDTopAppBar(title="Custom theme"),
MDTabs(id="tabs"),
orientation="vertical",
)
)
def on_start(self):
for name_tab in self.icons:
self.root.ids.tabs.add_widget(
Tab(
MDIconButton(
icon=name_tab,
icon_size="48sp",
theme_icon_color="Custom",
icon_color="white",
pos_hint={"center_x": .5, "center_y": .5},
),
title="This is " + name_tab,
icon=name_tab,
)
)
Example().run()
This will change the theme colors to your custom definition. In all other respects, the theming stays as documented.
10 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
Warning: Please note that the key 'Red' is a required key for the dictionary kivymd.color_definition.
colors.
API - kivymd.theming
class kivymd.theming.ThemeManager(**kwargs)
primary_palette
The name of the color scheme that the application will use. All major material components will have the
color of the specified color theme.
Available options are: ‘Red’, ‘Pink’, ‘Purple’, ‘DeepPurple’, ‘Indigo’, ‘Blue’, ‘LightBlue’, ‘Cyan’, ‘Teal’,
‘Green’, ‘LightGreen’, ‘Lime’, ‘Yellow’, ‘Amber’, ‘Orange’, ‘DeepOrange’, ‘Brown’, ‘Gray’, ‘BlueGray’.
To change the color scheme of an application:
Imperative python style with KV
KV = '''
MDScreen:
MDRectangleFlatButton:
text: "Hello, World"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Red" # "Purple", "Red"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange" # "Purple", "Red"
2.2. Themes 11
KivyMD, Release 1.2.0.dev0
Example().run()
class MainApp(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.primary_hue = "200" # "500"
screen = MDScreen()
screen.add_widget(
MDRectangleFlatButton(
text="Hello, World",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
return screen
MainApp().run()
12 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_hue = "200" # "500"
return (
MDScreen(
MDRectangleFlatButton(
text="Hello, World",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
)
Example().run()
2.2. Themes 13
KivyMD, Release 1.2.0.dev0
KV = '''
MDScreen:
MDRaisedButton:
text: "primary_light"
pos_hint: {"center_x": 0.5, "center_y": 0.7}
md_bg_color: app.theme_cls.primary_light
MDRaisedButton:
text: "primary_color"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
MDRaisedButton:
text: "primary_dark"
pos_hint: {"center_x": 0.5, "center_y": 0.3}
md_bg_color: app.theme_cls.primary_dark
'''
class MainApp(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
MainApp().run()
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
return (
MDScreen(
MDRaisedButton(
text="Primary light",
pos_hint={"center_x": 0.5, "center_y": 0.7},
md_bg_color=self.theme_cls.primary_light,
),
MDRaisedButton(
(continues on next page)
14 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
Example().run()
primary_light is an AliasProperty that returns the value of the current application theme (in lighter
color), property is readonly.
primary_dark
Colors of the current application color theme (in darker color).
primary_dark is an AliasProperty that returns the value of the current application theme (in darker
color), property is readonly.
accent_palette
The application color palette used for items such as the tab indicator in the MDTabsBar class and so on.
See kivymd.uix.tab.MDTabsBar.indicator_color attribute.
accent_palette is an OptionProperty and defaults to ‘Amber’.
accent_hue
Similar to primary_hue, but returns a value for accent_palette.
accent_hue is an OptionProperty and defaults to ‘500’.
accent_light_hue
Hue value for accent_light.
accent_light_hue is an OptionProperty and defaults to ‘200’.
accent_dark_hue
Hue value for accent_dark.
accent_dark_hue is an OptionProperty and defaults to ‘700’.
accent_color
Similar to primary_color, but returns a value for accent_color.
2.2. Themes 15
KivyMD, Release 1.2.0.dev0
accent_color is an AliasProperty that returns the value in rgba format for accent_color, property
is readonly.
accent_light
Similar to primary_light, but returns a value for accent_light.
accent_light is an AliasProperty that returns the value in rgba format for accent_light, property
is readonly.
accent_dark
Similar to primary_dark, but returns a value for accent_dark.
accent_dark is an AliasProperty that returns the value in rgba format for accent_dark, property is
readonly.
material_style
Material design style. Available options are: ‘M2’, ‘M3’.
New in version 1.0.0.
Changed in version 1.2.0: By default now ‘M3’.
See also:
Material Design 2 and Material Design 3
material_style is an OptionProperty and defaults to ‘M3’.
theme_style_switch_animation
Animate app colors when switching app color scheme (‘Dark/light’).
New in version 1.1.0.
Declarative KV style
KV = '''
MDScreen:
MDCard:
orientation: "vertical"
padding: 0, 0, 0 , "36dp"
size_hint: .5, .5
pos_hint: {"center_x": .5, "center_y": .5}
elevation: 2
shadow_offset: 0, -2
MDLabel:
text: "Theme style - {}".format(app.theme_cls.theme_style)
halign: "center"
valign: "center"
bold: True
font_style: "H5"
MDRaisedButton:
text: "Set theme"
(continues on next page)
16 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
class Example(MDApp):
def build(self):
self.theme_cls.theme_style_switch_animation = True
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def switch_theme_style(self):
self.theme_cls.primary_palette = (
"Orange" if self.theme_cls.primary_palette == "Red" else "Red"
)
self.theme_cls.theme_style = (
"Dark" if self.theme_cls.theme_style == "Light" else "Light"
)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style_switch_animation = True
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDCard(
MDLabel(
id="label",
text="Theme style - {}".format(self.theme_cls.theme_
˓→style),
halign="center",
valign="center",
bold=True,
font_style="H5",
),
MDRaisedButton(
text="Set theme",
on_release=self.switch_theme_style,
(continues on next page)
2.2. Themes 17
KivyMD, Release 1.2.0.dev0
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style_switch_animation = True
self.theme_cls.theme_style_switch_animation_duration = 0.8
18 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MainApp().run()
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark" # "Light"
return (
MDScreen(
MDRectangleFlatButton(
text="Hello, World",
pos_hint={"center_x": 0.5, "center_y": 0.5},
),
)
)
Example().run()
2.2. Themes 19
KivyMD, Release 1.2.0.dev0
KV = '''
MDBoxLayout:
MDWidget:
md_bg_color: app.theme_cls.bg_light
MDBoxLayout:
md_bg_color: app.theme_cls.bg_normal
MDBoxLayout:
md_bg_color: app.theme_cls.bg_dark
MDBoxLayout:
md_bg_color: app.theme_cls.bg_darkest
'''
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark" # "Light"
return Builder.load_string(KV)
MainApp().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark" # "Light"
return (
MDBoxLayout(
MDWidget(
md_bg_color=self.theme_cls.bg_light,
),
MDWidget(
md_bg_color=self.theme_cls.bg_normal,
),
MDWidget(
md_bg_color=self.theme_cls.bg_dark,
),
MDWidget(
md_bg_color=self.theme_cls.bg_darkest,
(continues on next page)
20 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
Example().run()
bg_darkest is an AliasProperty that returns the value in rgba format for bg_darkest, property is
readonly.
opposite_bg_darkest
The opposite value of color in the bg_darkest.
opposite_bg_darkest is an AliasProperty that returns the value in rgba format for
opposite_bg_darkest, property is readonly.
bg_dark
Similar to bg_normal, but the color values are one tone lower (darker) than bg_normal.
bg_dark is an AliasProperty that returns the value in rgba format for bg_dark, property is readonly.
opposite_bg_dark
The opposite value of color in the bg_dark.
opposite_bg_dark is an AliasProperty that returns the value in rgba format for opposite_bg_dark,
property is readonly.
bg_normal
Similar to bg_light, but the color values are one tone lower (darker) than bg_light.
bg_normal is an AliasProperty that returns the value in rgba format for bg_normal, property is read-
only.
opposite_bg_normal
The opposite value of color in the bg_normal.
opposite_bg_normal is an AliasProperty that returns the value in rgba format for
opposite_bg_normal, property is readonly.
bg_light
” Depending on the style of the theme (‘Dark’ or ‘Light’) that the application uses, bg_light contains the
color value in rgba format for the widgets background.
bg_light is an AliasProperty that returns the value in rgba format for bg_light, property is readonly.
opposite_bg_light
The opposite value of color in the bg_light.
opposite_bg_light is an AliasProperty that returns the value in rgba format for
opposite_bg_light, property is readonly.
2.2. Themes 21
KivyMD, Release 1.2.0.dev0
divider_color
Color for dividing lines such as MDSeparator.
divider_color is an AliasProperty that returns the value in rgba format for divider_color, prop-
erty is readonly.
opposite_divider_color
The opposite value of color in the divider_color.
opposite_divider_color is an AliasProperty that returns the value in rgba format for
opposite_divider_color, property is readonly.
disabled_primary_color
The greyscale disabled version of the current application theme color in rgba format.
New in version 1.0.0.
disabled_primary_color is an AliasProperty that returns the value in rgba format for
disabled_primary_color, property is readonly.
opposite_disabled_primary_color
The opposite value of color in the disabled_primary_color.
New in version 1.0.0.
opposite_disabled_primary_color is an AliasProperty that returns the value in rgba format for
opposite_disabled_primary_color, property is readonly.
text_color
Color of the text used in the MDLabel.
text_color is an AliasProperty that returns the value in rgba format for text_color, property is
readonly.
opposite_text_color
The opposite value of color in the text_color.
opposite_text_color is an AliasProperty that returns the value in rgba format for
opposite_text_color, property is readonly.
secondary_text_color
The color for the secondary text that is used in classes from the module TwoLineListItem.
secondary_text_color is an AliasProperty that returns the value in rgba format for
secondary_text_color, property is readonly.
opposite_secondary_text_color
The opposite value of color in the secondary_text_color.
opposite_secondary_text_color is an AliasProperty that returns the value in rgba format for
opposite_secondary_text_color, property is readonly.
icon_color
Color of the icon used in the MDIconButton.
icon_color is an AliasProperty that returns the value in rgba format for icon_color, property is
readonly.
22 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
opposite_icon_color
The opposite value of color in the icon_color.
opposite_icon_color is an AliasProperty that returns the value in rgba format for
opposite_icon_color, property is readonly.
disabled_hint_text_color
Color of the disabled text used in the MDTextField.
disabled_hint_text_color is an AliasProperty that returns the value in rgba format for
disabled_hint_text_color, property is readonly.
opposite_disabled_hint_text_color
The opposite value of color in the disabled_hint_text_color.
opposite_disabled_hint_text_color is an AliasProperty that returns the value in rgba format
for opposite_disabled_hint_text_color, property is readonly.
error_color
Color of the error text used in the MDTextField.
error_color is an AliasProperty that returns the value in rgba format for error_color, property is
readonly.
ripple_color
Color of ripple effects.
ripple_color is an AliasProperty that returns the value in rgba format for ripple_color, property
is readonly.
device_orientation
Device orientation.
device_orientation is an StringProperty.
standard_increment
Value of standard increment.
standard_increment is an AliasProperty that returns the value in rgba format for
standard_increment, property is readonly.
horizontal_margins
Value of horizontal margins.
horizontal_margins is an AliasProperty that returns the value in rgba format for
horizontal_margins, property is readonly.
font_styles
Data of default font styles.
2.2. Themes 23
KivyMD, Release 1.2.0.dev0
KV = '''
MDScreen:
MDLabel:
text: "JetBrainsMono"
halign: "center"
font_style: "JetBrainsMono"
'''
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
LabelBase.register(
name="JetBrainsMono",
fn_regular="JetBrainsMono-Regular.ttf")
theme_font_styles.append('JetBrainsMono')
self.theme_cls.font_styles["JetBrainsMono"] = [
"JetBrainsMono",
16,
False,
0.15,
]
return Builder.load_string(KV)
MainApp().run()
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
(continues on next page)
24 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
LabelBase.register(
name="JetBrainsMono",
fn_regular="JetBrainsMono-Regular.ttf")
theme_font_styles.append('JetBrainsMono')
self.theme_cls.font_styles["JetBrainsMono"] = [
"JetBrainsMono",
16,
False,
0.15,
]
return (
MDScreen(
MDLabel(
text="JetBrainsMono",
halign="center",
font_style="JetBrainsMono",
)
)
)
MainApp().run()
font_styles is an DictProperty.
on_theme_style(self, interval: int, theme_style: str)
set_clearcolor_by_theme_style(self, theme_style)
2.2. Themes 25
KivyMD, Release 1.2.0.dev0
Note that all values must be provided. If you only want to set one or two values use the appropriate method
call for that.
Imperative python style
class MainApp(MDApp):
def build(self):
self.theme_cls.set_colors(
"Blue", "600", "50", "800", "Teal", "600", "100", "800"
)
screen = MDScreen()
screen.add_widget(
MDRectangleFlatButton(
text="Hello, World",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
return screen
MainApp().run()
class MainApp(MDApp):
def build(self):
self.theme_cls.set_colors(
"Blue", "600", "50", "800", "Teal", "600", "100", "800"
)
return (
MDScreen(
MDRectangleFlatButton(
text="Hello, World",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
)
MainApp().run()
sync_theme_styles(self, *args)
class kivymd.theming.ThemableBehavior(**kwargs)
theme_cls
Instance of ThemeManager class.
26 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
theme_cls is an ObjectProperty.
device_ios
True if device is iOS.
device_ios is an BooleanProperty.
widget_style
Allows to set one of the three style properties for the widget: ‘android’, ‘ios’, ‘desktop’.
For example, for the class MDSwitch has two styles - ‘android’ and ‘ios’:
MDSwitch:
widget_style: "ios"
MDSwitch:
widget_style: "android"
MDTopAppBar:
title: "MDTopAppBar"
opposite_colors: True
MDTopAppBar:
title: "MDTopAppBar"
opposite_colors: True
remove_widget(self, widget)
2.2. Themes 27
KivyMD, Release 1.2.0.dev0
This module contains MDApp class that is inherited from App. MDApp has some properties needed for KivyMD library
(like theme_cls). You can turn on the monitor displaying the current FPS value in your application:
KV = '''
MDScreen:
MDLabel:
text: "Hello, World!"
halign: "center"
'''
class MainApp(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
self.fps_monitor_start()
MainApp().run()
28 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
API - kivymd.app
class kivymd.app.MDApp(**kwargs)
Application class, see App class documentation for more information.
icon
See icon attribute for more information.
New in version 1.1.0.
icon is an StringProperty adn default to kivymd/images/logo/kivymd-icon-512.png.
theme_cls
Instance of ThemeManager class.
2.2. Themes 29
KivyMD, Release 1.2.0.dev0
Warning: The theme_cls attribute is already available in a class that is inherited from the MDApp
class. The following code will result in an error!
class MainApp(MDApp):
theme_cls = ThemeManager()
theme_cls.primary_palette = "Teal"
class MainApp(MDApp):
def build(self):
self.theme_cls.primary_palette = "Teal"
theme_cls is an ObjectProperty.
load_all_kv_files(self, path_to_directory: str)
Recursively loads KV files from the selected directory.
New in version 1.0.0.
See also:
Material Design spec, The color system
Material Design spec, The color tool
Material colors palette to use in kivymd.theming.ThemeManager. colors is a dict-in-dict where the first key is a
value from palette and the second key is a value from hue. Color is a hex value, a string of 6 characters (0-9, A-F)
written in uppercase.
For example, colors["Red"]["900"] is "B71C1C".
API - kivymd.color_definitions
kivymd.color_definitions.colors
Color palette. Taken from 2014 Material Design color palettes.
To demonstrate the shades of the palette, you can run the following code:
demo = '''
<Root@MDBoxLayout>
(continues on next page)
30 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDTopAppBar:
title: app.title
MDTabs:
id: android_tabs
on_tab_switch: app.on_tab_switch(*args)
size_hint_y: None
height: "48dp"
tab_indicator_anim: False
RecycleView:
id: rv
key_viewclass: "viewclass"
key_size: "height"
RecycleBoxLayout:
default_size: None, dp(48)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: "vertical"
<ItemColor>
size_hint_y: None
height: "42dp"
MDLabel:
text: root.text
halign: "center"
<Tab>
'''
class ItemColor(MDBoxLayout):
text = StringProperty()
color = ListProperty()
class Palette(MDApp):
(continues on next page)
2.2. Themes 31
KivyMD, Release 1.2.0.dev0
def build(self):
Builder.load_string(demo)
self.screen = Factory.Root()
def on_tab_switch(
self, instance_tabs, instance_tab, instance_tabs_label, tab_text
):
self.screen.ids.rv.data = []
if not tab_text:
tab_text = 'Red'
for value_color in colors[tab_text]:
self.screen.ids.rv.data.append(
{
"viewclass": "ItemColor",
"md_bg_color": colors[tab_text][value_color],
"title": value_color,
}
)
def on_start(self):
self.on_tab_switch(
None,
None,
None,
self.screen.ids.android_tabs.ids.layout.children[-1].text,
)
Palette().run()
32 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
text_colors = {}
for p in palette:
text_colors[p] = {}
for h in hue:
if h in light_colors[p]:
text_colors[p][h] = "000000"
else:
text_colors[p][h] = "FFFFFF"
See also:
Material Design Icons
List of icons from materialdesignicons.com. These expanded material design icons are maintained by Austin Andrews
(Templarian on Github).
LAST UPDATED: Version 7.1.96
To preview the icons and their names, you can use the following application:
Builder.load_string(
(continues on next page)
2.2. Themes 33
KivyMD, Release 1.2.0.dev0
<CustomOneLineIconListItem>
IconLeftWidget:
icon: root.icon
<PreviousMDIcons>
MDBoxLayout:
orientation: 'vertical'
spacing: dp(10)
padding: dp(20)
MDBoxLayout:
adaptive_height: True
MDIconButton:
icon: 'magnify'
MDTextField:
id: search_field
hint_text: 'Search icon'
on_text: root.set_list_md_icons(self.text, True)
RecycleView:
id: rv
key_viewclass: 'viewclass'
key_size: 'height'
RecycleBoxLayout:
padding: dp(10)
default_size: None, dp(48)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
'''
)
class CustomOneLineIconListItem(OneLineIconListItem):
icon = StringProperty()
class PreviousMDIcons(Screen):
34 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
def add_icon_item(name_icon):
self.ids.rv.data.append(
{
"viewclass": "CustomOneLineIconListItem",
"icon": name_icon,
"text": name_icon,
"callback": lambda x: x,
}
)
self.ids.rv.data = []
for name_icon in md_icons.keys():
if search:
if text in name_icon:
add_icon_item(name_icon)
else:
add_icon_item(name_icon)
class MainApp(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = PreviousMDIcons()
def build(self):
return self.screen
def on_start(self):
self.screen.set_list_md_icons()
MainApp().run()
API - kivymd.icon_definitions
kivymd.icon_definitions.md_icons
2.2. Themes 35
KivyMD, Release 1.2.0.dev0
See also:
Material Design spec, The type system
API - kivymd.font_definitions
kivymd.font_definitions.fonts
36 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
2.3 Components
2.3.1 AnchorLayout
AnchorLayout
AnchorLayout:
canvas:
Color:
rgba: app.theme_cls.primary_color
Rectangle:
pos: self.pos
size: self.size
MDAnchorLayout
MDAnchorLayout:
md_bg_color: app.theme_cls.primary_color
API - kivymd.uix.anchorlayout
2.3.2 Widget
Widget class equivalent. Simplifies working with some widget properties. For example:
Widget
Widget:
size_hint: .5, None
height: self.width
canvas:
Color:
rgba: app.theme_cls.primary_color
RoundedRectangle:
pos: self.pos
(continues on next page)
2.3. Components 37
KivyMD, Release 1.2.0.dev0
MDWidget
MDWidget:
size_hint: .5, None
height: self.width
radius: self.height / 2
md_bg_color: app.theme_cls.primary_color
API - kivymd.uix.widget
2.3.3 RecycleGridLayout
RecycleGridLayout class equivalent. Simplifies working with some widget properties. For example:
RecycleGridLayout
RecycleGridLayout:
size_hint_y: None
height: self.minimum_height
canvas:
Color:
rgba: app.theme_cls.primary_color
Rectangle:
pos: self.pos
size: self.size
MDRecycleGridLayout
MDRecycleGridLayout:
adaptive_height: True
md_bg_color: app.theme_cls.primary_color
38 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
• adaptive_height
• adaptive_width
• adaptive_size
adaptive_height
adaptive_height: True
Equivalent
size_hint_y: None
height: self.minimum_height
adaptive_width
adaptive_width: True
Equivalent
size_hint_x: None
width: self.minimum_width
adaptive_size
adaptive_size: True
Equivalent
API - kivymd.uix.recyclegridlayout
2.3. Components 39
KivyMD, Release 1.2.0.dev0
2.3.4 TapTargetView
See also:
TapTargetView, GitHub
TapTargetView, Material archive
Provide value and improve engagement by introducing users to new features and functionality at
relevant moments.
Usage
KV = '''
Screen:
MDFloatingActionButton:
id: button
icon: "plus"
pos: 10, 10
on_release: app.tap_target_start()
'''
class TapTargetViewDemo(MDApp):
def build(self):
screen = Builder.load_string(KV)
self.tap_target_view = MDTapTargetView(
widget=screen.ids.button,
title_text="This is an add button",
description_text="This is a description of the button",
widget_position="left_bottom",
)
return screen
def tap_target_start(self):
if self.tap_target_view.state == "close":
self.tap_target_view.start()
else:
self.tap_target_view.stop()
TapTargetViewDemo().run()
40 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
Widget position
self.tap_target_view = MDTapTargetView(
...
widget_position="right",
)
self.tap_target_view = MDTapTargetView(
...
widget_position="left",
)
2.3. Components 41
KivyMD, Release 1.2.0.dev0
self.tap_target_view = MDTapTargetView(
...
widget_position="top",
)
self.tap_target_view = MDTapTargetView(
...
widget_position="bottom",
(continues on next page)
42 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
self.tap_target_view = MDTapTargetView(
...
widget_position="left_top",
)
2.3. Components 43
KivyMD, Release 1.2.0.dev0
self.tap_target_view = MDTapTargetView(
...
widget_position="right_top",
)
self.tap_target_view = MDTapTargetView(
...
widget_position="left_bottom",
)
44 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
self.tap_target_view = MDTapTargetView(
...
widget_position="right_bottom",
)
If you use the widget_position = "center" parameter then you must definitely specify the title_position.
self.tap_target_view = MDTapTargetView(
(continues on next page)
2.3. Components 45
KivyMD, Release 1.2.0.dev0
Text options
self.tap_target_view = MDTapTargetView(
...
title_text="Title text",
description_text="Description text",
)
46 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
You can use the following options to control font size, color, and boldness:
• title_text_size
• title_text_color
• title_text_bold
• description_text_size
• description_text_color
• description_text_bold
self.tap_target_view = MDTapTargetView(
...
title_text="Title text",
title_text_size="36sp",
description_text="Description text",
description_text_color=[1, 0, 0, 1]
)
2.3. Components 47
KivyMD, Release 1.2.0.dev0
self.tap_target_view = MDTapTargetView(
...
title_text="[size=36]Title text[/size]",
description_text="[color=#ff0000ff]Description text[/color]",
)
Events control
self.tap_target_view.bind(on_open=self.on_open, on_close=self.on_close)
print("Open", instance_tap_target_view)
print("Close", instance_tap_target_view)
48 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
API - kivymd.uix.taptargetview
class kivymd.uix.taptargetview.MDTapTargetView(**kwargs)
Rough try to mimic the working of Android’s TapTargetView.
Events
on_open
Called at the time of the start of the widget opening animation.
on_close
Called at the time of the start of the widget closed animation.
widget
Widget to add TapTargetView upon.
widget is an ObjectProperty and defaults to None.
outer_radius
Radius for outer circle.
self.tap_target_view = MDTapTargetView(
...
outer_circle_color=(1, 0, 0)
)
2.3. Components 49
KivyMD, Release 1.2.0.dev0
50 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
self.tap_target_view = MDTapTargetView(
...
target_circle_color=(1, 0, 0)
)
2.3. Components 51
KivyMD, Release 1.2.0.dev0
draw_shadow
Whether to show shadow.
draw_shadow is an BooleanProperty and defaults to False.
cancelable
Whether clicking outside the outer circle dismisses the view.
cancelable is an BooleanProperty and defaults to False.
widget_position
Sets the position of the widget on the outer_circle. Available options are ‘left’, ‘right’, ‘top’, ‘bottom’,
‘left_top’, ‘right_top’, ‘left_bottom’, ‘right_bottom’, ‘center’.
widget_position is an OptionProperty and defaults to ‘left’.
title_position
Sets the position of :attr`~title_text` on the outer circle. Only works if :attr`~widget_position` is set to
‘center’. In all other cases, it calculates the :attr`~title_position` itself. Must be set to other than ‘auto’
when :attr`~widget_position` is set to ‘center’.
Available options are ‘auto’, ‘left’, ‘right’, ‘top’, ‘bottom’, ‘left_top’, ‘right_top’, ‘left_bottom’,
‘right_bottom’, ‘center’.
title_position is an OptionProperty and defaults to ‘auto’.
stop_on_outer_touch
Whether clicking on outer circle stops the animation.
stop_on_outer_touch is an BooleanProperty and defaults to False.
stop_on_target_touch
Whether clicking on target circle should stop the animation.
stop_on_target_touch is an BooleanProperty and defaults to True.
state
State of MDTapTargetView.
state is an OptionProperty and defaults to ‘close’.
start(self, *args)
Starts widget opening animation.
stop(self, *args)
Starts widget close animation.
on_open(self, *args)
Called at the time of the start of the widget opening animation.
on_close(self, *args)
Called at the time of the start of the widget closed animation.
on_draw_shadow(self, instance, value)
52 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
on_target_touch(self )
on_outer_touch(self )
on_outside_click(self )
2.3.5 ScrollView
ScrollView
ScrollView:
canvas:
Color:
rgba: app.theme_cls.primary_color
Rectangle:
pos: self.pos
size: self.size
MDScrollView
MDScrollView:
md_bg_color: app.theme_cls.primary_color
API - kivymd.uix.scrollview
2.3. Components 53
KivyMD, Release 1.2.0.dev0
2.3.6 ResponsiveLayout
Responsive design is a graphic user interface (GUI) design approach used to create content that
adjusts smoothly to various screen sizes.
The MDResponsiveLayout class does not reorganize your UI. Its task is to track the size of the application screen and,
depending on this size, the MDResponsiveLayout class selects which UI layout should be displayed at the moment:
mobile, tablet or desktop. Therefore, if you want to have a responsive view some kind of layout in your application,
you should have three KV files with UI markup for three platforms.
You need to set three parameters for the MDResponsiveLayout class mobile_view, tablet_view and
desktop_view. These should be Kivy or KivyMD widgets.
Usage responsive
KV = '''
<CommonComponentLabel>
halign: "center"
<MobileView>
CommonComponentLabel:
text: "Mobile"
<TabletView>
CommonComponentLabel:
text: "Table"
<DesktopView>
CommonComponentLabel:
text: "Desktop"
ResponsiveView:
'''
class CommonComponentLabel(MDLabel):
pass
(continues on next page)
54 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
class MobileView(MDScreen):
pass
class TabletView(MDScreen):
pass
class DesktopView(MDScreen):
pass
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Note: Use common components for platform layouts (mobile, tablet, desktop views). As shown in the example above,
such a common component is the CommonComponentLabel widget.
Perhaps you expected more from the MDResponsiveLayout widget, but even Flutter uses a similar approach to creating
a responsive UI.
You can also use the commands provided to you by the developer tools to create a project with an responsive design.
API - kivymd.uix.responsivelayout
Events
on_change_screen_type
Called when the screen type changes.
mobile_view
Mobile view. Must be a Kivy or KivyMD widget.
mobile_view is an ObjectProperty and defaults to None.
2.3. Components 55
KivyMD, Release 1.2.0.dev0
tablet_view
Tablet view. Must be a Kivy or KivyMD widget.
tablet_view is an ObjectProperty and defaults to None.
desktop_view
Desktop view. Must be a Kivy or KivyMD widget.
desktop_view is an ObjectProperty and defaults to None.
on_change_screen_type(self, *args)
Called when the screen type changes.
on_size(self, *args)
Called when the application screen size changes.
set_screen(self )
Sets the screen according to the type of application screen size: mobile/tablet or desktop view.
2.3.7 CircularLayout
MDCircularLayout
Usage
kv = '''
MDScreen:
MDCircularLayout:
id: container
pos_hint: {"center_x": .5, "center_y": .5}
row_spacing: min(self.size) * 0.1
'''
class Main(MDApp):
def build(self):
return Builder.load_string(kv)
def on_start(self):
for x in range(1, 49):
self.root.ids.container.add_widget(
Label(text=f"{x}", color=[0, 0, 0, 1])
)
(continues on next page)
56 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
Main().run()
2.3. Components 57
KivyMD, Release 1.2.0.dev0
API - kivymd.uix.circularlayout
class kivymd.uix.circularlayout.MDCircularLayout(**kwargs)
Float layout class. For more information, see in the FloatLayout class documentation.
degree_spacing
The space between children in degree.
degree_spacing is an NumericProperty and defaults to 30.
circular_radius
Radius of circle. Radius will be the greatest value in the layout if circular_radius if not specified.
circular_radius is an NumericProperty and defaults to None.
start_from
The positon of first child in degree.
start_from is an NumericProperty and defaults to 60.
max_degree
Maximum range in degree allowed for each row of widgets before jumping to the next row.
max_degree is an NumericProperty and defaults to 360.
circular_padding
Padding between outer widgets and the edge of the biggest circle.
circular_padding is an NumericProperty and defaults to 25dp.
row_spacing
Space between each row of widget.
row_spacing is an NumericProperty and defaults to 50dp.
clockwise
Direction of widgets in circular direction.
clockwise is an BooleanProperty and defaults to True.
get_angle(self, pos: tuple)
Returns the angle of given pos.
remove_widget(self, widget, **kwargs)
Remove a widget from the children of this widget.
Parameters
widget: Widget
Widget to remove from our children list.
58 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
2.3.8 Screen
Screen class equivalent. Simplifies working with some widget properties. For example:
Screen
Screen:
canvas:
Color:
rgba: app.theme_cls.primary_color
RoundedRectangle:
pos: self.pos
size: self.size
radius: [25, 0, 0, 0]
MDScreen
MDScreen:
radius: [25, 0, 0, 0]
md_bg_color: app.theme_cls.primary_color
API - kivymd.uix.screen
2.3. Components 59
KivyMD, Release 1.2.0.dev0
2.3.9 ScreenManager
Transition
API - kivymd.uix.screenmanager
60 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
2.3.10 BoxLayout
BoxLayout class equivalent. Simplifies working with some widget properties. For example:
BoxLayout
BoxLayout:
size_hint_y: None
height: self.minimum_height
canvas:
Color:
rgba: app.theme_cls.primary_color
Rectangle:
pos: self.pos
size: self.size
MDBoxLayout
MDBoxLayout:
adaptive_height: True
md_bg_color: app.theme_cls.primary_color
• adaptive_height
• adaptive_width
• adaptive_size
adaptive_height
adaptive_height: True
Equivalent
size_hint_y: None
height: self.minimum_height
2.3. Components 61
KivyMD, Release 1.2.0.dev0
adaptive_width
adaptive_width: True
Equivalent
size_hint_x: None
height: self.minimum_width
adaptive_size
adaptive_size: True
Equivalent
API - kivymd.uix.boxlayout
2.3.11 RecycleView
RecycleView
RecycleView:
canvas:
Color:
rgba: app.theme_cls.primary_color
Rectangle:
pos: self.pos
size: self.size
62 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDRecycleView
MDRecycleView:
md_bg_color: app.theme_cls.primary_color
API - kivymd.uix.recycleview
2.3.12 StackLayout
StackLayout class equivalent. Simplifies working with some widget properties. For example:
StackLayout
StackLayout:
size_hint_y: None
height: self.minimum_height
canvas:
Color:
rgba: app.theme_cls.primary_color
Rectangle:
pos: self.pos
size: self.size
MDStackLayout
MDStackLayout:
adaptive_height: True
md_bg_color: app.theme_cls.primary_color
• adaptive_height
• adaptive_width
• adaptive_size
2.3. Components 63
KivyMD, Release 1.2.0.dev0
adaptive_height
adaptive_height: True
Equivalent
size_hint_y: None
height: self.minimum_height
adaptive_width
adaptive_width: True
Equivalent
size_hint_x: None
width: self.minimum_width
adaptive_size
adaptive_size: True
Equivalent
API - kivymd.uix.stacklayout
2.3.13 RelativeLayout
RelativeLayout class equivalent. Simplifies working with some widget properties. For example:
RelativeLayout
RelativeLayout:
canvas:
Color:
rgba: app.theme_cls.primary_color
RoundedRectangle:
pos: (0, 0)
(continues on next page)
64 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDRelativeLayout
MDRelativeLayout:
radius: [25, ]
md_bg_color: app.theme_cls.primary_color
API - kivymd.uix.relativelayout
2.3.14 Hero
Use the MDHeroFrom widget to animate a widget from one screen to the next.
2.3. Components 65
KivyMD, Release 1.2.0.dev0
Warning: MDHeroFrom container cannot have more than one child widget.
Base example
KV = '''
MDScreenManager:
MDScreen:
name: "screen A"
md_bg_color: "lightblue"
MDHeroFrom:
id: hero_from
tag: "hero"
size_hint: None, None
size: "120dp", "120dp"
pos_hint: {"top": .98}
x: 24
FitImage:
source: "kivymd/images/logo/kivymd-icon-512.png"
size_hint: None, None
size: hero_from.size
MDRaisedButton:
text: "Move Hero To Screen B"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen B"
MDScreen:
(continues on next page)
66 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDHeroTo:
id: hero_to
tag: "hero"
size_hint: None, None
size: "220dp", "220dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDRaisedButton:
text: "Move Hero To Screen A"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen A"
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Note that the child of the MDHeroFrom widget must have the size of the parent:
MDHeroFrom:
id: hero_from
tag: "hero"
FitImage:
size_hint: None, None
size: hero_from.size
To enable hero animation before setting the name of the current screen for the screen manager, you must specify the
name of the tag of the MDHeroFrom container in which the hero is located:
MDRaisedButton:
text: "Move Hero To Screen B"
on_release:
root.current_heroes = ["hero"]
root.current = "screen 2"
If you need to switch to a screen that does not contain heroes, set the current_hero attribute for the screen manager as
“” (empty string):
2.3. Components 67
KivyMD, Release 1.2.0.dev0
MDRaisedButton:
text: "Go To Another Screen"
on_release:
root.current_heroes = []
root.current = "another screen"
Example
KV = '''
MDScreenManager:
MDScreen:
name: "screen A"
md_bg_color: "lightblue"
MDHeroFrom:
id: hero_from
tag: "hero"
size_hint: None, None
size: "120dp", "120dp"
pos_hint: {"top": .98}
x: 24
FitImage:
source: "kivymd/images/logo/kivymd-icon-512.png"
size_hint: None, None
size: hero_from.size
MDRaisedButton:
text: "Move Hero To Screen B"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen B"
MDScreen:
name: "screen B"
hero_to: hero_to
md_bg_color: "cadetblue"
MDHeroTo:
id: hero_to
tag: "hero"
size_hint: None, None
size: "220dp", "220dp"
pos_hint: {"center_x": .5, "center_y": .5}
(continues on next page)
68 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDRaisedButton:
text: "Go To Screen C"
pos_hint: {"center_x": .5}
y: "52dp"
on_release:
root.current_heroes = []
root.current = "screen C"
MDRaisedButton:
text: "Move Hero To Screen A"
pos_hint: {"center_x": .5}
y: "8dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen A"
MDScreen:
name: "screen C"
MDLabel:
text: "Screen C"
halign: "center"
MDRaisedButton:
text: "Back To Screen B"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current = "screen B"
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Events
2.3. Components 69
KivyMD, Release 1.2.0.dev0
KV = '''
MDScreenManager:
MDScreen:
name: "screen A"
md_bg_color: "lightblue"
MyHero:
id: hero_from
tag: "hero"
size_hint: None, None
size: "120dp", "120dp"
pos_hint: {"top": .98}
x: 24
MDRelativeLayout:
size_hint: None, None
size: hero_from.size
md_bg_color: "blue"
radius: [24, 12, 24, 12]
FitImage:
source: "https://github.com/kivymd/internal/raw/main/logo/kivymd_
˓→logo_blue.png"
MDRaisedButton:
text: "Move Hero To Screen B"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen B"
MDScreen:
name: "screen B"
hero_to: hero_to
md_bg_color: "cadetblue"
MDHeroTo:
id: hero_to
tag: "hero"
size_hint: None, None
size: "220dp", "220dp"
(continues on next page)
70 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDRaisedButton:
text: "Move Hero To Screen A"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen A"
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
class MyHero(MDHeroFrom):
def on_transform_in(
self, instance_hero_widget: MDRelativeLayout, duration: float
):
'''
Called when the hero flies from screen **A** to screen **B**.
Animation(
radius=[12, 24, 12, 24],
duration=duration,
md_bg_color=(0, 1, 1, 1),
).start(instance_hero_widget)
def on_transform_out(
self, instance_hero_widget: MDRelativeLayout, duration: float
):
'''Called when the hero back from screen **B** to screen **A**.'''
Animation(
radius=[24, 12, 24, 12],
duration=duration,
md_bg_color=get_color_from_hex(utils.hex_colormap["blue"]),
).start(instance_hero_widget)
Test().run()
2.3. Components 71
KivyMD, Release 1.2.0.dev0
KV = '''
<HeroItem>
size_hint_y: None
height: "200dp"
radius: 24
MDSmartTile:
id: tile
radius: 24
box_radius: 0, 0, 24, 24
box_color: 0, 0, 0, .5
source: "kivymd/images/logo/kivymd-icon-512.png"
size_hint: None, None
size: root.size
mipmap: True
on_release: root.on_release()
MDLabel:
text: root.tag
bold: True
font_style: "H6"
opposite_colors: True
MDScreenManager:
MDScreen:
name: "screen A"
ScrollView:
MDGridLayout:
id: box
cols: 2
spacing: "12dp"
padding: "12dp"
adaptive_height: True
MDScreen:
name: "screen B"
heroes_to: [hero_to]
72 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDRaisedButton:
text: "Move Hero To Screen A"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = [hero_to.tag]
root.current = "screen A"
'''
class HeroItem(MDHeroFrom):
text = StringProperty()
manager = ObjectProperty()
def on_release(self):
def switch_screen(*args):
self.manager.current_heroes = [self.tag]
self.manager.ids.hero_to.tag = self.tag
self.manager.current = "screen B"
Clock.schedule_once(switch_screen, 0.2)
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
(continues on next page)
2.3. Components 73
KivyMD, Release 1.2.0.dev0
Test().run()
KV = '''
MDScreenManager:
MDScreen:
name: "screen A"
md_bg_color: "lightblue"
MDHeroFrom:
id: hero_kivymd
tag: "kivymd"
size_hint: None, None
size: "200dp", "200dp"
pos_hint: {"top": .98}
x: 24
FitImage:
source: "kivymd/images/logo/kivymd-icon-512.png"
size_hint: None, None
size: hero_kivymd.size
MDHeroFrom:
id: hero_kivy
tag: "kivy"
size_hint: None, None
size: "200dp", "200dp"
pos_hint: {"top": .98}
x: 324
FitImage:
source: "data/logo/kivy-icon-512.png"
size_hint: None, None
(continues on next page)
74 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDRaisedButton:
text: "Move Hero To Screen B"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["kivymd", "kivy"]
root.current = "screen B"
MDScreen:
name: "screen B"
heroes_to: hero_to_kivymd, hero_to_kivy
md_bg_color: "cadetblue"
MDHeroTo:
id: hero_to_kivy
tag: "kivy"
size_hint: None, None
pos_hint: {"center_x": .5, "center_y": .5}
MDHeroTo:
id: hero_to_kivymd
tag: "kivymd"
size_hint: None, None
pos_hint: {"right": 1, "top": 1}
MDRaisedButton:
text: "Move Hero To Screen A"
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["kivy", "kivymd"]
root.current = "screen A"
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
2.3. Components 75
KivyMD, Release 1.2.0.dev0
API - kivymd.uix.hero
class kivymd.uix.hero.MDHeroFrom(**kwargs)
The container from which the hero begins his flight.
For more information, see in the MDBoxLayout class documentation.
Events
on_transform_in
when the hero flies from screen A to screen B.
on_transform_out
Called when the hero back from screen B to screen A.
tag
Tag ID for heroes.
tag is an StringProperty and defaults to ‘’.
on_transform_in(self, *args)
Called when the hero flies from screen A to screen B.
on_transform_out(self, *args)
Called when the hero back from screen B to screen A.
class kivymd.uix.hero.MDHeroTo(*args, **kwargs)
The container in which the hero comes.
For more information, see in the MDBoxLayout class documentation.
tag
Tag ID for heroes.
tag is an StringProperty and defaults to ‘’.
2.3.15 GridLayout
GridLayout class equivalent. Simplifies working with some widget properties. For example:
GridLayout
GridLayout:
size_hint_y: None
height: self.minimum_height
canvas:
Color:
rgba: app.theme_cls.primary_color
Rectangle:
pos: self.pos
size: self.size
76 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDGridLayout
MDGridLayout:
adaptive_height: True
md_bg_color: app.theme_cls.primary_color
• adaptive_height
• adaptive_width
• adaptive_size
adaptive_height
adaptive_height: True
Equivalent
size_hint_y: None
height: self.minimum_height
adaptive_width
adaptive_width: True
Equivalent
size_hint_x: None
width: self.minimum_width
adaptive_size
adaptive_size: True
Equivalent
2.3. Components 77
KivyMD, Release 1.2.0.dev0
API - kivymd.uix.gridlayout
2.3.16 Carousel
Carousel class equivalent. Simplifies working with some widget properties. For example:
Carousel
kv='''
YourCarousel:
BoxLayout:
[...]
BoxLayout:
[...]
BoxLayout:
[...]
'''
builder.load_string(kv)
class YourCarousel(Carousel):
def __init__(self,*kwargs):
self.register_event_type("on_slide_progress")
self.register_event_type("on_slide_complete")
MDCarousel
MDCarousel:
on_slide_progress:
do_something()
on_slide_complete:
do_something()
78 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
API - kivymd.uix.carousel
2.3.17 FloatLayout
FloatLayout class equivalent. Simplifies working with some widget properties. For example:
FloatLayout
FloatLayout:
canvas:
Color:
rgba: app.theme_cls.primary_color
RoundedRectangle:
pos: self.pos
size: self.size
radius: [25, 0, 0, 0]
2.3. Components 79
KivyMD, Release 1.2.0.dev0
MDFloatLayout
MDFloatLayout:
radius: [25, 0, 0, 0]
md_bg_color: app.theme_cls.primary_color
Warning: For a FloatLayout, the minimum_size attributes are always 0, so you cannot use adaptive_size
and related options.
API - kivymd.uix.floatlayout
2.3.18 ImageList
See also:
Material Design spec, Image lists
80 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
Usage
KV = '''
MDScreen:
MDSmartTile:
radius: 24
box_radius: [0, 0, 24, 24]
box_color: 1, 1, 1, .2
source: "cats.jpg"
pos_hint: {"center_x": .5, "center_y": .5}
size_hint: None, None
size: "320dp", "320dp"
MDIconButton:
icon: "heart-outline"
theme_icon_color: "Custom"
icon_color: 1, 0, 0, 1
pos_hint: {"center_y": .5}
on_release: self.icon = "heart" if self.icon == "heart-outline" else "heart-
˓→outline"
MDLabel:
text: "Julia and Julie"
bold: True
color: 1, 1, 1, 1
'''
class MyApp(MDApp):
def build(self):
return Builder.load_string(KV)
MyApp().run()
2.3. Components 81
KivyMD, Release 1.2.0.dev0
Implementation
API - kivymd.uix.imagelist.imagelist
MDSmartTile:
radius: 24
box_radius: [0, 0, 24, 24]
82 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDSmartTile:
radius: 24
box_radius: [0, 0, 24, 24]
box_color: 0, 1, 0, .5
2.3. Components 83
KivyMD, Release 1.2.0.dev0
MDSmartTile:
radius: 24
box_radius: [24, 24, 0, 0]
box_position: "header"
84 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDSmartTile:
radius: [24, 24, 0, 0]
box_radius: [0, 0, 24, 24]
overlap: False
2.3. Components 85
KivyMD, Release 1.2.0.dev0
MDSmartTile:
radius: 24
box_radius: [0, 0, 24, 24]
lines: 2
source: "cats.jpg"
pos_hint: {"center_x": .5, "center_y": .5}
size_hint: None, None
size: "320dp", "320dp"
MDIconButton:
icon: "heart-outline"
theme_icon_color: "Custom"
icon_color: 1, 0, 0, 1
pos_hint: {"center_y": .5}
on_release: self.icon = "heart" if self.icon == "heart-outline" else
˓→"heart-outline"
TwoLineListItem:
text: "[color=#ffffff][b]My cats[/b][/color]"
secondary_text: "[color=#808080][b]Julia and Julie[/b][/color]"
pos_hint: {"center_y": .5}
(continues on next page)
86 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
2.3. Components 87
KivyMD, Release 1.2.0.dev0
2.3.19 RefreshLayout
Example
Builder.load_string('''
<ItemForList>
text: root.text
IconLeftSampleWidget:
icon: root.icon
<Example@MDFloatLayout>
MDBoxLayout:
orientation: 'vertical'
88 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
MDScrollViewRefreshLayout:
id: refresh_layout
refresh_callback: app.refresh_callback
root_layout: root
spinner_color: "brown"
circle_color: "white"
MDGridLayout:
id: box
adaptive_height: True
cols: 1
''')
class ItemForList(OneLineIconListItem):
icon = StringProperty()
class Example(MDApp):
title = 'Example Refresh Layout'
screen = None
x = 0
y = 15
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
self.screen = Factory.Example()
self.set_list()
return self.screen
def set_list(self):
async def set_list():
names_icons_list = list(md_icons.keys())[self.x:self.y]
for name_icon in names_icons_list:
await asynckivy.sleep(0)
self.screen.ids.box.add_widget(
ItemForList(icon=name_icon, text=name_icon))
asynckivy.start(set_list())
2.3. Components 89
KivyMD, Release 1.2.0.dev0
def refresh_callback(interval):
self.screen.ids.box.clear_widgets()
if self.x == 0:
self.x, self.y = 15, 30
else:
self.x, self.y = 0, 15
self.set_list()
self.screen.ids.refresh_layout.refresh_done()
self.tick = 0
Clock.schedule_once(refresh_callback, 1)
Example().run()
API - kivymd.uix.refreshlayout.refreshlayout
90 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
2.3.20 DataTables
See also:
Material Design spec, DataTables
2.3. Components 91
KivyMD, Release 1.2.0.dev0
Note: MDDataTable allows developers to sort the data provided by column. This happens thanks to the use of an
external function that you can bind while you’re defining the table columns. Be aware that the sorting function must
return a 2 value list in the format of:
[Index, Sorted_Row_Data]
This is because the index list is needed to allow MDDataTable to keep track of the selected rows. and, after the data is
sorted, update the row checkboxes.
API - kivymd.uix.datatables.datatables
class kivymd.uix.datatables.datatables.MDDataTable(**kwargs)
Datatable class.
For more information, see in the ThemableBehavior and AnchorLayout classes documentation.
Events
on_row_press
Called when a table row is clicked.
on_check_press
Called when the check box in the table row is checked.
class Example(MDApp):
def build(self):
self.data_tables = MDDataTable(
use_pagination=True,
check=True,
column_data=[
("No.", dp(30)),
("Status", dp(30)),
("Signal Name", dp(60), self.sort_on_signal),
("Severity", dp(30)),
("Stage", dp(30)),
("Schedule", dp(30), self.sort_on_schedule),
("Team Lead", dp(30), self.sort_on_team),
],
row_data=[
(
"1",
("alert", [255 / 256, 165 / 256, 0, 1], "No Signal"),
"Astrid: NE shared managed",
(continues on next page)
92 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
2.3. Components 93
KivyMD, Release 1.2.0.dev0
print(instance_table, instance_row)
print(instance_table, current_row)
# Sorting Methods:
# since the https://github.com/kivymd/KivyMD/pull/914 request, the
# sorting method requires you to sort out the indexes of each data value
# for the support of selections.
#
# The most common method to do this is with the use of the builtin function
# zip and enumerate, see the example below for more info.
#
# The result given by these funcitons must be a list in the format of
# [Indexes, Sorted_Row_Data]
94 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
Example().run()
column_data
Data for header columns.
Imperative python style
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
layout = AnchorLayout()
self.data_tables = MDDataTable(
size_hint=(0.7, 0.6),
use_pagination=True,
check=True,
# name column, width column, sorting function column(optional),␣
˓→custom tooltip
column_data=[
("No.", dp(30), None, "Custom tooltip"),
("Status", dp(30)),
("Signal Name", dp(60)),
("Severity", dp(30)),
("Stage", dp(30)),
("Schedule", dp(30), lambda *args: print("Sorted using Schedule
˓→")),
Example().run()
2.3. Components 95
KivyMD, Release 1.2.0.dev0
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return MDAnchorLayout(
MDDataTable(
size_hint=(0.7, 0.6),
use_pagination=True,
check=True,
# name column, width column, sorting function column(optional)
column_data=[
("No.", dp(30)),
("Status", dp(30)),
("Signal Name", dp(60)),
("Severity", dp(30)),
("Stage", dp(30)),
("Schedule", dp(30),
lambda *args: print("Sorted using Schedule")),
("Team Lead", dp(30)),
],
)
)
Example().run()
Note: The functions which will be called for sorting must accept a data argument and return the sorted
data. Incoming data format will be similar to the provided row_data except that it’ll be all list instead of
tuple like below. Any icon provided initially will also be there in this data so handle accordingly.
[
(continues on next page)
96 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
You must sort inner lists in ascending order and return the sorted data in the same format.
row_data
Data for rows. To add icon in addition to a row data, include a tuple with This property stores the row
data used to display each row in the DataTable To show an icon inside a column in a row, use the folowing
2.3. Components 97
KivyMD, Release 1.2.0.dev0
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
layout = AnchorLayout()
data_tables = MDDataTable(
size_hint=(0.9, 0.6),
column_data=[
("Column 1", dp(20)),
("Column 2", dp(30)),
("Column 3", dp(50), self.sort_on_col_3),
("Column 4", dp(30)),
("Column 5", dp(30)),
("Column 6", dp(30)),
("Column 7", dp(30), self.sort_on_col_2),
],
row_data=[
# The number of elements must match the length
# of the `column_data` list.
(
"1",
("alert", [255 / 256, 165 / 256, 0, 1], "No Signal"),
"Astrid: NE shared managed",
"Medium",
"Triaged",
"0:33",
"Chase Nguyen",
),
(
"2",
("alert-circle", [1, 0, 0, 1], "Offline"),
"Cosmo: prod shared ares",
"Huge",
"Triaged",
"0:39",
"Brie Furman",
),
(continues on next page)
98 Chapter 2. Contents
KivyMD, Release 1.2.0.dev0
2.3. Components 99
KivyMD, Release 1.2.0.dev0
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
layout = AnchorLayout()
data_tables = MDDataTable(
size_hint=(0.9, 0.6),
use_pagination=True,
column_data=[
("No.", dp(30)),
("Column 1", dp(30)),
("Column 2", dp(30)),
("Column 3", dp(30)),
("Column 4", dp(30)),
("Column 5", dp(30)),
],
row_data=[
(f"{i + 1}", "1", "2", "3", "4", "5") for i in range(50)
],
)
layout.add_widget(data_tables)
return layout
Example().run()
rows_num
The number of rows displayed on one page of the table.
Center
Auto
240dp
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
layout = AnchorLayout()
data_tables = MDDataTable(
size_hint=(0.9, 0.6),
use_pagination=True,
column_data=[
("No.", dp(30)),
("Column 1", dp(30)),
("[color=#52251B]Column 2[/color]", dp(30)),
("Column 3", dp(30)),
("[size=24][color=#C042B8]Column 4[/color][/size]", dp(30)),
("Column 5", dp(30)),
],
row_data=[
(
f"{i + 1}",
"[color=#297B50]1[/color]",
"[color=#C552A1]2[/color]",
"[color=#6C9331]3[/color]",
"4",
"5",
)
for i in range(50)
],
)
layout.add_widget(data_tables)
return layout
Example().run()
self.data_tables = MDDataTable(
...,
background_color_header="#65275d",
)
self.data_tables = MDDataTable(
...,
background_color_header="#65275d",
background_color_cell="#451938",
)
self.data_tables = MDDataTable(
...,
background_color_header="#65275d",
background_color_cell="#451938",
background_color_selected_cell="e4514f",
)
Remember that this is a heavy function. since the whole data set must be updated. you can get better results
calling this metod with in a coroutine.
add_row(self, data: list | tuple)
Added new row to common table. Argument data is the row data from the list row_data.
Add/remove row
class Example(MDApp):
data_tables = None
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
# Create a table.
self.data_tables = MDDataTable(
pos_hint={"center_y": 0.5, "center_x": 0.5},
size_hint=(0.9, 0.6),
use_pagination=False,
column_data=[
("No.", dp(30)),
("Column 1", dp(40)),
("Column 2", dp(40)),
("Column 3", dp(40)),
],
row_data=[("1", "1", "2", "3")],
(continues on next page)
return layout
try:
{
"Add row": self.add_row,
"Remove row": self.remove_row,
}[instance_button.text]()
except KeyError:
pass
Example().run()
KV = '''
MDBoxLayout:
orientation: "vertical"
padding: "56dp"
spacing: "24dp"
MDData:
id: table_screen
class MDData(MDScreen):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.data = [
["1", "Asep Sudrajat", "Male", "Soccer"],
["2", "Egy", "Male", "Soccer"],
["3", "Tanos", "Demon", "Soccer"],
]
self.data_tables = MDDataTable(
use_pagination=True,
check=True,
column_data=[
("No", dp(30)),
("No Urut.", dp(30)),
("Alamat Pengirim", dp(30)),
("No Surat", dp(60)),
]
)
self.data_tables.row_data = self.data
self.add_widget(self.data_tables)
def delete_checked_rows(self):
def deselect_rows(*args):
self.data_tables.table_data.select_all("normal")
Clock.schedule_once(deselect_rows)
class MyApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
MyApp().run()
Update row
class Example(MDApp):
data_tables = None
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
layout = MDFloatLayout()
layout.add_widget(
MDRaisedButton(
text="Change 2 row",
pos_hint={"center_x": 0.5},
on_release=self.update_row,
y=24,
)
)
self.data_tables = MDDataTable(
pos_hint={"center_y": 0.5, "center_x": 0.5},
size_hint=(0.9, 0.6),
use_pagination=False,
column_data=[
("No.", dp(30)),
("Column 1", dp(40)),
("Column 2", dp(40)),
("Column 3", dp(40)),
],
row_data=[(f"{i + 1}", "1", "2", "3") for i in range(3)],
)
layout.add_widget(self.data_tables)
return layout
Example().run()
2.3.21 Slider
See also:
Material Design spec, Sliders
API - kivymd.uix.slider.slider
class kivymd.uix.slider.slider.MDSlider(**kwargs)
Class for creating a Slider widget. See in the Slider class documentation.
active
If the slider is clicked.
active is an BooleanProperty and defaults to False.
color
Color slider in (r, g, b, a) or string format.
MDSlider
color: "red"
MDSlider
hint: True
MDSlider
hint: True
hint_bg_color: "red"
MDSlider
hint: True
hint_bg_color: "red"
hint_text_color: "white"
MDSlider
hint: True
hint_bg_color: "red"
hint_text_color: "white"
hint_radius: [6, 0, 6, 0]
MDSlider
thumb_color_active: "red"
MDSlider
thumb_color_inactive: "red"
MDSlider
value: 55
disabled: True
thumb_color_disabled: "red"
MDSlider
track_color_active: "red"
MDSlider
track_color_inactive: "red"
track_color_disabled
The color in (r, g, b, a) or string format of the track when the slider is in the disabled state.
New in version 1.0.0.
MDSlider
disabled: True
track_color_disabled: "red"
on_value_normalized(self, *args)
When the value == min set it to ‘off’ state and make slider a ring.
on_show_off(self, *args)
on__is_off(self, *args)
on_active(self, *args)
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.
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_up(self, touch)
Receive a touch up event. The touch is in parent coordinates.
See on_touch_down() for more information.
2.3.22 Button
See also:
Material Design spec, Buttons
Material Design spec, Buttons: floating action button
Buttons allow users to take actions, and make choices, with a single tap.
MDIconButton
Declarative KV style
KV = '''
MDScreen:
MDIconButton:
icon: "language-python"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDIconButton(
icon="language-python",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
)
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: "kivymd/images/logo/kivymd-icon-256.png"
By default, MDIconButton button has a size (dp(48), dp (48)). Use icon_size attribute to resize the button:
MDIconButton:
icon: "android"
icon_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, substituting theme_icon_color for theme_text_color
and icon_color for text_color.
MDIconButton:
icon: "android"
theme_icon_color: "Custom"
icon_color: app.theme_cls.primary_color
MDFloatingActionButton
MDFloatingActionButton:
icon: "android"
md_bg_color: app.theme_cls.primary_color
KV = '''
MDScreen:
md_bg_color: "#f7f2fa"
MDBoxLayout:
id: box
spacing: "56dp"
adaptive_size: True
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
self.theme_cls.material_style = "M3"
return Builder.load_string(KV)
def on_start(self):
data = {
"standard": {"md_bg_color": "#fefbff", "text_color": "#6851a5"},
"small": {"md_bg_color": "#e9dff7", "text_color": "#211c29"},
"large": {"md_bg_color": "#f8d7e3", "text_color": "#311021"},
}
for type_button in data.keys():
self.root.ids.box.add_widget(
MDFloatingActionButton(
icon="pencil",
type=type_button,
theme_icon_color="Custom",
md_bg_color=data[type_button]["md_bg_color"],
icon_color=data[type_button]["text_color"],
)
)
Example().run()
MDFlatButton
To change the text color of: class:~MDFlatButton use the text_color parameter:
MDFlatButton:
text: "MDFlatButton"
theme_text_color: "Custom"
text_color: "orange"
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: "red"
MDRectangleFlatButton
MDRectangleFlatButton:
text: "MDRectangleFlatButton"
theme_text_color: "Custom"
text_color: "white"
line_color: "red"
MDRectangleFlatIconButton
Button parameters MDRectangleFlatIconButton are the same as button MDRectangleFlatButton, with the ad-
dition of the theme_icon_color and icon_color parameters as for MDIconButton.
MDRectangleFlatIconButton:
icon: "android"
text: "MDRectangleFlatIconButton"
theme_text_color: "Custom"
text_color: "white"
line_color: "red"
theme_icon_color: "Custom"
icon_color: "orange"
Without border
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDRectangleFlatIconButton(
text="MDRectangleFlatIconButton",
icon="language-python",
line_color=(0, 0, 0, 0),
pos_hint={"center_x": .5, "center_y": .5},
)
)
)
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: "white"
MDRoundFlatIconButton
Button parameters MDRoundFlatIconButton are the same as button MDRoundFlatButton, with the addition of the
theme_icon_color and icon_color parameters as for MDIconButton:
MDRoundFlatIconButton:
text: "MDRoundFlatIconButton"
icon: "android"
text_color: "white"
MDFillRoundFlatButton
MDFillRoundFlatIconButton
Button parameters MDFillRoundFlatIconButton are the same as button MDRaisedButton, with the addition of the
theme_icon_color and icon_color parameters as for MDIconButton.
Note: Notice that the width of the MDFillRoundFlatIconButton button matches the size of the button text.
MDTextButton
MDTextButton:
text: "MDTextButton"
custom_color: "white"
MDFloatingActionButtonSpeedDial
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):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Or without KV Language:
Imperative python style
class Example(MDApp):
data = {
'Python': 'language-python',
'PHP': 'language-php',
'C++': 'language-cpp',
}
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
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()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDFloatingActionButtonSpeedDial(
data={
'Python': 'language-python',
'PHP': 'language-php',
'C++': 'language-cpp',
},
root_button_anim=True,
(continues on next page)
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:
hint_animation: True
bg_hint_color: app.theme_cls.primary_dark
Declarative KV style
KV = '''
MDScreen:
MDFloatingActionButtonSpeedDial:
id: speed_dial
data: app.data
root_button_anim: True
(continues on next page)
class Example(MDApp):
data = DictProperty()
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
self.data = {
'Python': 'language-python',
'JS': [
'language-javascript',
"on_press", lambda x: print("pressed JS"),
"on_release", lambda x: print(
"stack_buttons",
self.root.ids.speed_dial.stack_buttons
)
],
'PHP': [
'language-php',
"on_press", lambda x: print("pressed PHP"),
"on_release", self.callback
],
'C++': [
'language-cpp',
"on_press", lambda x: print("pressed C++"),
"on_release", lambda x: self.callback()
],
}
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
(continues on next page)
def on_start(self):
data = {
"Python": "language-python",
"JS": [
"language-javascript",
"on_press", lambda x: print("pressed JS"),
"on_release", lambda x: print(
"stack_buttons",
self.root.ids.speed_dial.stack_buttons
)
],
"PHP": [
"language-php",
"on_press", lambda x: print("pressed PHP"),
"on_release", self.callback
],
"C++": [
"language-cpp",
"on_press", lambda x: print("pressed C++"),
"on_release", lambda x: self.callback()
],
}
self.root.ids.speed_dial.data = data
Example().run()
API - kivymd.uix.button.button
font_size
Button text font size.
font_size is a NumericProperty and defaults to 14sp.
icon_size
Icon font size. Use this parameter as the font size, that is, in sp units.
New in version 1.0.0.
icon_size is a NumericProperty and defaults to None.
line_width
Line width for button border.
line_width is a NumericProperty and defaults to 1.
line_color
Line color in (r, g, b, a) or string format for button border.
line_color is a ColorProperty and defaults to None.
line_color_disabled
Disabled line color in (r, g, b, a) or string format for button border.
New in version 1.0.0.
line_color_disabled is a ColorProperty and defaults to None.
md_bg_color
Button background color in (r, g, b, a) or string format.
md_bg_color is a ColorProperty and defaults to None.
md_bg_color_disabled
The background color in (r, g, b, a) or string format of the button when the button is disabled.
md_bg_color_disabled is a ColorProperty and defaults to None.
disabled_color
The color of the text and icon when the button is disabled, in (r, g, b, a) or string format.
New in version 1.0.0.
disabled_color is a ColorProperty and defaults to None.
rounded_button
Should the button have fully rounded corners (e.g. like M3 buttons)?
New in version 1.0.0.
rounded_button is a BooleanProperty and defaults to False.
set_disabled_color(self, *args)
Sets the color for the icon, text and line of the button when button is disabled.
set_all_colors(self, *args)
Set all button colours.
set_button_colors(self, *args)
Set all button colours (except text/icons).
set_text_color(self, *args)
Set _theme_text_color and _text_color based on defaults and options.
set_icon_color(self, *args)
Set _theme_icon_color and _icon_color based on defaults and options.
set_radius(self, *args)
Set the radius, if we are a rounded button, based on the current height.
on_touch_down(self, touch)
Animates fade to background on press, for buttons with no background color.
on_touch_up(self, touch)
Animates return to original background on touch release.
on_disabled(self, instance_button, disabled_value: bool)
set__radius(self, *args)
set_size_and_radius(self, *args)
set_size(self, *args)
class kivymd.uix.button.button.MDTextButton(**kwargs)
Text button class.
For more information, see in the ButtonBehavior and MDLabel classes documentation.
color
Button color in (r, g, b, a) or string format.
color is a ColorProperty and defaults to None.
color_disabled
Button color disabled in (r, g, b, a) or string format.
color_disabled is a ColorProperty and defaults to None.
animation_label(self )
on_press(self, *args)
class kivymd.uix.button.button.MDFloatingActionButtonSpeedDial(**kwargs)
For more information, see in the FloatLayout class documentation.
For more information, see in the DeclarativeBehavior and ThemableBehavior and FloatLayout lasses
documentation.
Events
on_open
Called when a stack is opened.
on_close
Called when a stack is closed.
on_press_stack_button
Called at the on_press event for the stack button.
on_release_stack_button
Called at the on_press event for the stack button.
icon
Root button icon name.
MDFloatingActionButtonSpeedDial:
icon: "pencil"
MDFloatingActionButtonSpeedDial:
label_text_color: "orange"
MDFloatingActionButtonSpeedDial:
label_text_color: "black"
label_bg_color: "orange"
MDFloatingActionButtonSpeedDial:
label_text_color: "black"
label_bg_color: "orange"
{
'name-icon': 'Text label',
...,
...,
}
right_pad
If True, the background for the floating text label will increase by the number of pixels specified in the
right_pad_value parameter.
Works only if the hint_animation parameter is set to True.
False
MDFloatingActionButtonSpeedDial:
hint_animation: True
right_pad: False
True
MDFloatingActionButtonSpeedDial:
hint_animation: True
right_pad: True
right_pad_value: "10dp"
state
Indicates whether the stack is closed or open. Available options are: ‘close’, ‘open’.
state is a OptionProperty and defaults to ‘close’.
bg_color_root_button
Background color of root button in (r, g, b, a) or string format.
MDFloatingActionButtonSpeedDial:
bg_color_root_button: "red"
MDFloatingActionButtonSpeedDial:
bg_color_root_button: "red"
bg_color_stack_button: "red"
MDFloatingActionButtonSpeedDial:
bg_color_root_button: "red"
(continues on next page)
MDFloatingActionButtonSpeedDial:
bg_color_root_button: "red"
bg_color_stack_button: "red"
color_icon_stack_button: "white"
color_icon_root_button: self.color_icon_stack_button
MDFloatingActionButtonSpeedDial:
bg_hint_color: "red"
hint_animation: True
on_open(self, *args)
Called when a stack is opened.
on_close(self, *args)
Called when a stack is closed.
on_leave(self, instance_button: MDFloatingBottomButton)
Called when the mouse cursor goes outside the button of stack.
on_enter(self, instance_button: MDFloatingBottomButton)
Called when the mouse cursor is over a button from the stack.
on_data(self, instance_speed_dial, data: dict)
Creates a stack of buttons.
on_icon(self, instance_speed_dial, name_icon: str)
on_press_stack_button(self, *args)
Called at the on_press event for the stack button.
MDFloatingActionButtonSpeedDial:
on_press_stack_button: print(*args)
MDFloatingActionButtonSpeedDial:
on_release_stack_button: print(*args)
Parameters
anim_data –
{
<kivymd.uix.button.MDFloatingBottomButton object>:
<kivy.animation.Animation>,
<kivymd.uix.button.MDFloatingBottomButton object>:
<kivy.animation.Animation object>,
...,
}
close_stack(self )
Closes the button stack.
2.3.23 BottomSheet
See also:
Material Design spec, Sheets: bottom
Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of
the screen.
Usage
MDScreen:
[ Content screen ]
MDBottomSheet:
Standard
Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting
with both regions, especially when the main UI region is frequently scrolled or panned.
Use a standard bottom sheet to display content that complements the screen’s primary content, such as an audio player
in a music app.
Standard bottom sheets are elevated above the main UI region so their visibility is not affected by panning or scrolling.
Declarative KV style
KV = '''
MDScreen:
MDBoxLayout:
orientation: "vertical"
padding: "12dp"
adaptive_height: True
pos_hint: {"top": 1}
MDSmartTile:
id: smart_tile
source: "https://picsum.photos/id/70/3011/2000"
radius: 16
box_radius: [0, 0, 16, 16]
size_hint_y: None
height: "240dp"
on_release:
bottom_sheet.open() \
if bottom_sheet.state == "close" else \
bottom_sheet.dismiss()
MDLabel:
bold: True
color: 1, 1, 1, 1
text:
"Tap to open the bottom sheet" \
if bottom_sheet.state == "close" else \
"Tap to close the bottom sheet"
MDBottomSheet:
id: bottom_sheet
type: "standard"
bg_color: "grey"
default_opening_height: smart_tile.y - dp(12)
size_hint_y: None
height: root.height - (smart_tile.height + dp(24))
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return MDScreen(
MDBoxLayout(
MDSmartTile(
MDLabel(
id="tile_label",
text="Tap to open the bottom sheet",
bold=True,
color=(1, 1, 1, 1),
),
id="smart_tile",
source="https://picsum.photos/id/70/3011/2000",
radius=16,
box_radius=[0, 0, 16, 16],
size_hint_y=None,
height="240dp",
),
id="box",
orientation="vertical",
padding="12dp",
pos_hint={"top": 1},
adaptive_height=True,
),
MDBottomSheet(
id="bottom_sheet",
size_hint_y=None,
type="standard",
bg_color="grey",
),
)
def on_start(self):
def on_start(*args):
bottom_sheet = self.root.ids.bottom_sheet
smart_tile = self.root.ids.box.ids.smart_tile
bottom_sheet.default_opening_height = smart_tile.y - dp(12)
bottom_sheet.height = self.root.height - (
smart_tile.height + dp(24)
)
smart_tile.bind(on_release=lambda x: self.open_bottom_sheet())
Clock.schedule_once(on_start, 1.2)
Example().run()
Modal
Like dialogs, modal bottom sheets appear in front of app content, disabling all other app functionality when they appear,
and remaining on screen until confirmed, dismissed, or a required action has been taken.
Declarative KV style
KV = '''
MDScreen:
MDBoxLayout:
orientation: "vertical"
padding: "12dp"
adaptive_height: True
pos_hint: {"top": 1}
MDSmartTile:
id: smart_tile
source: "https://picsum.photos/id/70/3011/2000"
radius: 16
box_radius: [0, 0, 16, 16]
size_hint_y: None
height: "240dp"
on_release: bottom_sheet.open()
MDLabel:
bold: True
color: 1, 1, 1, 1
text: "Tap to open the modal bottom sheet"
MDBottomSheet:
id: bottom_sheet
bg_color: "grey"
default_opening_height: smart_tile.y - dp(12)
size_hint_y: None
height: root.height - (smart_tile.height + dp(24))
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return MDScreen(
MDBoxLayout(
MDSmartTile(
MDLabel(
id="tile_label",
text="Tap to open the modal bottom sheet",
bold=True,
color=(1, 1, 1, 1),
),
id="smart_tile",
source="https://picsum.photos/id/70/3011/2000",
radius=16,
box_radius=[0, 0, 16, 16],
size_hint_y=None,
height="240dp",
),
id="box",
orientation="vertical",
padding="12dp",
pos_hint={"top": 1},
adaptive_height=True,
),
MDBottomSheet(
id="bottom_sheet",
size_hint_y=None,
bg_color="grey",
),
)
def on_start(self):
def on_start(*args):
bottom_sheet = self.root.ids.bottom_sheet
smart_tile = self.root.ids.box.ids.smart_tile
bottom_sheet.default_opening_height = smart_tile.y - dp(12)
bottom_sheet.height = self.root.height - (
smart_tile.height + dp(24)
)
(continues on next page)
Clock.schedule_once(on_start, 1.2)
Example().run()
Custom positioning
The optional drag handle provides an affordance for custom sheet height, or for a quick toggle through preset heights.
MDBottomSheet:
MDBottomSheetDragHandle:
By default, when you drag and then release the drag handle, the bottom sheet will be closed or expand to the full screen,
depending on whether you released the drag handle closer to the top or to the bottom of the screen:
In order to manually adjust the height of the bottom sheet with the drag handle, set the auto_positioning parameter to
False:
MDBottomSheet:
auto_positioning: False
MDBottomSheetDragHandle:
MDBottomSheet:
MDBottomSheetDragHandle:
MDBottomSheetDragHandleTitle:
text: "MDBottomSheet"
adaptive_height: True
font_style: "H6"
pos_hint: {"center_y": .5}
MDBottomSheetDragHandleButton:
icon: "close"
To add custom content to the bottom sheet, use the MDBottomSheetContent class:
MDBottomSheet:
bg_color: "darkgrey"
type: "standard"
max_opening_height: self.height
default_opening_height: self.max_opening_height
adaptive_height: True
MDBottomSheetDragHandle:
drag_handle_color: "grey"
MDBottomSheetContent:
padding: "16dp"
MDLabel:
text: "Content"
(continues on next page)
KV = '''
#:import MapSource kivy_garden.mapview.MapSource
#:import asynckivy kivymd.utils.asynckivy
<TypeMapElement>
orientation: "vertical"
adaptive_height: True
spacing: "8dp"
MDIconButton:
id: icon
icon: root.icon
md_bg_color: "#EDF1F9" if not root.selected else app.theme_cls.primary_color
pos_hint: {"center_x": .5}
theme_icon_color: "Custom"
icon_color: "white" if root.selected else "black"
on_release: app.set_active_element(root, root.title.lower())
MDLabel:
font_size: "14sp"
text: root.title
pos_hint: {"center_x": .5}
halign: "center"
adaptive_height: True
MDScreen:
CustomMapView:
bottom_sheet: bottom_sheet
map_source: MapSource(url=app.map_sources[app.current_map])
lat: 46.5124
lon: 47.9812
zoom: 12
MDBottomSheet:
id: bottom_sheet
elevation: 2
shadow_softness: 6
bg_color: "white"
type: "standard"
max_opening_height: self.height
default_opening_height: self.max_opening_height
adaptive_height: True
on_open: asynckivy.start(app.generate_content())
MDBottomSheetDragHandle:
drag_handle_color: "grey"
MDBottomSheetDragHandleTitle:
text: "Select type map"
adaptive_height: True
bold: True
pos_hint: {"center_y": .5}
MDBottomSheetDragHandleButton:
icon: "close"
_no_ripple_effect: True
on_release: bottom_sheet.dismiss()
MDBottomSheetContent:
id: content_container
padding: 0, 0, 0, "16dp"
'''
class TypeMapElement(MDBoxLayout):
selected = BooleanProperty(False)
icon = StringProperty()
title = StringProperty()
class Example(MDApp):
map_sources = {
"street": "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
"sputnik": "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
"hybrid": "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
}
current_map = StringProperty("street")
def build(self):
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.bottomsheet.bottomsheet
MDBottomSheet:
MDBottomSheetDragHandle:
drag_handle_color: "white"
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
max_opening_height
The maximum height a that the bottom sheet can be opened using the drag handle.
New in version 1.2.0.
MDBottomSheet:
max_opening_height: "300dp"
MDBottomSheetDragHandle:
bg_color
Background color of bottom sheet in (r, g, b, a) or string format.
bg_color is an ColorProperty and defaults to None.
radius_from
Sets which corners to cut from the dialog. Available options are: “top_left”, “top_right”, “top”, “bot-
tom_right”, “bottom_left”, “bottom”.
Deprecated since version 1.2.0: Use radius instead.
radius_from is an OptionProperty and defaults to None.
value_transparent
Background color in (r, g, b, a) or string format transparency value when opening a dialog.
Deprecated since version 1.2.0.
value_transparent is an ColorProperty and defaults to [0, 0, 0, 0.8].
on_progress(self, *args)
Bottom sheet opening/closing progress event.
on_open(self, *args)
Event when opening the bottom sheet.
on_close(self, *args)
Event when closing the bottom sheet.
on_long_touch(self, touch, *args)
Called when the widget is pressed for a long time.
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.
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_up(self, touch)
Receive a touch up event. The touch is in parent coordinates.
See on_touch_down() for more information.
on_touch_move(self, touch)
Receive a touch move event. The touch is in parent coordinates.
See on_touch_down() for more information.
on_type(self, *args)
add_scrim_layer(self, *args)
Adds a scrim layer to the parent widget on which the bottom sheet will be displayed.
check_max_opening_height(self, *args)
check_parent(self, *args)
Checks the type of parent widget to which the bottom sheet will be added.
dismiss(self, *args)
Dismiss of bottom sheet.
expand(self )
Expand of bottom sheet.
open(self, *args)
Opening of bottom sheet.
clear_content(self )
Removes custom content from the bottom sheet.
add_widget(self, widget, *args, **kwargs)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
2.3.24 SliverAppbar
MDSliverAppbar is a Material Design widget in KivyMD which gives scrollable or collapsible MD-
TopAppBar
Usage
MDScreen:
MDSliverAppbar:
MDSliverAppbarHeader:
# Custom content.
...
# Custom list.
MDSliverAppbarContent:
Example
KV = '''
<CardItem>
size_hint_y: None
height: "86dp"
padding: "4dp"
radius: 12
FitImage:
source: "avatar.jpg"
radius: root.radius
size_hint_x: None
width: root.height
MDBoxLayout:
(continues on next page)
MDLabel:
text: "Title text"
font_style: "H5"
bold: True
adaptive_height: True
MDLabel:
text: "Subtitle text"
theme_text_color: "Hint"
adaptive_height: True
MDScreen:
MDSliverAppbar:
background_color: "2d4a50"
MDSliverAppbarHeader:
MDRelativeLayout:
FitImage:
source: "bg.jpg"
MDSliverAppbarContent:
id: content
orientation: "vertical"
padding: "12dp"
spacing: "12dp"
adaptive_height: True
'''
class CardItem(MDCard):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.elevation = 1
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
for x in range(10):
self.root.ids.content.add_widget(CardItem())
(continues on next page)
Example().run()
API - kivymd.uix.sliverappbar.sliverappbar
class kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbarContent(**kwargs)
Implements a box for a scrollable list of custom items.
For more information, see in the MDBoxLayout class documentation.
md_bg_color
See background_color.
md_bg_color is an ColorProperty and defaults to [0, 0, 0, 0].
set_bg_color(self, interval: int | float)
KV = '''
#:import SliverToolbar __main__.SliverToolbar
<CardItem>
size_hint_y: None
height: "86dp"
padding: "4dp"
radius: 12
FitImage:
source: "avatar.jpg"
(continues on next page)
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
spacing: "6dp"
padding: "12dp", 0, 0, 0
pos_hint: {"center_y": .5}
MDLabel:
text: "Title text"
font_style: "H5"
bold: True
adaptive_height: True
MDLabel:
text: "Subtitle text"
theme_text_color: "Hint"
adaptive_height: True
MDScreen:
MDSliverAppbar:
background_color: "2d4a50"
toolbar_cls: SliverToolbar()
MDSliverAppbarHeader:
MDRelativeLayout:
FitImage:
source: "bg.jpg"
MDSliverAppbarContent:
id: content
orientation: "vertical"
padding: "12dp"
spacing: "12dp"
adaptive_height: True
'''
class CardItem(MDCard):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.elevation = 1
class SliverToolbar(MDTopAppBar):
(continues on next page)
class Example(MDApp):
def build(self):
self.theme_cls.material_style = "M3"
return Builder.load_string(KV)
def on_start(self):
for x in range(10):
self.root.ids.content.add_widget(CardItem())
Example().run()
MDSliverAppbar:
background_color: "2d4a50"
MDSliverAppbar:
max_height: "200dp"
MDSliverAppbar:
hide_toolbar: False
MDSliverAppbar:
radius: 20
MDSliverAppbar:
max_opacity: .5
on_scroll_content(self, instance_sliverappbar: object = None, value: float = 1.0, direction: str = 'up')
Called when the list of custom content is being scrolled.
Parameters
• instance_sliverappbar – MDSliverAppbar
• value – see scroll_y
• direction – scroll direction: ‘up/down’
on_background_color(self, instance_sliver_appbar, color_value: list)
get_default_toolbar(self )
Called if no value is passed for the toolbar_cls attribute.
add_widget(self, widget, index=0, canvas=None)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
2.3.25 Backdrop
See also:
Material Design spec, Backdrop
Usage
<Root>
MDBackdrop:
MDBackdropBackLayer:
ContentForBackdropBackLayer:
MDBackdropFrontLayer:
ContentForBackdropFrontLayer:
Example
Declarative KV styles
# Your layouts.
Builder.load_string(
'''
#:import os os
#:import Window kivy.core.window.Window
#:import IconLeftWidget kivymd.uix.list.IconLeftWidget
#:import images_path kivymd.images_path
<ItemBackdropFrontLayer@TwoLineAvatarListItem>
icon: "android"
IconLeftWidget:
icon: root.icon
<MyBackdropFrontLayer@ItemBackdropFrontLayer>
backdrop: None
text: "Lower the front layer"
secondary_text: " by 50 %"
icon: "transfer-down"
on_press: root.backdrop.open(-Window.height / 2)
pos_hint: {"top": 1}
_no_ripple_effect: True
<MyBackdropBackLayer@Image>
size_hint: .8, .8
source: os.path.join(images_path, "logo", "kivymd-icon-512.png")
pos_hint: {"center_x": .5, "center_y": .6}
'''
)
MDBackdrop:
id: backdrop
left_action_items: [['menu', lambda x: self.open()]]
title: "Example Backdrop"
radius_left: "25dp"
radius_right: "0dp"
header_text: "Menu:"
MDBackdropBackLayer:
MyBackdropBackLayer:
id: backlayer
MDBackdropFrontLayer:
MyBackdropFrontLayer:
backdrop: backdrop
'''
)
class ExampleBackdrop(MDScreen):
pass
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return ExampleBackdrop()
Example().run()
import os
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDBackdrop(
MDBackdropBackLayer(
Image(
size_hint=(0.8, 0.8),
source=os.path.join(images_path, "logo", "kivymd-icon-512.png
˓→"),
pos_hint={"center_x": 0.5, "center_y": 0.6},
)
),
MDBackdropFrontLayer(
TwoLineAvatarListItem(
IconLeftWidget(icon="transfer-down"),
text="Lower the front layer",
secondary_text=" by 50 %",
on_press=self.backdrop_open_by_50_percent,
pos_hint={"top": 1},
_no_ripple_effect=True,
),
(continues on next page)
Example().run()
API - kivymd.uix.backdrop.backdrop
radius_right
The value of the rounding radius of the upper right corner of the front layer.
radius_right is an NumericProperty and defaults to 16dp.
header
Whether to use a header above the contents of the front layer.
closing_transition
The name of the animation transition type to use when animating to the state ‘close’.
New in version 1.0.0.
closing_transition is a StringProperty and defaults to ‘out_quad’.
on_open(self )
When the front layer drops.
on_close(self )
When the front layer rises.
on_left_action_items(self, instance_backdrop, menu: list)
class kivymd.uix.backdrop.backdrop.MDBackdropToolbar(**kwargs)
Implements a toolbar for back content.
For more information, see in the MDTopAppBar classes documentation.
class kivymd.uix.backdrop.backdrop.MDBackdropFrontLayer(*args, **kwargs)
Container for front content.
For more information, see in the MDBoxLayout classes documentation.
class kivymd.uix.backdrop.backdrop.MDBackdropBackLayer(*args, **kwargs)
Container for back content.
For more information, see in the MDBoxLayout class documentation.
2.3.26 Toolbar
See also:
Material Design spec, App bars: top
Material Design spec, App bars: bottom
Material Design 3 spec, App bars: top
Material Design 3 spec, App bars: bottom
TopAppBar
KV = '''
MDBoxLayout:
orientation: "vertical"
md_bg_color: "#1E1E15"
MDTopAppBar:
title: "MDTopAppBar"
MDLabel:
text: "Content"
halign: "center"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Example().run()
MDTopAppBar:
title: "MDTopAppBar"
anchor_title: "left"
left_action_items: [["menu", lambda x: app.callback()]]
Note: The callback is optional. left_action_items: [["menu"]] would also work for a button that does nothing.
MDTopAppBar:
title: "MDTopAppBar"
anchor_title: "left"
right_action_items: [["dots-vertical", lambda x: app.callback()]]
MDTopAppBar:
title: "MDTopAppBar"
anchor_title: "left"
right_action_items:
[
["dots-vertical", lambda x: app.callback_1()],
["clock", lambda x: app.callback_2()]
]
MDTopAppBar:
title: "MDTopAppBar"
anchor_title: "left"
md_bg_color: "brown"
MDTopAppBar:
title: "MDTopAppBar"
anchor_title: "left"
specific_text_color: "white"
MDTopAppBar:
title: "Elevation 4"
anchor_title: "left"
elevation: 4
shadow_color: "brown"
BottomAppBar
Usage
KV = '''
MDBoxLayout:
md_bg_color: "#1E1E15"
MDTopAppBar:
title: "MDBottomAppBar"
icon: "git"
type: "bottom"
left_action_items: [["menu", lambda x: x]]
'''
class Example(MDApp):
def build(self):
self.theme_cls.material_style = "M2"
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Example().run()
Event on_action_button:
MDBottomAppBar:
MDTopAppBar:
title: "MDBottomAppBar"
icon: "git"
type: "bottom"
left_action_items: [["menu", lambda x: x]]
on_action_button: app.callback(self.icon)
Mode:
• ’free-end’
• ’free-center’
• ’end’
• ’center’
MDBottomAppBar:
MDTopAppBar:
title: "MDBottomAppBar"
icon: "git"
type: "bottom"
left_action_items: [["menu", lambda x: x]]
mode: "end"
MDBottomAppBar:
MDTopAppBar:
title: "MDBottomAppBar"
icon: "git"
type: "bottom"
left_action_items: [["menu", lambda x: x]]
mode: "free-end"
Custom color
MDBottomAppBar:
MDTopAppBar:
title: "MDBottomAppBar"
icon: "git"
type: "bottom"
left_action_items: [["menu", lambda x: x]]
icon_color: 0, 1, 0, 1
md_bg_bottom_color: "brown"
KV = '''
MDFloatLayout:
md_bg_color: "#151511"
MDBottomAppBar:
md_bg_color: "#232217"
icon_color: "#8A8D79"
MDFabBottomAppBarButton:
icon: "plus"
md_bg_color: "#373A22"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
(continues on next page)
Example().run()
MDFloatLayout:
MDBottomAppBar:
action_items:
[
MDActionBottomAppBarButton(icon="gmail"),
MDActionBottomAppBarButton(icon="label-outline"),
MDActionBottomAppBarButton(icon="bookmark"),
]
KV = '''
#:import MDActionBottomAppBarButton kivymd.uix.toolbar.MDActionBottomAppBarButton
MDFloatLayout:
md_bg_color: "#151511"
MDBottomAppBar:
id: bottom_appbar
md_bg_color: "#232217"
icon_color: "#8A8D79"
action_items:
[
MDActionBottomAppBarButton(icon="gmail"),
MDActionBottomAppBarButton(icon="bookmark"),
]
MDFabBottomAppBarButton:
icon: "plus"
md_bg_color: "#373A22"
on_release: app.change_actions_items()
'''
class Example(MDApp):
def change_actions_items(self):
self.root.ids.bottom_appbar.action_items = [
MDActionBottomAppBarButton(icon="magnify"),
MDActionBottomAppBarButton(icon="trash-can-outline"),
MDActionBottomAppBarButton(icon="download-box-outline"),
]
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
A practical example
KV = '''
#:import MDFabBottomAppBarButton kivymd.uix.toolbar.MDFabBottomAppBarButton
<UserCard>
orientation: "vertical"
adaptive_height: True
md_bg_color: "#373A22" if self.selected else "#1F1E15"
radius: 16
padding: 0, 0, 0, "16dp"
TwoLineAvatarListItem:
divider: None
_no_ripple_effect: True
text: root.name
secondary_text: root.time
theme_text_color: "Custom"
text_color: "#8A8D79"
secondary_theme_text_color: self.theme_text_color
secondary_text_color: self.text_color
ImageLeftWidget:
source: root.avatar
radius: self.height / 2
MDLabel:
text: root.text
adaptive_height: True
theme_text_color: "Custom"
text_color: "#8A8D79"
padding_x: "16dp"
shorten: True
shorten_from: "right"
Widget:
(continues on next page)
MDFloatLayout:
md_bg_color: "#151511"
RecycleView:
id: card_list
viewclass: "UserCard"
SelectableRecycleGridLayout:
orientation: 'vertical'
spacing: "16dp"
padding: "16dp"
default_size: None, dp(120)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
multiselect: True
touch_multiselect: True
MDBottomAppBar:
id: bottom_appbar
scroll_cls: card_list
allow_hidden: True
md_bg_color: "#232217"
icon_color: "#8A8D79"
MDFabBottomAppBarButton:
id: fab_button
icon: "plus"
md_bg_color: "#373A22"
'''
index = None
selected = BooleanProperty(False)
selectable = BooleanProperty(True)
class SelectableRecycleGridLayout(
FocusBehavior, LayoutSelectionBehavior, RecycleBoxLayout
):
pass
class Test(MDApp):
selected_cards = False
def build(self):
return Builder.load_string(KV)
def on_start(self):
async def generate_card():
for i in range(10):
await asynckivy.sleep(0)
self.root.ids.card_list.data.append(
{
"name": fake.name(),
"time": fake.date(),
"avatar": fake.image_url(),
"text": fake.text(),
(continues on next page)
self.on_tap_card()
fake = Faker()
Clock.schedule_once(lambda x: asynckivy.start(generate_card()))
Test().run()
Tooltips
You can add MDTooltips to the icons by adding a text string to the bar item, as shown below:
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "MDTopAppBar"
left_action_items: [["menu", "This is the navigation"]]
right_action_items:
[
[
"dots-vertical",
lambda x: app.callback(x),
"this is the More Actions"
]
]
MDLabel:
text: "Content"
halign: "center"
'''
class Example(MDApp):
def build(self):
self.theme_cls.material_style = "M2"
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
(continues on next page)
Example().run()
KV = '''
MDScreen:
MDBoxLayout:
id: box
orientation: "vertical"
spacing: "12dp"
pos_hint: {"top": 1}
adaptive_height: True
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def on_start(self):
for type_height in ["medium", "large", "small"]:
self.root.ids.box.add_widget(
MDTopAppBar(
type_height=type_height,
headline_text=f"Headline {type_height.lower()}",
md_bg_color="brown",
left_action_items=[["arrow-left", lambda x: x]],
right_action_items=[
["attachment", lambda x: x],
["calendar", lambda x: x],
["dots-vertical", lambda x: x],
],
title="Title" if type_height == "small" else "",
anchor_title="left",
)
)
Example().run()
API - kivymd.uix.toolbar.toolbar
class kivymd.uix.toolbar.toolbar.MDTopAppBar(**kwargs)
Top app bar class.
For more information, see in the DeclarativeBehavior and NotchedBox and WindowController classes
documentation.
Events
on_action_button
Method for the button used for the MDBottomAppBar class.
left_action_items
The icons on the left of the bar. To add one, append a list like the following:
MDTopAppBar:
left_action_items:
["dots-vertical", callback, "tooltip text", "overflow text"]
MDTopAppBar:
right_action_items: [["home"]]
MDTopAppBar:
right_action_items: [["home", lambda x: app.callback(x)]]
class Test(MDApp):
def callback(self, instance_action_top_appbar_button):
print(instance_action_top_appbar_button)
MDTopAppBar:
right_action_items:
[
["home", lambda x: app.callback(x), "Home"],
["message-star", lambda x: app.callback(x), "Message star"],
["message-question", lambda x: app.callback(x), "Message question"],
["message-reply", lambda x: app.callback(x), "Message reply"],
]
overflow text - is the text for menu items (OverFlowMenuItem) of the corresponding action buttons:
MDTopAppBar:
use_overflow: True
right_action_items:
[
["home", lambda x: x, "", "Home"],
["message-star", lambda x: x, "", "Message star"],
["message-question", lambda x: x, "" , "Message question"],
["message-reply", lambda x: x, "", "Message reply"],
]
MDTopAppBar:
right_action_items:
[
[
"dots-vertical",
callback,
"tooltip text",
"overflow text",
(1, 1, 1, 1),
]
]
Both the callback and tooltip text and overflow text and icon color are optional but the order
must be preserved.
left_action_items is an ListProperty and defaults to [].
right_action_items
The icons on the left of the bar. Works the same way as left_action_items.
right_action_items is an ListProperty and defaults to [].
title
Text app bar.
MDTopAppBar:
title: "MDTopAppBar"
Mode “end”:
MDBottomAppBar:
MDTopAppBar:
title: "Title"
icon: "git"
type: "bottom"
left_action_items: [["menu", lambda x: x]]
mode: "end"
Mode “free-end”:
MDBottomAppBar:
MDTopAppBar:
mode: "free-end"
Mode “free-center”:
MDBottomAppBar:
MDTopAppBar:
mode: "free-center"
Mode “center”:
MDBottomAppBar:
MDTopAppBar:
mode: "center"
MDBottomAppBar:
MDTopAppBar:
type: "bottom"
MDTopAppBar:
opposite_colors: True
MDTopAppBar:
opposite_colors: False
md_bg_bottom_color
The background color in (r, g, b, a) or string format for the bar with the bottom mode.
New in version 1.0.0.
MDBottomAppBar:
MDTopAppBar:
md_bg_bottom_color: "brown"
icon_color: self.md_bg_bottom_color
MDTopAppBar:
title: "MDTopAppBar"
use_overflow: True
right_action_items:
[
["home", lambda x: x, "Home", "Home"],
["message-star", lambda x: x, "Message star", "Message star"],
["message-question", lambda x: x, "Message question", "Message question
˓→"],
KV = '''
#:import CustomOverFlowMenu __main__.CustomOverFlowMenu
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "MDTopAppBar"
use_overflow: True
overflow_cls: CustomOverFlowMenu()
right_action_items:
[
["home", lambda x: x, "Home", "Home"],
["message-star", lambda x: x, "Message star", "Message star"],
["message-question", lambda x: x, "Message question", "Message␣
˓→question"],
MDLabel:
text: "Content"
halign: "center"
'''
class CustomOverFlowMenu(MDDropdownMenu):
# In this class you can set custom properties for the overflow menu.
pass
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
icon_color
Color in (r, g, b, a) or string format action button. Only for MDBottomAppBar class.
icon_color is an ColorProperty and defaults to [].
anchor_title
Position bar title. Only used with material_style = ‘M3’ Available options are: ‘left’, ‘center’, ‘right’.
anchor_title is an OptionProperty and defaults to None.
headline_text
Headline text bar.
New in version 1.0.0.
headline_text is an StringProperty and defaults to ‘’.
headline_text_color
Headline text color in (r, g, b, a) or string format.
New in version 1.0.0.
headline_text_color is an ColorProperty and defaults to None.
type_height
Bar height type.
New in version 1.0.0.
Available options are: ‘medium’, ‘large’, ‘small’.
type_height is an OptionProperty and defaults to ‘small’.
set_headline_font_style(self, interval: int | float)
remove_overflow_button(self )
Removes an overflow button to the bar.
add_overflow_button(self )
Adds an overflow button to the bar.
overflow_action_button_is_added(self )
Returns True if at least one action button (:class:`~ActionTopAppBarButton’) on the bar is added to the
overflow.
add_action_button_to_overflow(self )
Adds an overflow button to the bar.
check_overflow_cls(self, interval: int | float)
If the user does not set the overflow_cls attribute but uses overflows, the overflow_cls attribute will
use the default value.
on_type(self, instance_toolbar, type_value: str)
Called when the value of the type attribute changes.
set_notch(self )
set_shadow(self, *args)
get_default_overflow_cls(self )
update_overflow_menu_items(self, action_button)
update_md_bg_color(self, *args)
update_action_bar_text_colors(self, *args)
remove_notch(self )
remove_shadow(self )
show_duration
Duration of button display transition.
New in version 1.2.0.
show_duration is a NumericProperty and defaults to 0.2.
scroll_cls
Widget inherited from the ScrollView class. The value must be set if the allow_hidden parameter is
True.
New in version 1.2.0.
scroll_cls is a ObjectProperty and defaults to None.
allow_hidden
Allows or disables hiding the panel when scrolling content. If the value is True, the scroll_cls parameter
must be specified.
New in version 1.2.0.
allow_hidden is a BooleanProperty and defaults to False.
bar_is_hidden
Is the panel currently hidden.
New in version 1.2.0.
bar_is_hidden is a BooleanProperty and defaults to False.
button_centering_animation(self, button: MDActionOverFlowButton | MDActionBottomAppBarButton
| MDFabBottomAppBarButton)
Animation of centering buttons for MDActionOverFlowButton, MDActionBottomAppBarButton and
MDFabBottomAppBarButton classes.
check_scroll_direction(self, scroll_cls, y: float)
Checks the scrolling direction. Depending on the scrolling direction, hides or shows the MDBottomAppBar
panel.
show_bar(self )
Show MDBottomAppBar panel.
hide_bar(self )
Hide MDBottomAppBar panel.
on_show_bar(self, *args)
The method is called when the MDBottomAppBar panel is shown.
on_hide_bar(self, *args)
The method is called when the MDBottomAppBar panel is hidden.
on_scroll_cls(self, instance, scroll_cls)
Called when the value of the scroll_cls attribute changes.
on_size(self, *args)
Called when the root screen is resized.
on_action_items(self, instance, value: list)
Called when the value of the action_items attribute changes.
set_fab_opacity(self, *ars)
Sets the transparency value of the:class:~MDFabBottomAppBarButton button.
set_fab_icon(self, instance, value)
Animates the size of the MDFabBottomAppBarButton button.
set_bg_color(self, *args)
Sets the background color for the MDBottomAppBar class.
set_icon_color(self, widget: MDActionOverFlowButton | MDActionBottomAppBarButton)
Sets the icon color for the MDActionOverFlowButton and MDActionBottomAppBarButton classes.
add_widget(self, widget, index=0, canvas=None)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
2.3.27 NavigationRail
Usage
MDNavigationRail:
MDNavigationRailItem:
MDNavigationRailItem:
MDNavigationRailItem:
Declarative KV style
KV = '''
MDBoxLayout:
MDNavigationRail:
MDNavigationRailItem:
text: "Python"
icon: "language-python"
MDNavigationRailItem:
text: "JavaScript"
icon: "language-javascript"
MDNavigationRailItem:
text: "CPP"
icon: "language-cpp"
MDNavigationRailItem:
text: "Git"
icon: "git"
MDScreen:
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDBoxLayout(
MDNavigationRail(
MDNavigationRailItem(
text="Python",
icon="language-python",
),
MDNavigationRailItem(
text="JavaScript",
icon="language-javascript",
),
MDNavigationRailItem(
text="CPP",
icon="language-cpp",
),
MDNavigationRailItem(
text="Git",
icon="git",
),
)
)
)
Example().run()
Example
KV = '''
#:import FadeTransition kivy.uix.screenmanager.FadeTransition
<ExtendedButton>
elevation: 1
shadow_radius: 12
-height: "56dp"
(continues on next page)
<DrawerClickableItem@MDNavigationDrawerItem>
focus_color: "#e7e4c0"
unfocus_color: "#fffcf4"
MDScreen:
MDNavigationLayout:
ScreenManager:
MDScreen:
MDBoxLayout:
orientation: "vertical"
MDBoxLayout:
adaptive_height: True
md_bg_color: "#fffcf4"
padding: "12dp"
MDLabel:
text: "12:00"
adaptive_height: True
pos_hint: {"center_y": .5}
MDBoxLayout:
MDNavigationRail:
id: navigation_rail
md_bg_color: "#fffcf4"
selected_color_background: "#e7e4c0"
ripple_color_item: "#e7e4c0"
on_item_release: app.switch_screen(*args)
MDNavigationRailMenuButton:
on_release: nav_drawer.set_state("open")
MDNavigationRailFabButton:
md_bg_color: "#b0f0d6"
MDNavigationRailItem:
text: "Python"
icon: "language-python"
MDNavigationRailItem:
text: "JavaScript"
icon: "language-javascript"
MDNavigationRailItem:
(continues on next page)
MDNavigationRailItem:
text: "Swift"
icon: "language-swift"
ScreenManager:
id: screen_manager
transition:
FadeTransition(duration=.2, clearcolor=app.theme_cls.bg_
˓→dark)
MDNavigationDrawer:
id: nav_drawer
radius: 0, 16, 16, 0
md_bg_color: "#fffcf4"
elevation: 2
width: "240dp"
MDNavigationDrawerMenu:
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
spacing: "12dp"
padding: 0, 0, 0, "12dp"
MDIconButton:
icon: "menu"
MDBoxLayout:
adaptive_height: True
padding: "12dp", 0, 0, 0
ExtendedButton:
text: "Compose"
icon: "pencil"
DrawerClickableItem:
text: "Python"
icon: "language-python"
DrawerClickableItem:
text: "JavaScript"
icon: "language-javascript"
DrawerClickableItem:
text: "CPP"
icon: "language-cpp"
DrawerClickableItem:
(continues on next page)
.. rubric::
Extended FABs help people take primary actions.
They're wider than FABs to accommodate a text label and larger target
area.
This type of buttons is not yet implemented in the standard widget set
of the KivyMD library, so we will implement it ourselves in this class.
'''
class Example(MDApp):
def build(self):
self.theme_cls.material_style = "M3"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def switch_screen(
self, instance_navigation_rail, instance_navigation_rail_item
):
'''
Called when tapping on rail menu items. Switches application screens.
'''
self.root.ids.screen_manager.current = (
instance_navigation_rail_item.icon.split("-")[1].lower()
)
def on_start(self):
(continues on next page)
navigation_rail_items = self.root.ids.navigation_rail.get_items()[:]
navigation_rail_items.reverse()
Example().run()
class DrawerClickableItem(MDNavigationDrawerItem):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.focus_color = "#e7e4c0"
self.unfocus_color = self.theme_cls.bg_light
self.radius = 24
class Example(MDApp):
def build(self):
self.theme_cls.material_style = "M3"
self.theme_cls.primary_palette = "Orange"
return MDScreen(
MDNavigationLayout(
MDScreenManager(
MDScreen(
MDBoxLayout(
MDBoxLayout(
MDLabel(
text="12:00",
adaptive_height=True,
pos_hint={"center_y": 0.5},
),
adaptive_height=True,
md_bg_color="#fffcf4",
padding="12dp",
),
MDBoxLayout(
MDNavigationRail(
MDNavigationRailMenuButton(
on_release=self.open_nav_drawer,
),
MDNavigationRailFabButton(
md_bg_color="#b0f0d6",
(continues on next page)
def on_start(self):
'''Creates application screens.'''
screen_manager = self.root.ids.screen_manager
root_box = screen_manager.ids.screen.ids.box.ids.box_rail.ids.root_box
navigation_rail = root_box.ids.navigation_rail
screen_manager_content = root_box.ids.screen_manager_content
navigation_rail_items = navigation_rail.get_items()[:]
navigation_rail_items.reverse()
navigation_rail.bind(
on_item_release=lambda *args: self.switch_screen(
*args, screen_manager_content=screen_manager_content
(continues on next page)
Example().run()
API - kivymd.uix.navigationrail.navigationrail
MDNavigationRail:
MDNavigationRailFabButton:
icon: "home"
MDNavigationRail:
MDNavigationRailMenuButton:
icon: "home"
MDNavigationRail:
MDNavigationRailItem:
icon: "language-python"
MDNavigationRail:
MDNavigationRailItem:
text: "Python"
icon: "language-python"
MDNavigationRail:
MDNavigationRailItem:
text: "Python"
icon: "language-python"
badge_icon: "plus"
MDNavigationRail:
MDNavigationRailItem:
text: "Python"
icon: "language-python"
badge_icon: "plus"
badge_icon_color: 0, 0, 1, 1
MDNavigationRail:
MDNavigationRailItem:
text: "Python"
icon: "language-python"
badge_icon: "plus"
badge_bg_color: "#b0f0d6"
MDNavigationRail:
MDNavigationRailItem:
text: "Python"
icon: "language-python"
badge_icon: "plus"
badge_font_size: "24sp"
Events
on_item_press
Called on the on_press event of menu item - MDNavigationRailItem.
on_item_release
Called on the on_release event of menu item - MDNavigationRailItem.
radius
Rail radius.
radius is an VariableListProperty and defaults to [0, 0, 0, 0].
padding
Padding between layout box and children: [padding_left, padding_top, padding_right, padding_bottom].
padding is a VariableListProperty and defaults to [0, ‘36dp’, 0, ‘36dp’].
anchor
The position of the panel with menu items. Available options are: ‘top’, ‘bottom’, ‘center’.
Top
MDNavigationRail:
anchor: "top"
MDNavigationRailItem:
...
Center
MDNavigationRail:
anchor: "center"
MDNavigationRailItem:
...
Bottom
MDNavigationRail:
anchor: "bottom"
MDNavigationRailItem:
...
Labeled
MDNavigationRail:
type: "labeled"
MDNavigationRailItem:
...
Selected
MDNavigationRail:
type: "selected"
MDNavigationRailItem:
...
Unselected
MDNavigationRail:
type: "unselected"
MDNavigationRailItem:
...
MDNavigationRail:
text_color_item_normal: app.theme_cls.primary_color
MDNavigationRailItem:
...
MDNavigationRail:
text_color_item_active: app.theme_cls.primary_color
MDNavigationRailItem:
...
MDNavigationRail:
icon_color_item_normal: app.theme_cls.primary_color
MDNavigationRailItem:
...
MDNavigationRail:
icon_color_item_active: app.theme_cls.primary_color
MDNavigationRailItem:
...
MDNavigationRail:
selected_color_background: "#e7e4c0"
MDNavigationRailItem:
...
MDNavigationRail:
ripple_color_item: "#e7e4c0"
MDNavigationRailItem:
...
MDNavigationRail:
current_selected_item: 1
MDNavigationRailItem:
...
MDNavigationRail:
MDNavigationRailItem:
text: "Python"
icon: "language-python"
font_name: "nasalization-rg.ttf"
2.3.28 ProgressBar
See also:
Material Design spec, Progress indicators
Progress indicators express an unspecified wait time or display the length of a process.
MDProgressBar
KV = '''
MDBoxLayout:
padding: "10dp"
MDProgressBar:
value: 50
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Vertical orientation
MDProgressBar:
orientation: "vertical"
value: 50
MDProgressBar:
value: 50
color: app.theme_cls.accent_color
Indeterminate
KV = '''
MDScreen:
MDProgressBar:
id: progress
pos_hint: {"center_y": .6}
type: "indeterminate"
MDRaisedButton:
text: "STOP" if app.state == "start" else "START"
pos_hint: {"center_x": .5, "center_y": .45}
on_press: app.state = "stop" if app.state == "start" else "start"
'''
class Test(MDApp):
state = StringProperty("stop")
def build(self):
return Builder.load_string(KV)
Test().run()
Determinate
MDProgressBar:
type: "determinate"
running_duration: 1
catching_duration: 1.5
API - kivymd.uix.progressbar.progressbar
class kivymd.uix.progressbar.progressbar.MDProgressBar(**kwargs)
Progressbar class.
For more information, see in the ThemableBehavior and ProgressBar classes documentation.
radius
Progress line radius.
New in version 1.2.0.
radius is an VariableListProperty and defaults to [0, 0, 0, 0].
reversed
Reverse the direction the progressbar moves.
reversed is an BooleanProperty and defaults to False.
orientation
Orientation of progressbar. Available options are: ‘horizontal ‘, ‘vertical’.
orientation is an OptionProperty and defaults to ‘horizontal’.
color
Progress bar color in (r, g, b, a) or string format.
color is an ColorProperty and defaults to None.
back_color
Progress bar back color in (r, g, b, a) or string format.
New in version 1.0.0.
back_color is an ColorProperty and defaults to None.
running_transition
Running transition.
running_transition is an StringProperty and defaults to ‘in_cubic’.
catching_transition
Catching transition.
catching_transition is an StringProperty and defaults to ‘out_quart’.
running_duration
Running duration.
running_duration is an NumericProperty and defaults to 0.5.
catching_duration
Catching duration.
running_duration is an NumericProperty and defaults to 0.8.
type
Type of progressbar. Available options are: ‘indeterminate ‘, ‘determinate’.
type is an OptionProperty and defaults to None.
check_size(self, interval: int | float)
start(self )
Start animation.
stop(self )
Stop animation.
running_away(self, *args)
catching_up(self, *args)
2.3.29 Tooltip
See also:
Material Design spec, Tooltips
Tooltips display informative text when users hover over, focus on, or tap an element.
To use the MDTooltip class, you must create a new class inherited from the MDTooltip class:
In Kv-language:
<TooltipMDIconButton@MDIconButton+MDTooltip>
In Python code:
Warning: MDTooltip only works correctly with button and label classes.
KV = '''
<TooltipMDIconButton@MDIconButton+MDTooltip>
MDScreen:
TooltipMDIconButton:
icon: "language-python"
tooltip_text: self.icon
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Note: The behavior of tooltips on desktop and mobile devices is different. For more detailed information, click here.
API - kivymd.uix.tooltip.tooltip
class kivymd.uix.tooltip.tooltip.MDTooltip(**kwargs)
Tooltip class.
For more information, see in the HoverBehavior and TouchBehavior classes documentation.
tooltip_bg_color
Tooltip background color in (r, g, b, a) or string format
tooltip_bg_color is an ColorProperty and defaults to None.
tooltip_text_color
Tooltip text color in (r, g, b, a) or string format
tooltip_text_color is an ColorProperty and defaults to None.
tooltip_text
Tooltip text.
tooltip_text is an StringProperty and defaults to ‘’.
tooltip_font_style
Tooltip font style. Available options are: ‘H1’, ‘H2’, ‘H3’, ‘H4’, ‘H5’, ‘H6’, ‘Subtitle1’, ‘Subtitle2’,
‘Body1’, ‘Body2’, ‘Button’, ‘Caption’, ‘Overline’, ‘Icon’.
tooltip_font_style is an OptionProperty and defaults to ‘Caption’.
tooltip_radius
Corner radius values.
radius is an ListProperty and defaults to [dp(7),].
tooltip_display_delay
Tooltip dsiplay delay.
tooltip_display_delay is an BoundedNumericProperty and defaults to 0, min of 0 & max of 4. This
property only works on desktop.
shift_y
Y-offset of tooltip text.
shift_y is an NumericProperty and defaults to 0.
shift_right
Shifting the tooltip text to the right.
New in version 1.0.0.
shift_right is an NumericProperty and defaults to 0.
shift_left
Shifting the tooltip text to the left.
New in version 1.0.0.
shift_left is an NumericProperty and defaults to 0.
delete_clock(self, widget, touch, *args)
on_enter(self, *args)
See on_enter method in HoverBehavior class.
on_leave(self )
See on_leave method in HoverBehavior class.
on_show(self )
Default display event handler.
on_dismiss(self )
New in version 1.0.0.
Default dismiss event handler.
class kivymd.uix.tooltip.tooltip.MDTooltipViewClass(**kwargs)
Tooltip view class.
For more information, see in the ThemableBehavior and BoxLayout classes documentation.
tooltip_bg_color
See tooltip_bg_color.
tooltip_text_color
See tooltip_text_color.
tooltip_text
See tooltip_text.
tooltip_font_style
See tooltip_font_style.
tooltip_radius
See tooltip_radius.
2.3.30 Banner
See also:
Material Design spec, Banner
Usage
Builder.load_string('''
<ExampleBanner@Screen>
MDBanner:
id: banner
text: ["One line string text example without actions."]
# The widget that is under the banner.
# It will be shifted down to the height of the banner.
over_widget: screen
vertical_pad: toolbar.height
MDTopAppBar:
id: toolbar
title: "Example Banners"
elevation: 4
pos_hint: {'top': 1}
MDBoxLayout:
id: screen
orientation: "vertical"
size_hint_y: None
height: Window.height - toolbar.height
OneLineListItem:
text: "Banner without actions"
on_release: banner.show()
class Test(MDApp):
def build(self):
return Factory.ExampleBanner()
Test().run()
Banner type.
MDBanner:
text: ["One line string text example without actions."]
To use a two-line banner, specify the 'two-line' MDBanner.type for the banner and pass the list of two lines to the
MDBanner.text parameter:
MDBanner:
type: "two-line"
text:
["One line string text example without actions.", "This is the second line of␣
˓→the banner message."]
MDBanner:
type: "three-line"
text:
["One line string text example without actions.", "This is the second line of␣
˓→the banner message.", "and this is the third line of the banner message."]
To add buttons to any type of banner, use the MDBanner.left_action and MDBanner.right_action parameters,
which should take a list [‘Button name’, function]:
MDBanner:
text: ["One line string text example without actions."]
left_action: ["CANCEL", lambda x: None]
Or two buttons:
MDBanner:
text: ["One line string text example without actions."]
left_action: ["CANCEL", lambda x: None]
right_action: ["CLOSE", lambda x: None]
If you want to use the icon on the left in the banner, add the prefix ‘-icon’ to the banner type:
MDBanner:
type: "one-line-icon"
icon: f"{images_path}/kivymd.png"
text: ["One line string text example without actions."]
API - kivymd.uix.banner.banner
text
List of lines for banner text. Must contain no more than three lines for a ‘one-line’, ‘two-line’ and ‘three-
line’ banner, respectively.
text is an ListProperty and defaults to [].
left_action
The action of banner.
To add one action, make a list [‘name_action’, callback] where ‘name_action’ is a string that corresponds
to an action name and callback is the function called on a touch release event.
left_action is an ListProperty and defaults to [].
right_action
Works the same way as left_action.
right_action is an ListProperty and defaults to [].
type
Banner type. . Available options are: (“one-line”, “two-line”, “three-line”, “one-line-icon”, “two-line-
icon”, “three-line-icon”).
type is an OptionProperty and defaults to ‘one-line’.
opening_timeout
Time interval after which the banner will be shown.
New in version 1.0.0.
opening_timeout is an BoundedNumericProperty and defaults to 0.7.
opening_time
The time taken for the banner to slide to the state ‘open’.
New in version 1.0.0.
opening_time is a NumericProperty and defaults to 0.15.
closing_time
The time taken for the banner to slide to the state ‘close’.
New in version 1.0.0.
closing_time is a NumericProperty and defaults to 0.15.
add_actions_buttons(self, instance_box: MDBoxLayout, data: list)
Adds buttons to the banner.
Parameters
data – [‘NAME BUTTON’, <function>];
show(self )
Displays a banner on the screen.
hide(self )
Hides the banner from the screen.
set_type_banner(self )
2.3.31 Card
See also:
Material Design spec, Cards and Material Design 3 spec, Cards
Note: MDCard inherited from BoxLayout. You can use all parameters and attributes of the BoxLayout class in the
MDCard class.
MDCard
KV = '''
<MD3Card>
padding: 4
size_hint: None, None
size: "200dp", "100dp"
MDRelativeLayout:
MDIconButton:
icon: "dots-vertical"
pos_hint: {"top": 1, "right": 1}
MDLabel:
(continues on next page)
MDScreen:
MDBoxLayout:
id: box
adaptive_size: True
spacing: "56dp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class MD3Card(MDCard):
'''Implements a material design v3 card.'''
text = StringProperty()
class Example(MDApp):
def build(self):
self.theme_cls.material_style = "M3"
return Builder.load_string(KV)
def on_start(self):
styles = {
"elevated": "#f6eeee", "filled": "#f4dedc", "outlined": "#f8f5f4"
}
for style in styles.keys():
self.root.ids.box.add_widget(
MD3Card(
line_color=(0.2, 0.2, 0.2, 0.8),
style=style,
text=style.capitalize(),
md_bg_color=styles[style],
shadow_offset=(0, -1),
)
)
Example().run()
class MD3Card(MDCard):
'''Implements a material design v3 card.'''
class Example(MDApp):
def build(self):
self.theme_cls.material_style = "M3"
return (
MDScreen(
MDBoxLayout(
id="box",
adaptive_size=True,
spacing="56dp",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
)
def on_start(self):
styles = {
"elevated": "#f6eeee", "filled": "#f4dedc", "outlined": "#f8f5f4"
}
for style in styles.keys():
self.root.ids.box.add_widget(
MD3Card(
MDRelativeLayout(
MDIconButton(
icon="dots-vertical",
pos_hint={"top": 1, "right": 1}
),
MDLabel(
text=style.capitalize(),
adaptive_size=True,
color="grey",
pos=("12dp", "12dp"),
),
),
line_color=(0.2, 0.2, 0.2, 0.8),
style=style,
text=style.capitalize(),
md_bg_color=styles[style],
shadow_offset=(0, -1),
)
)
MDCardSwipe
To create a card with swipe-to-delete behavior, you must create a new class that inherits from the MDCardSwipe class:
<SwipeToDeleteItem>
size_hint_y: None
height: content.height
MDCardSwipeLayerBox:
MDCardSwipeFrontBox:
OneLineListItem:
id: content
text: root.text
_no_ripple_effect: True
class SwipeToDeleteItem(MDCardSwipe):
text = StringProperty()
KV = '''
<SwipeToDeleteItem>
size_hint_y: None
(continues on next page)
MDCardSwipeLayerBox:
# Content under the card.
MDCardSwipeFrontBox:
# Content of card.
OneLineListItem:
id: content
text: root.text
_no_ripple_effect: True
MDScreen:
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
elevation: 4
title: "MDCardSwipe"
MDScrollView:
scroll_timeout : 100
MDList:
id: md_list
padding: 0
'''
class SwipeToDeleteItem(MDCardSwipe):
'''Card with `swipe-to-delete` behavior.'''
text = StringProperty()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def on_start(self):
'''Creates a list of cards.'''
for i in range(20):
self.root.ids.md_list.add_widget(
SwipeToDeleteItem(text=f"One-line item {i}")
)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDBoxLayout(
MDTopAppBar(
elevation=4,
title="MDCardSwipe",
),
MDScrollView(
MDList(
id="md_list",
),
id="scroll",
scroll_timeout=100,
),
id="box",
orientation="vertical",
),
)
)
def on_start(self):
'''Creates a list of cards.'''
for i in range(20):
self.root.ids.box.ids.scroll.ids.md_list.add_widget(
MDCardSwipe(
MDCardSwipeLayerBox(),
MDCardSwipeFrontBox(
OneLineListItem(
id="content",
text=f"One-line item {i}",
_no_ripple_effect=True,
(continues on next page)
Example().run()
<SwipeToDeleteItem>
# By default, the parameter is "left"
anchor: "right"
Note: You cannot use the left and right swipe at the same time.
Swipe behavior
<SwipeToDeleteItem>
# By default, the parameter is "hand"
type_swipe: "hand"
<SwipeToDeleteItem>:
type_swipe: "auto"
The map provides the MDCardSwipe.on_swipe_complete event. You can use this event to remove items from a list:
Declarative KV styles
<SwipeToDeleteItem>:
on_swipe_complete: app.on_swipe_complete(root)
.. code-block:: python
MDCardSwipe(
...
on_swipe_complete=self.on_swipe_complete,
)
To add content to the bottom layer of the card, use the MDCardSwipeLayerBox class.
<SwipeToDeleteItem>:
MDCardSwipeLayerBox:
padding: "8dp"
MDIconButton:
icon: "trash-can"
pos_hint: {"center_y": .5}
on_release: app.remove_item(root)
Declarative KV styles
KV = '''
<SwipeToDeleteItem>:
size_hint_y: None
height: content.height
MDCardSwipeLayerBox:
padding: "8dp"
(continues on next page)
MDIconButton:
icon: "trash-can"
pos_hint: {"center_y": .5}
on_release: app.remove_item(root)
MDCardSwipeFrontBox:
OneLineListItem:
id: content
text: root.text
_no_ripple_effect: True
MDScreen:
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
elevation: 4
title: "MDCardSwipe"
MDScrollView:
MDList:
id: md_list
padding: 0
'''
class SwipeToDeleteItem(MDCardSwipe):
text = StringProperty()
class Example(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
self.screen = Builder.load_string(KV)
def build(self):
return self.screen
def on_start(self):
for i in range(20):
self.screen.ids.md_list.add_widget(
SwipeToDeleteItem(text=f"One-line item {i}")
(continues on next page)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDBoxLayout(
MDTopAppBar(
elevation=4,
title="MDCardSwipe",
),
MDScrollView(
MDList(
id="md_list",
),
id="scroll",
scroll_timeout=100,
),
id="box",
orientation="vertical",
),
)
)
def on_start(self):
'''Creates a list of cards.'''
for i in range(20):
self.root.ids.box.ids.scroll.ids.md_list.add_widget(
MDCardSwipe(
MDCardSwipeLayerBox(
MDIconButton(
icon="trash-can",
(continues on next page)
Example().run()
Focus behavior
MDCard:
focus_behavior: True
Declarative KV styles
KV = '''
MDScreen:
MDCard:
size_hint: .7, .4
focus_behavior: True
pos_hint: {"center_x": .5, "center_y": .5}
md_bg_color: "darkgrey"
unfocus_color: "darkgrey"
focus_color: "grey"
elevation: 6
'''
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return (
MDScreen(
MDCard(
size_hint=(0.7, 0.4),
focus_behavior=True,
pos_hint={"center_x": 0.5, "center_y": 0.5},
md_bg_color="darkgrey",
unfocus_color="darkgrey",
focus_color="grey",
elevation=6,
),
)
)
Example().run()
Ripple behavior
MDCard:
ripple_behavior: True
API - kivymd.uix.card.card
class kivymd.uix.card.card.MDSeparator(**kwargs)
A separator line.
For more information, see in the MDBoxLayout class documentation.
color
Separator color in (r, g, b, a) or string format.
color is a ColorProperty and defaults to None.
on_orientation(self, *args)
set_style(self, *args)
set_line_color(self )
set_elevation(self )
set_radius(self )
max_opened_x
The value of the position the card shifts to when type_swipe s set to ‘hand’.
max_opened_x is a NumericProperty and defaults to 100dp.
type_swipe
Type of card opening when swipe. Shift the card to the edge or to a set position max_opened_x. Available
options are: ‘auto’, ‘hand’.
type_swipe is a OptionProperty and defaults to auto.
add_widget(self, widget, index=0, canvas=None)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
on_swipe_complete(self, *args)
Called when a swipe of card is completed.
on_anchor(self, instance_swipe_to_delete_item, anchor_value: str)
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.
on_touch_down(self, touch)
Receive a touch down event.
Parameters
open_card(self )
close_card(self, *args)
2.3.32 Selection
See also:
Material Design spec, Banner
Selection refers to how users indicate specific items they intend to take action on.
To select an item and enter selection mode, long press the item:
To exit selection mode, tap each selected item until they’re all deselected:
Larger selections
Events
KV = '''
<MyItem>
text: "Two-line item with avatar"
secondary_text: "Secondary text here"
_no_ripple_effect: True
ImageLeftWidget:
source: "data/logo/kivy-icon-256.png"
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
id: toolbar
title: "Inbox"
left_action_items: [["menu"]]
right_action_items: [["magnify"], ["dots-vertical"]]
md_bg_color: 0, 0, 0, 1
MDLabel:
text: "Today"
adaptive_size: True
ScrollView:
MDSelectionList:
id: selection_list
spacing: "12dp"
overlay_color: app.overlay_color[:-1] + [.2]
icon_bg_color: app.overlay_color
on_selected: app.on_selected(*args)
on_unselected: app.on_unselected(*args)
on_selected_mode: app.set_selection_mode(*args)
'''
class MyItem(TwoLineAvatarListItem):
pass
class Example(MDApp):
overlay_color = get_color_from_hex("#6042e4")
def build(self):
return Builder.load_string(KV)
def on_start(self):
for i in range(10):
self.root.ids.selection_list.add_widget(MyItem())
Animation(md_bg_color=md_bg_color, d=0.2).start(self.root.ids.toolbar)
(continues on next page)
Example().run()
KV = '''
MDBoxLayout:
orientation: "vertical"
md_bg_color: app.theme_cls.bg_light
MDTopAppBar:
id: toolbar
title: "Inbox"
left_action_items: [["menu"]]
right_action_items: [["magnify"], ["dots-vertical"]]
md_bg_color: app.theme_cls.bg_light
specific_text_color: 0, 0, 0, 1
MDBoxLayout:
padding: "24dp", "8dp", 0, "8dp"
adaptive_size: True
MDLabel:
text: "Today"
adaptive_size: True
ScrollView:
(continues on next page)
MDSelectionList:
id: selection_list
padding: "24dp", 0, "24dp", "24dp"
cols: 3
spacing: "12dp"
overlay_color: app.overlay_color[:-1] + [.2]
icon_bg_color: app.overlay_color
progress_round_color: app.progress_round_color
on_selected: app.on_selected(*args)
on_unselected: app.on_unselected(*args)
on_selected_mode: app.set_selection_mode(*args)
'''
class Example(MDApp):
overlay_color = ColorProperty("#6042e4")
progress_round_color = "#ef514b"
def build(self):
return Builder.load_string(KV)
def on_start(self):
for i in range(10):
self.root.ids.selection_list.add_widget(
FitImage(
source="image.png",
size_hint_y=None,
height="240dp",
)
)
Animation(md_bg_color=md_bg_color, d=0.2).start(self.root.ids.toolbar)
self.root.ids.toolbar.left_action_items = left_action_items
self.root.ids.toolbar.right_action_items = right_action_items
Example().run()
API - kivymd.uix.selection.selection
class kivymd.uix.selection.selection.MDSelectionList(**kwargs)
Selection list class.
For more information, see in the MDList classes documentation.
Events
on_selected
Called when a list item is selected.
on_unselected
Called when a list item is unselected.
selected_mode
List item selection mode. If True when clicking on a list item, it will be selected.
selected_mode is an BooleanProperty and defaults to False.
icon
Name of the icon with which the selected list item will be marked.
icon is an StringProperty and defaults to ‘check’.
icon_pos
The position of the icon that will mark the selected list item.
icon_pos is an ListProperty and defaults to [].
icon_bg_color
Background color in (r, g, b, a) or string format of the icon that will mark the selected list item.
icon_bg_color is an ColorProperty and defaults to [1, 1, 1, 1].
icon_check_color
Color in (r, g, b, a) or string format of the icon that will mark the selected list item.
icon_check_color is an ColorProperty and defaults to [1, 1, 1, 1].
overlay_color
The overlay color in (r, g, b, a) or string format of the selected list item.
overlay_color is an ColorProperty and defaults to [0, 0, 0, 0.2]].
progress_round_size
Size of the spinner for switching of selected_mode mode.
progress_round_size is an NumericProperty and defaults to dp(46).
progress_round_color
Color in (r, g, b, a) or string format of the spinner for switching of selected_mode mode.
progress_round_color is an NumericProperty and defaults to None.
add_widget(self, widget, index=0, canvas=None)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
get_selected(self )
Returns True if at least one item in the list is checked.
get_selected_list_items(self )
Returns a list of marked objects:
[<kivymd.uix.selection.SelectionItem object>, . . . ]
unselected_all(self )
selected_all(self )
on_selected(self, *args)
Called when a list item is selected.
on_unselected(self, *args)
Called when a list item is unselected.
2.3.33 DatePicker
See also:
Material Design spec, Date picker
Usage
Declarative KV style
KV = '''
MDFloatLayout:
MDRaisedButton:
text: "Open date picker"
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_date_picker()
'''
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def show_date_picker(self):
date_dialog = MDDatePicker()
date_dialog.bind(on_save=self.on_save, on_cancel=self.on_cancel)
date_dialog.open()
Test().run()
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDRaisedButton(
text="Open data picker",
pos_hint={'center_x': .5, 'center_y': .5},
on_release=self.show_date_picker,
)
)
)
Test().run()
def show_date_picker(self):
date_dialog = MDDatePicker(year=1983, month=4, day=12)
date_dialog.open()
Interval date
You can set the time interval from and to the set date. All days of the week that are not included in this range will have
the status disabled.
def show_date_picker(self):
date_dialog = MDDatePicker(
min_date=datetime.date.today(),
max_date=datetime.date(
datetime.date.today().year,
datetime.date.today().month,
datetime.date.today().day + 2,
),
)
date_dialog.open()
Select year
Warning: The list of years when opening is not automatically set to the current year.
You can set the range of years using the min_year and max_year attributes:
def show_date_picker(self):
date_dialog = MDDatePicker(min_year=2022, max_year=2030)
date_dialog.open()
def show_date_picker(self):
date_dialog = MDDatePicker(mode="range")
date_dialog.open()
API - kivymd.uix.pickers.datepicker.datepicker
class kivymd.uix.pickers.datepicker.datepicker.BaseDialogPicker(**kwargs)
Base class for MDDatePicker and MDTimePicker classes.
For more information, see in the BaseDialog and CommonElevationBehavior and
SpecificBackgroundColorBehavior classes documentation.
Events
on_save
Events called when the “OK” dialog box button is clicked.
on_cancel
Events called when the “CANCEL” dialog box button is clicked.
title_input
Dialog title fot input date.
MDDatePicker(title_input="INPUT DATE")
MDDatePicker(title="SELECT DATE")
MDDatePicker(radius=[7, 7, 7, 26])
MDDatePicker(primary_color="brown")
MDDatePicker(
primary_color="brown",
accent_color="darkred",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
text_color="orange",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
text_color="orange",
text_current_color="white",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
text_color="orange",
text_current_color="white",
text_button_color="lightgrey",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
text_color="orange",
text_current_color="white",
text_button_color="lightgrey",
input_field_background_color_normal="coral",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
text_color="orange",
text_current_color="white",
text_button_color="lightgrey",
input_field_background_color_normal="coral",
input_field_background_color_focus="red",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
text_color="orange",
text_current_color="white",
text_button_color="lightgrey",
input_field_background_color_normal="brown",
input_field_background_color_focus="red",
input_field_text_color_normal="white",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
text_color="orange",
text_current_color="white",
text_button_color="lightgrey",
input_field_background_color_normal="brown",
input_field_background_color_focus="red",
input_field_text_color_normal="white",
)
MDDatePicker(
primary_color="brown",
accent_color="darkred",
selector_color="red",
text_toolbar_color="lightgrey",
text_color="orange",
text_current_color="white",
text_button_color="lightgrey",
input_field_background_color_normal="brown",
input_field_background_color_focus="red",
input_field_text_color_normal="white",
input_field_text_color_focus="lightgrey",
font_name="nasalization.ttf",
)
owner
set_error(self )
Sets a text field to an error state.
input_filter(self, value: str, boolean: bool)
Filters the input according to the specified mode.
is_numeric(self, value: str)
Returns true if the value of the value argument can be converted to an integer, or if the value of the value
argument is ‘/’.
get_list_date(self )
Returns a list as [dd, mm, yyyy] from a text fied for entering a date.
class kivymd.uix.pickers.datepicker.datepicker.MDDatePicker(year=None, month=None, day=None,
firstweekday=0, **kwargs)
Base class for MDDatePicker and MDTimePicker classes.
For more information, see in the BaseDialog and CommonElevationBehavior and
SpecificBackgroundColorBehavior classes documentation.
Events
on_save
Events called when the “OK” dialog box button is clicked.
on_cancel
Events called when the “CANCEL” dialog box button is clicked.
text_weekday_color
Text color of weekday names in (r, g, b, a) or string format.
mode
class CustomInputField(MDTextField):
owner = ObjectProperty() # required attribute
# Required method.
def set_error(self):
[...]
# Required method.
def get_list_date(self):
[...]
# Required method.
def input_filter(self):
[...]
def show_date_picker(self):
date_dialog = MDDatePicker(input_field_cls=CustomInputField)
sel_month
sel_day
transformation_to_dialog_select_year(self )
transformation_to_dialog_input_date(self )
compare_date_range(self )
update_calendar_for_date_range(self )
update_text_full_date(self, list_date)
Updates the title of the week, month and number day name in an open date input dialog.
update_calendar(self, year, month)
get_field(self, date=None)
Creates and returns a text field object used to enter dates.
get_date_range(self )
set_selected_widget(self, widget)
set_month_day(self, day)
set_position_to_current_year(self )
generate_list_widgets_years(self )
generate_list_widgets_days(self )
2.3.34 ColorPicker
Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any
color combination..
Usage
KV = '''
MDScreen:
MDTopAppBar:
id: toolbar
title: "MDTopAppBar"
(continues on next page)
MDRaisedButton:
text: "OPEN PICKER"
pos_hint: {"center_x": .5, "center_y": .5}
md_bg_color: toolbar.md_bg_color
on_release: app.open_color_picker()
'''
class MyApp(MDApp):
def build(self):
return Builder.load_string(KV)
def open_color_picker(self):
color_picker = MDColorPicker(size_hint=(0.45, 0.85))
color_picker.open()
color_picker.bind(
on_select_color=self.on_select_color,
on_release=self.get_selected_color,
)
def get_selected_color(
self,
instance_color_picker: MDColorPicker,
type_color: str,
selected_color: Union[list, str],
):
'''Return selected color.'''
MyApp().run()
API - kivymd.uix.pickers.colorpicker.colorpicker
class kivymd.uix.pickers.colorpicker.colorpicker.MDColorPicker(**kwargs)
ModalView class. See module documentation for more information.
Events
on_pre_open:
Fired before the ModalView is opened. When this event is fired ModalView is not yet added
to window.
on_open:
Fired when the ModalView is opened.
on_pre_dismiss:
Fired before the ModalView is closed.
on_dismiss:
Fired when the ModalView is closed. If the callback returns True, the dismiss will be can-
celed.
Changed in version 1.11.0: Added events on_pre_open and on_pre_dismiss.
Changed in version 2.0.0: Added property ‘overlay_color’.
Changed in version 2.1.0: Marked attach_to property as deprecated.
adjacent_color_constants
A list of values that are used to create the gradient. These values are selected empirically. Each of these
values will be added to the selected RGB value, thus creating colors that are close in value.
adjacent_color_constants is an ListProperty and defaults to [0.299, 0.887, 0.411].
default_color
Default color value in (r, g, b, a) or string format. The set color value will be used when you open the
dialog.
default_color is an ColorProperty and defaults to None.
type_color
Type of color. Available options are: ‘RGBA’, ‘HEX’, ‘RGB’.
type_color is an OptionProperty and defaults to ‘RGB’.
background_down_button_selected_type_color
Button background for choosing a color type (‘RGBA’, ‘HEX’, ‘HSL’, ‘RGB’) in (r, g, b, a) or string format.
2.3.35 TimePicker
See also:
Material Design spec, Time picker
Warning: The widget is under testing. Therefore, we would be grateful if you would let us know about the bugs
found.
Usage
Declarative KV style
KV = '''
MDFloatLayout:
MDRaisedButton:
text: "Open time picker"
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_time_picker()
'''
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def show_time_picker(self):
'''Open time picker dialog.'''
time_dialog = MDTimePicker()
(continues on next page)
Test().run()
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDRaisedButton(
text="Open time picker",
pos_hint={'center_x': .5, 'center_y': .5},
on_release=self.show_time_picker,
)
)
)
MDTimePicker().open()
Test().run()
def show_time_picker(self):
time_dialog = MDTimePicker()
time_dialog.bind(time=self.get_time)
time_dialog.open()
return time
def show_time_picker(self):
from datetime import datetime
Note: For customization of the MDTimePicker class, see the documentation in the BaseDialogPicker class.
MDTimePicker(
primary_color="brown",
accent_color="red",
text_button_color="white",
).open()
API - kivymd.uix.pickers.timepicker.timepicker
class kivymd.uix.pickers.timepicker.timepicker.MDTimePicker(**kwargs)
Base class for MDDatePicker and MDTimePicker classes.
For more information, see in the BaseDialog and CommonElevationBehavior and
SpecificBackgroundColorBehavior classes documentation.
Events
on_save
Events called when the “OK” dialog box button is clicked.
on_cancel
Events called when the “CANCEL” dialog box button is clicked.
hour
Current hour.
hour is an StringProperty and defaults to ‘12’.
minute
Current minute.
minute is an StringProperty and defaults to 0.
minute_radius
Radius of the minute input field.
hour_radius
Radius of the hour input field.
2.3.36 ExpansionPanel
See also:
Material Design spec, Expansion panel
Expansion panels contain creation flows and allow lightweight editing of an element.
Usage
self.add_widget(
MDExpansionPanel(
icon="logo.png", # panel icon
content=Content(), # panel content
panel_cls=MDExpansionPanelOneLine(text="Secondary text"), # panel class
)
)
To use MDExpansionPanel you must pass one of the following classes to the panel_cls parameter:
• MDExpansionPanelOneLine
• MDExpansionPanelTwoLine
• MDExpansionPanelThreeLine
These classes are inherited from the following classes:
• OneLineAvatarIconListItem
• TwoLineAvatarIconListItem
• ThreeLineAvatarIconListItem
self.root.ids.box.add_widget(
MDExpansionPanel(
icon="logo.png",
content=Content(),
panel_cls=MDExpansionPanelThreeLine(
text="Text",
secondary_text="Secondary text",
tertiary_text="Tertiary text",
)
)
)
Example
import os
KV = '''
<Content>
adaptive_height: True
TwoLineIconListItem:
(continues on next page)
IconLeftWidget:
icon: 'phone'
MDScrollView:
MDGridLayout:
id: box
cols: 1
adaptive_height: True
'''
class Content(MDBoxLayout):
'''Custom content.'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
for i in range(10):
self.root.ids.box.add_widget(
MDExpansionPanel(
icon=os.path.join(images_path, "logo", "kivymd-icon-128.png"),
content=Content(),
panel_cls=MDExpansionPanelThreeLine(
text="Text",
secondary_text="Secondary text",
tertiary_text="Tertiary text",
)
)
)
Test().run()
• on_open
• on_close
MDExpansionPanel:
on_open: app.on_panel_open(args)
on_close: app.on_panel_close(args)
The user function takes one argument - the object of the panel:
See also:
See Expansion panel example
Expansion panel and MDCard
API - kivymd.uix.expansionpanel.expansionpanel
class kivymd.uix.expansionpanel.expansionpanel.MDExpansionPanel(**kwargs)
Expansion panel class.
For more information, see in the RelativeLayout classes documentation.
Events
on_open
Called when a panel is opened.
on_close
Called when a panel is closed.
content
Content of panel. Must be Kivy widget.
content is an ObjectProperty and defaults to None.
icon
Icon of panel.
Icon Should be either be a path to an image or a logo name in md_icons
icon is an StringProperty and defaults to ‘’.
opening_transition
The name of the animation transition type to use when animating to the state ‘open’.
opening_transition is a StringProperty and defaults to ‘out_cubic’.
opening_time
The time taken for the panel to slide to the state ‘open’.
opening_time is a NumericProperty and defaults to 0.2.
closing_transition
The name of the animation transition type to use when animating to the state ‘close’.
closing_transition is a StringProperty and defaults to ‘out_sine’.
closing_time
The time taken for the panel to slide to the state ‘close’.
closing_time is a NumericProperty and defaults to 0.2.
panel_cls
Panel object. The object must be one of the classes MDExpansionPanelOneLine,
MDExpansionPanelTwoLine or MDExpansionPanelThreeLine.
panel_cls is a ObjectProperty and defaults to None.
on_open(self, *args)
Called when a panel is opened.
on_close(self, *args)
Called when a panel is closed.
check_open_panel(self, instance_panel: [MDExpansionPanelThreeLine, MDExpansionPanelTwoLine,
MDExpansionPanelThreeLine, MDExpansionPanelLabel])
Called when you click on the panel. Called methods to open or close a panel.
set_chevron_down(self )
Sets the chevron down.
set_chevron_up(self, instance_chevron: MDExpansionChevronRight)
Sets the chevron up.
close_panel(self, instance_expansion_panel, press_current_panel: bool)
Method closes the panel.
open_panel(self, *args)
Method opens a panel.
get_state(self )
Returns the state of panel. Can be close or open .
add_widget(self, widget, index=0, canvas=None)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
2.3.37 Label
• MDLabel
• MDIcon
MDLabel
Class MDLabel inherited from the Label class but for MDLabel the text_size parameter is (self.width, None)
and default is positioned on the left:
Declarative KV style
KV = '''
MDScreen:
MDLabel:
text: "MDLabel"
'''
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Test().run()
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDLabel(
text="MDLabel"
)
)
)
Test().run()
MDLabel:
text: "MDLabel"
halign: "center"
MDLabel color:
KV = '''
MDBoxLayout:
orientation: "vertical"
'''
class Test(MDApp):
(continues on next page)
Test().run()
To use a custom color for MDLabel, use a theme ‘Custom’. After that, you can specify the desired color in the rgba
MDLabel:
text: "Custom color"
halign: "center"
theme_text_color: "Custom"
text_color: "blue"
MDLabel provides standard font styles for labels. To do this, specify the name of the desired style in the font_style
parameter:
KV = '''
MDScrollView:
MDList:
id: box
spacing: "8dp"
'''
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
screen = Builder.load_string(KV)
Test().run()
Declarative KV style
KV = '''
MDScreen:
MDLabel:
adaptive_size: True
(continues on next page)
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDLabel(
adaptive_size=True,
pos_hint={"center_x": .5, "center_y": .5},
text="MDLabel",
allow_selection=True,
padding=("4dp", "4dp"),
)
)
)
Example().run()
Declarative KV style
KV = '''
MDScreen:
MDLabel:
adaptive_size: True
pos_hint: {"center_x": .5, "center_y": .5}
text: "MDLabel"
padding: "4dp", "4dp"
allow_selection: True
allow_copy: True
on_copy: print("The text is copied to the clipboard")
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDLabel(
id="label",
adaptive_size=True,
pos_hint={"center_x": .5, "center_y": .5},
text="MDLabel",
allow_selection=True,
allow_copy=True,
(continues on next page)
def on_start(self):
self.root.ids.label.bind(on_copy=self.on_copy)
Example().run()
KV = '''
MDBoxLayout:
orientation: "vertical"
spacing: "12dp"
padding: "24dp"
MDScrollView:
MDBoxLayout:
id: box
orientation: "vertical"
padding: "24dp"
spacing: "12dp"
adaptive_height: True
MDTextField:
max_height: "200dp"
mode: "fill"
multiline: True
MDWidget:
'''
data = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
(continues on next page)
class CopyLabel(MDLabel):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.allow_selection = True
self.adaptive_height = True
self.theme_text_color = "Custom"
self.text_color = self.theme_cls.text_color
class Example(MDApp):
context_menu = None
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def on_start(self):
for text in data:
copy_label = CopyLabel(text=text)
copy_label.bind(
on_selection=self.open_context_menu,
on_cancel_selection=self.restore_text_color,
)
self.root.ids.box.add_widget(copy_label)
def click_item_context_menu(
self, type_click: str, instance_label: CopyLabel
) -> None:
Clipboard.copy(instance_label.text)
if type_click == "copy":
toast("Copied")
elif type_click == "cut":
self.root.ids.box.remove_widget(instance_label)
toast("Cut")
if self.context_menu:
self.context_menu.dismiss()
Example().run()
MDIcon
You can use labels to display material design icons using the MDIcon class.
See also:
Material Design Icons
Material Design Icon Names
The MDIcon class is inherited from MDLabel and has the same parameters.
Warning: For the MDIcon class, you cannot use text and font_style options!
MDIcon:
icon: "gmail"
pos_hint: {"center_x": .5, "center_y": .5}
MDIcon:
icon: "gmail"
badge_icon: "numeric-10"
pos_hint: {"center_x": .5, "center_y": .5}
API - kivymd.uix.label.label
font_style
Label font style.
Available vanilla font_style are: ‘H1’, ‘H2’, ‘H3’, ‘H4’, ‘H5’, ‘H6’, ‘Subtitle1’, ‘Subtitle2’, ‘Body1’,
‘Body2’, ‘Button’, ‘Caption’, ‘Overline’, ‘Icon’.
font_style is an StringProperty and defaults to ‘Body1’.
text
Text of the label.
theme_text_color
Label color scheme name.
Available options are: ‘Primary’, ‘Secondary’, ‘Hint’, ‘Error’, ‘Custom’, ‘ContrastParentBackground’.
theme_text_color is an OptionProperty and defaults to None.
text_color
Label text color in (r, g, b, a) or string format.
text_color is an ColorProperty and defaults to None.
allow_copy
Allows you to copy text to the clipboard by double-clicking on the label.
New in version 1.2.0.
allow_copy is an BooleanProperty and defaults to False.
allow_selection
Allows to highlight text by double-clicking on the label.
New in version 1.2.0.
allow_selection is an BooleanProperty and defaults to False.
color_selection
The color in (r, g, b, a) or string format of the text selection when the value of the allow_selection
attribute is True.
New in version 1.2.0.
color_selection is an ColorProperty and defaults to None.
color_deselection
The color in (r, g, b, a) or string format of the text deselection when the value of the allow_selection
attribute is True.
New in version 1.2.0.
color_deselection is an ColorProperty and defaults to None.
is_selected
Is the label text highlighted.
New in version 1.2.0.
is_selected is an BooleanProperty and defaults to False.
parent_background
can_capitalize
canvas_bg
do_selection(self )
cancel_selection(self )
on_copy(self, *args)
Called when double-tapping on the label.
New in version 1.2.0.
on_selection(self, *args)
Called when double-tapping on the label.
New in version 1.2.0.
on_cancel_selection(self, *args)
Called when the highlighting is removed from the label text.
New in version 1.2.0.
on_allow_selection(self, instance_label, selection: bool)
on_opposite_colors(self, *args)
badge_icon_color
Badge icon color in (r, g, b, a) or string format.
New in version 1.0.0.
badge_icon_color is an ColorProperty and defaults to None.
badge_bg_color
Badge icon background color in (r, g, b, a) or string format.
New in version 1.0.0.
badge_bg_color is an ColorProperty and defaults to None.
badge_font_size
Badge font size.
New in version 1.0.0.
badge_font_size is an NumericProperty and defaults to 0.
source
Path to icon.
source is an StringProperty and defaults to None.
adjust_size(self, *args)
2.3.38 SegmentedButton
Segmented buttons help people select options, switch views, or sort elements.
Usage
MDScreen:
MDSegmentedButton:
MDSegmentedButtonItem:
icon: ...
text: ...
MDSegmentedButtonItem:
icon: ...
text: ...
MDSegmentedButtonItem:
icon: ...
text: ...
Example
KV = '''
MDScreen:
MDSegmentedButton:
pos_hint: {"center_x": .5, "center_y": .5}
MDSegmentedButtonItem:
text: "Walking"
MDSegmentedButtonItem:
text: "Transit"
MDSegmentedButtonItem:
text: "Driving"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
MDSegmentedButton:
multiselect: True
Control width
The width of the panel of segmented buttons will be equal to the width of the texture of the widest button multiplied
by the number of buttons:
But you can use the size_hint_x parameter to specify the relative width:
MDSegmentedButton:
size_hint_x: .9
Customization
You can see below in the documentation from which classes the MDSegmentedButton and MDSegmentedButtonItem
classes are inherited and use all their attributes such as md_bg_color, md_bg_color etc. for additional customization
of segments.
Events
• on_marked
The method is called when a segment is marked.
• on_unmarked
The method is called when a segment is unmarked.
MDSegmentedButton:
on_marked: app.on_marked(*args)
def on_marked(
self,
segment_button: MDSegmentedButton,
segment_item: MDSegmentedButtonItem,
marked: bool,
) -> None:
print(segment_button)
print(segment_item)
print(marked)
A practical example
import os
KV = '''
<UserCard>
adaptive_height: True
md_bg_color: "#343930"
radius: 16
TwoLineAvatarListItem:
id: item
(continues on next page)
ImageLeftWidget:
source: root.album
radius: root.radius
MDScreen:
md_bg_color: "#151514"
MDBoxLayout:
orientation: "vertical"
padding: "12dp"
spacing: "12dp"
MDLabel:
adaptive_height: True
text: "Your downloads"
font_style: "H5"
theme_text_color: "Custom"
text_color: "#8A8D79"
MDSegmentedButton:
size_hint_x: 1
selected_color: "#303A29"
line_color: "#343930"
on_marked: app.on_marked(*args)
MDSegmentedButtonItem:
text: "Songs"
active: True
MDSegmentedButtonItem:
text: "Albums"
MDSegmentedButtonItem:
text: "Podcasts"
RecycleView:
id: card_list
viewclass: "UserCard"
(continues on next page)
RecycleBoxLayout:
orientation: 'vertical'
spacing: "16dp"
padding: "16dp"
default_size: None, dp(72)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
'''
class UserCard(MDBoxLayout):
name = StringProperty()
path_to_file = StringProperty()
album = StringProperty()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def on_marked(
self,
segment_button: MDSegmentedButton,
segment_item: MDSegmentedButtonItem,
marked: bool,
) -> None:
self.generate_card()
def generate_card(self):
async def generate_card():
for i in range(10):
await asynckivy.sleep(0)
self.root.ids.card_list.data.append(
{
"name": fake.name(),
"path_to_file": f"{os.path.splitext(fake.file_path())[0]}.mp3",
"album": fake.image_url(),
}
)
fake = Faker()
self.root.ids.card_list.data = []
Clock.schedule_once(lambda x: asynckivy.start(generate_card()))
Example().run()
API - kivymd.uix.segmentedbutton.segmentedbutton
class kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButtonItem(**kwargs)
Segment button item.
For more information, see in the RectangularRippleBehavior and ButtonBehavior and MDBoxLayout
class documentation.
icon
Icon segment.
icon is an StringProperty and defaults to ‘’.
text
Text segment.
text is an StringProperty and defaults to ‘’.
active
Background color of an disabled segment.
active is an BooleanProperty and defaults to False.
disabled_color
Is active segment.
active is an ColorProperty and defaults to None.
on_disabled(self, instance, value: bool)
hiding_icon_duration
Duration of hiding the current icon.
hiding_icon_duration is a NumericProperty and defaults to 0.05.
opening_icon_transition
The name of the transition that opens a new icon of the “marked” type.
opening_icon_transition is a StringProperty and defaults to ‘linear’.
opening_icon_duration
The duration of opening a new icon of the “marked” type.
opening_icon_duration is a NumericProperty and defaults to 0.05.
selected_items
The list of MDSegmentedButtonItem objects that are currently marked.
selected_items is a ListProperty and defaults to [].
selected_color
Color of the marked segment.
selected_color is a ColorProperty and defaults to None.
mark_segment(self, *args)
Programmatically marks a segment.
adjust_segment_radius(self, *args)
Rounds off the first and last elements.
adjust_segment_panel_width(self, *args)
Sets the width of all segments and the width of the panel by the widest segment.
shift_segment_text(self, segment_item: MDSegmentedButtonItem)
Shifts the segment text to the right, thus freeing up space for the icon (when the segment is marked).
show_icon_marked_segment(self, segment_item: MDSegmentedButtonItem)
Sets the icon for the marked segment and changes the icon scale to the normal scale.
hide_icon_marked_segment(self, segment_item: MDSegmentedButtonItem)
Changes the scale of the icon of the marked segment to zero.
restore_bg_segment(self, segment_item)
set_bg_marked_segment(self, segment_item)
set_selected_segment_list(self, segment_item)
uncheck_item(self )
2.3.39 Menu
See also:
Material Design spec, Menus
Usage
KV = '''
MDScreen:
MDRaisedButton:
id: button
text: "PRESS ME"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.menu.open()
'''
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"text": f"Item {i}",
"viewclass": "OneLineListItem",
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
(continues on next page)
def build(self):
return self.screen
Test().run()
Warning: Do not create the MDDropdownMenu object when you open the menu window. Because on a mobile
device this one will be very slow!
Wrong
Menu items are created in the same way as items for the RecycleView class.
KV = '''
<RightContentCls>
disabled: True
adaptive_size: True
pos_hint: {"center_y": .5}
MDIconButton:
icon: root.icon
user_font_size: "16sp"
md_bg_color_disabled: 0, 0, 0, 0
(continues on next page)
MDLabel:
text: root.text
font_style: "Caption"
adaptive_size: True
pos_hint: {"center_y": .5}
<Item>
IconLeftWidget:
icon: root.left_icon
RightContentCls:
id: container
icon: root.right_icon
text: root.right_text
MDScreen:
MDRaisedButton:
id: button
text: "PRESS ME"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.menu.open()
'''
class Item(OneLineAvatarIconListItem):
left_icon = StringProperty()
right_icon = StringProperty()
right_text = StringProperty()
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"text": f"Item {i}",
"right_text": f"R+{i}",
"right_icon": "apple-keyboard-command",
"left_icon": "git",
"viewclass": "Item",
"height": dp(54),
(continues on next page)
def build(self):
return self.screen
Test().run()
Header
KV = '''
<MenuHeader>
orientation: "vertical"
adaptive_size: True
padding: "4dp"
MDBoxLayout:
spacing: "12dp"
adaptive_size: True
MDIconButton:
icon: "gesture-tap-button"
pos_hint: {"center_y": .5}
MDLabel:
text: "Actions"
adaptive_size: True
pos_hint: {"center_y": .5}
MDScreen:
(continues on next page)
MDRaisedButton:
id: button
text: "PRESS ME"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.menu.open()
'''
class MenuHeader(MDBoxLayout):
'''An instance of the class that will be added to the menu header.'''
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"text": f"Item {i}",
"viewclass": "OneLineListItem",
"height": dp(56),
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(
header_cls=MenuHeader(),
caller=self.screen.ids.button,
items=menu_items,
width_mult=4,
)
def build(self):
return self.screen
Test().run()
The MDDropdownMenu works well with the standard MDTopAppBar. Since the buttons on the Toolbar are created
by the MDTopAppBar component, it is necessary to pass the button as an argument to the callback using lambda x:
app.callback(x).
Note: This example uses drop down menus for both the righthand and lefthand menus (i.e both the ‘triple bar’ and
‘triple dot’ menus) to illustrate that it is possible. A better solution for the ‘triple bar’ menu would probably have been
MDNavigationDrawer.
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "MDTopAppBar"
left_action_items: [["menu", lambda x: app.callback(x)]]
(continues on next page)
MDLabel:
text: "Content"
halign: "center"
'''
class Test(MDApp):
def build(self):
menu_items = [
{
"viewclass": "OneLineListItem",
"text": f"Item {i}",
"height": dp(56),
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(
items=menu_items,
width_mult=4,
)
return Builder.load_string(KV)
Test().run()
Position
Bottom position
See also:
position
KV = '''
<IconListItem>
IconLeftWidget:
icon: root.icon
MDScreen
MDTextField:
id: field
pos_hint: {'center_x': .5, 'center_y': .6}
size_hint_x: None
width: "200dp"
hint_text: "Password"
on_focus: if self.focus: app.menu.open()
'''
class IconListItem(OneLineIconListItem):
icon = StringProperty()
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"viewclass": "IconListItem",
"icon": "git",
"height": dp(56),
"text": f"Item {i}",
"on_release": lambda x=f"Item {i}": self.set_item(x),
} for i in range(5)]
self.menu = MDDropdownMenu(
caller=self.screen.ids.field,
items=menu_items,
position="bottom",
width_mult=4,
)
def build(self):
return self.screen
Center position
KV = '''
<IconListItem>
IconLeftWidget:
icon: root.icon
MDScreen
MDDropDownItem:
id: drop_item
pos_hint: {'center_x': .5, 'center_y': .5}
text: 'Item 0'
on_release: app.menu.open()
'''
class IconListItem(OneLineIconListItem):
icon = StringProperty()
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"viewclass": "IconListItem",
"icon": "git",
"text": f"Item {i}",
"height": dp(56),
"on_release": lambda x=f"Item {i}": self.set_item(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(
caller=self.screen.ids.drop_item,
(continues on next page)
def build(self):
return self.screen
Test().run()
API - kivymd.uix.menu.menu
class kivymd.uix.menu.menu.MDDropdownMenu(**kwargs)
Dropdown menu class.
For more information, see in the ThemableBehavior and FloatLayout classes documentation.
Events
on_release
The method that will be called when you click menu items.
header_cls
An instance of the class (Kivy or KivyMD widget) that will be added to the menu header.
New in version 0.104.2.
See Header for more information.
items = [
{
"viewclass": "OneLineListItem",
"height": dp(56),
"text": f"Item {i}",
}
for i in range(5)
]
self.menu = MDDropdownMenu(
items=items,
...,
)
self.menu = MDDropdownMenu(
width_mult=4,
...,
)
self.menu = MDDropdownMenu(
width_mult=8,
...,
)
self.menu = MDDropdownMenu(
max_height=dp(112),
...,
)
self.menu = MDDropdownMenu(
max_height=dp(224),
...,
)
self.menu = MDDropdownMenu(
border_margin=dp(4),
...,
)
self.menu = MDDropdownMenu(
border_margin=dp(24),
...,
)
self.menu = MDDropdownMenu(
ver_growth="up",
...,
)
self.menu = MDDropdownMenu(
ver_growth="down",
...,
)
self.menu = MDDropdownMenu(
hor_growth="left",
...,
)
self.menu = MDDropdownMenu(
hor_growth="right",
...,
)
self.menu = MDDropdownMenu(
background_color=self.theme_cls.primary_light,
...,
)
position
Menu window position relative to parent element. Available options are: ‘auto’, ‘center’, ‘bottom’.
See Position for more information.
self.menu = MDDropdownMenu(
radius=[24, 0, 24, 0],
...,
)
2.3.40 Spinner
See also:
Material Design spec, Menus
Usage
KV = '''
MDScreen:
MDSpinner:
size_hint: None, None
size: dp(46), dp(46)
pos_hint: {'center_x': .5, 'center_y': .5}
active: True if check.active else False
MDCheckbox:
id: check
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': .5, 'center_y': .4}
active: True
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Spinner palette
MDSpinner:
# The number of color values can be any.
palette:
[0.28627450980392155, 0.8431372549019608, 0.596078431372549, 1], [0.
˓→3568627450980392, 0.3215686274509804, 0.8666666666666667, 1], [0.
˓→8862745098039215, 0.36470588235294116, 0.592156862745098, 1], [0.
˓→8784313725490196, 0.9058823529411765, 0.40784313725490196, 1],
MDSpinner(
size_hint=(None, None),
size=(dp(46), dp(46)),
pos_hint={'center_x': .5, 'center_y': .5},
active=True,
palette=[
(continues on next page)
Determinate mode
KV = '''
MDScreen:
MDSpinner:
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': .5, 'center_y': .5}
determinate: True
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
API - kivymd.uix.spinner.spinner
class kivymd.uix.spinner.spinner.MDSpinner(**kwargs)
MDSpinner is an implementation of the circular progress indicator in Google’s Material Design.
For more information, see in the ThemableBehavior and Widget classes documentation.
It can be used either as an indeterminate indicator that loops while the user waits for something to happen, or as
a determinate indicator.
Set determinate to True to activate determinate mode, and determinate_time to set the duration of the
animation.
Events
on_determinate_complete
The event is called at the end of the spinner loop in the determinate = True mode.
determinate
Determinate value.
determinate is a BooleanProperty and defaults to False.
determinate_time
Determinate time value.
determinate_time is a NumericProperty and defaults to 2.
line_width
Progress line width of spinner.
line_width is a NumericProperty and defaults to dp(2.25).
active
Use active to start or stop the spinner.
active is a BooleanProperty and defaults to True.
color
Spinner color in (r, g, b, a) or string format.
color is a ColorProperty and defaults to [0, 0, 0, 0].
palette
A set of colors. Changes with each completed spinner cycle.
palette is a ListProperty and defaults to [].
on__rotation_angle(self, *args)
on_determinate_complete(self, *args)
The event is called at the end of the spinner loop in the determinate = True mode.
check_determinate(self, interval: float | int = 0)
2.3.41 Tabs
See also:
Material Design spec, Tabs
Tabs organize content across different screens, data sets, and other interactions.
Usage
To create a tab, you must create a new class that inherits from the MDTabsBase class and the Kivy container, in which
you will create content for the tab.
<Tab>
MDLabel:
text: root.content_text
pos_hint: {"center_x": .5, "center_y": .5}
Root:
MDTabs:
Tab:
title: "Tab 1"
content_text: f"This is an example text for {self.title}"
Tab:
title: "Tab 2"
content_text: f"This is an example text for {self.title}"
...
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "Example Tabs"
(continues on next page)
MDTabs:
id: tabs
on_tab_switch: app.on_tab_switch(*args)
<Tab>
MDIconButton:
id: icon
icon: root.icon
icon_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def on_start(self):
for tab_name in self.icons:
self.root.ids.tabs.add_widget(Tab(icon=tab_name))
def on_tab_switch(
self, instance_tabs, instance_tab, instance_tab_label, tab_text
):
'''
Called when switching tabs.
Example().run()
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDBoxLayout(
MDTopAppBar(title="Example Tabs"),
MDTabs(id="tabs"),
orientation="vertical",
)
)
def on_start(self):
self.root.ids.tabs.bind(on_tab_switch=self.on_tab_switch)
def on_tab_switch(
self, instance_tabs, instance_tab, instance_tab_label, tab_text
):
'''
Called when switching tabs.
Example().run()
Note: The MDTabsBase class has an icon parameter and, by default, tries to find the name of the icon in the file
kivymd/icon_definitions.py.
If the name of the icon is not found, the class will send a message stating that the icon could not be found.
if the tab has no icon, title or tab_label_text, the class will raise a ValueError.
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "Example Tabs"
MDTabs:
id: tabs
on_tab_switch: app.on_tab_switch(*args)
<Tab>
MDLabel:
id: label
text: "Tab 0"
halign: "center"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def on_start(self):
for i in range(20):
self.root.ids.tabs.add_widget(Tab(title=f"Tab {i}"))
def on_tab_switch(
self, instance_tabs, instance_tab, instance_tab_label, tab_text
):
'''Called when switching tabs.
instance_tab.ids.label.text = tab_text
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDBoxLayout(
MDTopAppBar(title="Example Tabs"),
MDTabs(id="tabs"),
orientation="vertical",
)
(continues on next page)
def on_start(self):
self.root.ids.tabs.bind(on_tab_switch=self.on_tab_switch)
for i in range(20):
self.root.ids.tabs.add_widget(
Tab(
MDLabel(id="label", text="Tab 0", halign="center"),
title=f"Tab {i}",
)
)
def on_tab_switch(
self, instance_tabs, instance_tab, instance_tab_label, tab_text
):
'''
Called when switching tabs.
instance_tab.ids.label.text = tab_text
Example().run()
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "Example Tabs"
MDTabs:
id: tabs
(continues on next page)
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def on_start(self):
for name_tab in list(md_icons.keys())[15:30]:
self.root.ids.tabs.add_widget(Tab(icon=name_tab, title=name_tab))
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDBoxLayout(
MDTopAppBar(title="Example Tabs"),
MDTabs(id="tabs"),
orientation="vertical",
)
)
def on_start(self):
for name_tab in list(md_icons.keys())[15:30]:
self.root.ids.tabs.add_widget(Tab(icon=name_tab, title=name_tab))
Example().run()
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "Example Tabs"
MDTabs:
id: tabs
<Tab>
MDList:
MDBoxLayout:
adaptive_height: True
MDFlatButton:
text: "ADD TAB"
on_release: app.add_tab()
MDFlatButton:
text: "REMOVE LAST TAB"
on_release: app.remove_tab()
MDFlatButton:
text: "GET TAB LIST"
on_release: app.get_tab_list()
'''
class Example(MDApp):
index = 0
def build(self):
(continues on next page)
def on_start(self):
self.add_tab()
def get_tab_list(self):
'''Prints a list of tab objects.'''
print(self.root.ids.tabs.get_tab_list())
def add_tab(self):
self.index += 1
self.root.ids.tabs.add_widget(Tab(title=f"{self.index} tab"))
def remove_tab(self):
if self.index > 1:
self.index -= 1
self.root.ids.tabs.remove_widget(
self.root.ids.tabs.get_tab_list()[-1]
)
Example().run()
class Example(MDApp):
index = 0
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDBoxLayout(
MDTopAppBar(title="Example Tabs"),
MDTabs(id="tabs"),
orientation="vertical",
(continues on next page)
def on_start(self):
self.add_tab()
print(self.root.ids.tabs.get_tab_list())
Example().run()
You can use markup for the text of the tabs and use the on_ref_press method accordingly:
Declarative KV and imperative python styles
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "Example Tabs"
MDTabs:
id: tabs
on_ref_press: app.on_ref_press(*args)
<Tab>
MDIconButton:
id: icon
icon: app.icons[0]
icon_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def on_start(self):
for name_tab in self.icons:
self.root.ids.tabs.add_widget(
Tab(
title=f"[ref={name_tab}][font={fonts[-1]['fn_regular']}]{md_icons[
(continues on next page)
def on_ref_press(
self,
instance_tabs,
instance_tab_label,
instance_tab,
instance_tab_bar,
instance_carousel,
):
'''
The method will be called when the ``on_ref_press`` event
occurs when you, for example, use markup text for tabs.
Example().run()
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
(continues on next page)
def on_start(self):
self.root.ids.tabs.bind(on_ref_press=self.on_ref_press)
for name_tab in self.icons:
self.root.ids.tabs.add_widget(
Tab(
MDIconButton(
icon=self.icons[0],
icon_size="48sp",
pos_hint={"center_x": .5, "center_y": .5}
),
title=(
f"[ref={name_tab}][font={fonts[-1]['fn_regular']}]"
f"{md_icons['close']}[/font][/ref] {name_tab}"
),
)
)
def on_ref_press(
self,
instance_tabs,
instance_tab_label,
instance_tab,
instance_tab_bar,
instance_carousel,
):
'''
The method will be called when the ``on_ref_press`` event
occurs when you, for example, use markup text for tabs.
Example().run()
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "Example Tabs"
MDTabs:
id: tabs
<Tab>
MDBoxLayout:
orientation: "vertical"
pos_hint: {"center_x": .5, "center_y": .5}
adaptive_size: True
spacing: dp(48)
MDIconButton:
id: icon
icon: "arrow-right"
icon_size: "48sp"
on_release: app.switch_tab_by_name()
MDIconButton:
id: icon2
icon: "page-next"
icon_size: "48sp"
on_release: app.switch_tab_by_object()
'''
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
self.iter_list_names = iter(list(self.icons))
return Builder.load_string(KV)
def on_start(self):
for name_tab in list(self.icons):
self.root.ids.tabs.add_widget(Tab(tab_label_text=name_tab))
self.iter_list_objects = iter(list(self.root.ids.tabs.get_tab_list()))
def switch_tab_by_object(self):
try:
x = next(self.iter_list_objects)
print(f"Switch slide by object, next element to show: [{x}]")
self.root.ids.tabs.switch_tab(x)
except StopIteration:
# reset the iterator an begin again.
self.iter_list_objects = iter(list(self.root.ids.tabs.get_tab_list()))
self.switch_tab_by_object()
def switch_tab_by_name(self):
'''Switching the tab by name.'''
try:
x = next(self.iter_list_names)
print(f"Switch slide by name, next element to show: [{x}]")
self.root.ids.tabs.switch_tab(x)
except StopIteration:
# Reset the iterator an begin again.
self.iter_list_names = iter(list(self.icons))
self.switch_tab_by_name()
Example().run()
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
self.iter_list_names = iter(list(self.icons))
return (
MDBoxLayout(
MDTopAppBar(title="Example Tabs"),
MDTabs(id="tabs"),
orientation="vertical",
)
)
def on_start(self):
for name_tab in list(self.icons):
self.root.ids.tabs.add_widget(
Tab(
MDBoxLayout(
MDIconButton(
id="icon",
icon="arrow-right",
icon_size="48sp",
on_release=self.switch_tab_by_name,
),
MDIconButton(
id="icon2",
icon="arrow-left",
icon_size="48sp",
on_release=self.switch_tab_by_object,
),
orientation="vertical",
pos_hint={"center_x": .5, "center_y": .5},
adaptive_size=True,
spacing=dp(48),
),
tab_label_text=name_tab,
)
)
self.iter_list_objects = iter(list(self.root.ids.tabs.get_tab_list()))
try:
x = next(self.iter_list_names)
print(f"Switch slide by name, next element to show: [{x}]")
self.root.ids.tabs.switch_tab(x)
except StopIteration:
# Reset the iterator an begin again.
self.iter_list_names = iter(list(self.icons))
self.switch_tab_by_name()
Example().run()
API - kivymd.uix.tab.tab
Warning: The material design requires that every title label is written in capital letters, because of
this, the string.upper() will be applied to it’s contents.
tab_indicator_height
Height of the tab indicator.
tab_indicator_height is an NumericProperty and defaults to ‘2dp’.
tab_indicator_type
Type of tab indicator. Available options are: ‘line’, ‘fill’, ‘round’, ‘line-rect’ and ‘line-round’.
tab_indicator_type is an OptionProperty and defaults to ‘line’.
tab_hint_x
This option affects the size of each child. if it’s True, the size of each tab will be ignored and will use the
size available by the container.
tab_hint_x is an BooleanProperty and defaults to False.
anim_duration
Duration of the slide animation.
anim_duration is an NumericProperty and defaults to 0.2.
anim_threshold
Animation threshold allow you to change the tab indicator animation effect.
anim_threshold is an BoundedNumericProperty and defaults to 0.8.
allow_stretch
If True, the tab will update dynamically (if tab_hint_x is True) to it’s content width, and wrap any text if
the widget is wider than “360dp”.
If False, the tab won’t update to it’s maximum texture width. this means that the fixed_tab_label_width will
be used as the label width. this will wrap any text inside to fit the fixed value.
allow_stretch is an BooleanProperty and defaults to True.
fixed_tab_label_width
If allow_stretch is False, the class will set this value as the width to all the tabs title label.
fixed_tab_label_width is an NumericProperty and defaults to 140dp.
background_color
Background color of tabs in (r, g, b, a) or string format.
background_color is an ColorProperty and defaults to None.
underline_color
Underline color of tabs in (r, g, b, a) or string format.
underline_color is an ColorProperty and defaults to [0, 0, 0, 0].
text_color_normal
Text color in (r, g, b, a) or string format of the label when it is not selected.
text_color_normal is an ColorProperty and defaults to None.
text_color_active
Text color in (r, g, b, a) or string format of the label when it is selected.
text_color_active is an ColorProperty and defaults to None.
shadow_softness
See kivymd.uix.behaviors.CommonElevationBehavior.shadow_softness attribute.
New in version 1.1.0.
shadow_softness is an NumericProperty and defaults to 12.
shadow_color
See kivymd.uix.behaviors.CommonElevationBehavior.shadow_color attribute.
New in version 1.1.0.
shadow_color is an ColorProperty and defaults to [0, 0, 0, 0.6].
shadow_offset
See kivymd.uix.behaviors.CommonElevationBehavior.shadow_offset attribute.
New in version 1.1.0.
shadow_offset is an ListProperty and defaults to [0, 0].
elevation
See kivymd.uix.behaviors.CommonElevationBehavior.elevation attribute.
elevation is an NumericProperty and defaults to 0.
indicator_color
Color indicator in (r, g, b, a) or string format.
indicator_color is an ColorProperty and defaults to None.
lock_swiping
If True - disable switching tabs by swipe.
lock_swiping is an BooleanProperty and defaults to False.
font_name
Font name for tab text.
font_name is an StringProperty and defaults to ‘Roboto’.
ripple_duration
Ripple duration when long touching to tab.
ripple_duration is an NumericProperty and defaults to 2.
no_ripple_effect
Whether to use the ripple effect when tapping on a tab.
no_ripple_effect is an BooleanProperty and defaults to True.
title_icon_mode
This property sets the mode in wich the tab’s title and icon are shown.
title_icon_mode is an OptionProperty and defaults to ‘Lead’.
force_title_icon_mode
If this property is se to True, it will force the class to update every tab inside the scroll view to the current
title_icon_mode
force_title_icon_mode is an BooleanProperty and defaults to True.
remove_widget(self, widget)
Remove a widget from the children of this widget.
Parameters
widget: Widget
Widget to remove from our children list.
on_slide_progress(self, *args)
This event is deployed every available frame while the tab is scrolling.
on_carousel_index(self, instance_tabs_carousel, index: int)
Called when the Tab index have changed.
This event is deployed by the built in carousel of the class.
on_ref_press(self, *args)
This event will be launched every time the user press a markup enabled label with a link or reference inside.
on_tab_switch(self, *args)
This event is launched every time the current tab is changed.
on_size(self, instance_tab, size: list)
Called when the application screen is resized.
2.3.42 Snackbar
See also:
Material Design spec, Snackbars
Snackbars provide brief messages about app processes at the bottom of the screen.
Usage
MDSnackbar(
MDLabel(
text="First string",
theme_text_color="Custom",
text_color="#393231",
),
).open()
Example
KV = '''
MDScreen:
MDRaisedButton:
text: "Create simple snackbar"
on_release: app.open_snackbar()
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def open_snackbar(self):
MDSnackbar(
MDLabel(
text="First string",
),
).open()
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Example().run()
MDSnackbar(
MDLabel(
text="First string",
),
pos=(dp(24), dp(56)),
size_hint_x=0.5,
).open()
MDSnackbar(
MDLabel(
text="First string",
theme_text_color="Custom",
text_color="#393231",
),
MDLabel(
text="Second string",
theme_text_color="Custom",
text_color="#393231",
),
y=dp(24),
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
md_bg_color="#E8D8D7",
).open()
A snackbar can contain a single action. “Dismiss” or “cancel” actions are optional:
MDSnackbar(
MDLabel(
text="First string",
theme_text_color="Custom",
text_color="#393231",
),
MDSnackbarActionButton(
text="Done",
theme_text_color="Custom",
text_color="#8E353C",
),
y=dp(24),
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
md_bg_color="#E8D8D7",
).open()
def open_snackbar(self):
self.snackbar = MDSnackbar(
MDLabel(
text="First string",
theme_text_color="Custom",
text_color="#393231",
),
MDSnackbarActionButton(
text="Done",
theme_text_color="Custom",
text_color="#8E353C",
_no_ripple_effect=True,
on_release=self.snackbar_action_button_callback,
),
y=dp(24),
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
md_bg_color="#E8D8D7",
)
self.snackbar.open()
MDSnackbar(
MDLabel(
text="If an action is long, it can be displayed",
theme_text_color="Custom",
text_color="#393231",
),
MDLabel(
text="on a third line.",
theme_text_color="Custom",
text_color="#393231",
),
MDLabel(
text=" ",
),
MDSnackbarActionButton(
text="Action button",
theme_text_color="Custom",
text_color="#8E353C",
y=dp(8),
_no_ripple_effect=True,
),
y=dp(24),
(continues on next page)
def open_snackbar(self):
self.snackbar = MDSnackbar(
MDLabel(
text="Icon (optional close affordance)",
theme_text_color="Custom",
text_color="#393231",
),
MDSnackbarActionButton(
text="Action button",
theme_text_color="Custom",
text_color="#8E353C",
_no_ripple_effect=True,
),
MDSnackbarCloseButton(
icon="close",
theme_text_color="Custom",
text_color="#8E353C",
_no_ripple_effect=True,
on_release=self.snackbar_close,
),
y=dp(24),
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
md_bg_color="#E8D8D7",
)
self.snackbar.open()
API break
1.1.1 version
snackbar = Snackbar(
text="First string",
snackbar_x="10dp",
snackbar_y="24dp",
)
snackbar.size_hint_x = (
(continues on next page)
1.2.0 version
MDSnackbar(
MDLabel(
text=”First string”,
), MDSnackbarActionButton(
text=”Done”, theme_text_color=”Custom”, text_color=”#8E353C”,
), y=dp(24), pos_hint={“center_x”: 0.5}, size_hint_x=0.5, md_bg_color=”#E8D8D7”,
).open()
API - kivymd.uix.snackbar.snackbar
show_transition
The type of transition of the snackbar opening.
New in version 1.2.0.
show_transition is a StringProperty and defaults to ‘linear’.
show_duration
Duration of snackbar display transition.
New in version 1.2.0.
show_duration is a NumericProperty and defaults to 0.2.
hide_transition
The type of transition of the snackbar closing.
New in version 1.2.0.
hide_transition is a StringProperty and defaults to ‘linear’.
hide_duration
Duration of snackbar closing transition.
New in version 1.2.0.
hide_duration is a NumericProperty and defaults to 0.2.
duration
The amount of time that the snackbar will stay on screen for.
duration is a NumericProperty and defaults to 3.
auto_dismiss
Whether to use automatic closing of the snackbar or not.
auto_dismiss is a BooleanProperty and defaults to True.
radius
Snackbar radius.
radius is a ListProperty and defaults to [5, 5, 5, 5]
bg_color
Snackbar background color in (r, g, b, a) or string format.
Deprecated since version 1.2.0: Use ‘md_bg_color` instead.
bg_color is a ColorProperty and defaults to None.
buttons
Snackbar buttons.
Deprecated since version 1.2.0.
buttons is a ListProperty and defaults to []
snackbar_animation_dir
Snackbar animation direction. Available options are: ‘Top’, ‘Bottom’, ‘Left’, ‘Right’.
Deprecated since version 1.2.0.
snackbar_animation_dir is an OptionProperty and defaults to ‘Bottom’.
snackbar_x
The snackbar x position in the screen
Deprecated since version 1.2.0.
snackbar_x is a NumericProperty and defaults to 0.
snackbar_y
The snackbar x position in the screen
Deprecated since version 1.2.0.
snackbar_y is a NumericProperty and defaults to 0.
dismiss(self, *args)
Dismiss the snackbar.
open(self )
Show the snackbar.
add_widget(self, widget, *args, **kwargs)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
on_open(self, *args)
Called when a snackbar opened.
on_dismiss(self, *args)
Called when a snackbar closed.
2.3.43 FitImage
Feature to automatically crop a Kivy image to fit your layout Write by Benedikt Zwölfer
Referene - https://gist.github.com/benni12er/95a45eb168fc33a4fcd2d545af692dad
Example:
Declarative KV styles
MDBoxLayout:
size_hint_y: None
height: "200dp"
orientation: 'vertical'
FitImage:
size_hint_y: 3
source: 'images/img1.jpg'
FitImage:
size_hint_y: 1
source: 'images/img2.jpg'
MDBoxLayout(
FitImage(
size_hint_y=.3,
source='images/img1.jpg',
),
FitImage(
size_hint_y=.7,
source='images/img2.jpg',
),
size_hint_y=None,
height="200dp",
orientation='vertical',
)
Declarative KV styles
KV = '''
MDScreen:
MDCard:
radius: 36
md_bg_color: "grey"
pos_hint: {"center_x": .5, "center_y": .5}
size_hint: .4, .8
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return (
MDScreen(
MDCard(
FitImage(
source="bg.jpg",
size_hint_y=0.35,
pos_hint={"top": 1},
radius=(36, 36, 0, 0),
),
radius=36,
md_bg_color="grey",
pos_hint={"center_x": .5, "center_y": .5},
size_hint=(0.4, 0.8),
),
)
)
Example().run()
API - kivymd.uix.fitimage.fitimage
class kivymd.uix.fitimage.fitimage.FitImage(**kwargs)
Fit image class.
For more information, see in the MDLayout and StencilBehavior classes documentation.
source
Filename/source of your image.
source is a StringProperty and defaults to None.
mipmap
Indicate if you want OpenGL mipmapping to be applied to the texture. Read Mipmapping for more infor-
mation.
New in version 1.0.0.
mipmap is a BooleanProperty and defaults to False.
reload(self )
2.3.44 NavigationDrawer
See also:
Material Design 2 spec, Navigation drawer and Material Design 3 spec, Navigation drawer
When using the class MDNavigationDrawer skeleton of your KV markup should look like this:
Anatomy
Root:
MDNavigationLayout:
MDScreenManager:
Screen_1:
Screen_2:
(continues on next page)
MDNavigationDrawer:
A simple example
Declarative KV styles
KV = '''
MDScreen:
MDNavigationLayout:
MDScreenManager:
MDScreen:
MDTopAppBar:
title: "Navigation Drawer"
elevation: 4
pos_hint: {"top": 1}
md_bg_color: "#e7e4c0"
specific_text_color: "#4a4939"
left_action_items:
[['menu', lambda x: nav_drawer.set_state("open")]]
MDNavigationDrawer:
id: nav_drawer
radius: (0, 16, 16, 0)
ContentNavigationDrawer:
'''
class ContentNavigationDrawer(MDBoxLayout):
pass
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
(continues on next page)
Example().run()
class ContentNavigationDrawer(MDBoxLayout):
pass
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return(
MDScreen(
MDNavigationLayout(
MDScreenManager(
MDScreen(
MDTopAppBar(
title="Navigation Drawer",
elevation=4,
pos_hint={"top": 1},
md_bg_color="#e7e4c0",
specific_text_color="#4a4939",
left_action_items=[
['menu', lambda x: self.nav_drawer_open()]
],
)
)
),
MDNavigationDrawer(
ContentNavigationDrawer(),
id="nav_drawer",
radius=(0, 16, 16, 0),
),
),
),
)
Example().run()
Declarative KV styles
KV = '''
<DrawerClickableItem@MDNavigationDrawerItem>
focus_color: "#e7e4c0"
text_color: "#4a4939"
icon_color: "#4a4939"
ripple_color: "#c5bdd2"
selected_color: "#0c6c4d"
<DrawerLabelItem@MDNavigationDrawerItem>
text_color: "#4a4939"
icon_color: "#4a4939"
focus_behavior: False
selected_color: "#4a4939"
_no_ripple_effect: True
MDScreen:
MDNavigationLayout:
MDScreenManager:
MDScreen:
MDTopAppBar:
title: "Navigation Drawer"
elevation: 4
pos_hint: {"top": 1}
md_bg_color: "#e7e4c0"
specific_text_color: "#4a4939"
left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]
MDNavigationDrawerMenu:
MDNavigationDrawerHeader:
title: "Header title"
title_color: "#4a4939"
text: "Header text"
spacing: "4dp"
padding: "12dp", 0, 0, "56dp"
MDNavigationDrawerLabel:
text: "Mail"
DrawerClickableItem:
icon: "gmail"
right_text: "+99"
text_right_color: "#4a4939"
text: "Inbox"
DrawerClickableItem:
icon: "send"
text: "Outbox"
MDNavigationDrawerDivider:
MDNavigationDrawerLabel:
text: "Labels"
DrawerLabelItem:
icon: "information-outline"
text: "Label"
DrawerLabelItem:
icon: "information-outline"
text: "Label"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
class BaseNavigationDrawerItem(MDNavigationDrawerItem):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.radius = 24
self.text_color = "#4a4939"
self.icon_color = "#4a4939"
self.focus_color = "#e7e4c0"
class DrawerLabelItem(BaseNavigationDrawerItem):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.focus_behavior = False
self._no_ripple_effect = True
self.selected_color = "#4a4939"
class DrawerClickableItem(BaseNavigationDrawerItem):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.ripple_color = "#c5bdd2"
self.selected_color = "#0c6c4d"
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return(
MDScreen(
MDNavigationLayout(
MDScreenManager(
MDScreen(
MDTopAppBar(
title="Navigation Drawer",
elevation=4,
pos_hint={"top": 1},
md_bg_color="#e7e4c0",
specific_text_color="#4a4939",
(continues on next page)
)
),
MDNavigationDrawer(
MDNavigationDrawerMenu(
MDNavigationDrawerHeader(
title="Header title",
title_color="#4a4939",
text="Header text",
spacing="4dp",
padding=("12dp", 0, 0, "56dp"),
),
MDNavigationDrawerLabel(
text="Mail",
),
DrawerClickableItem(
icon="gmail",
right_text="+99",
text_right_color="#4a4939",
text="Inbox",
),
DrawerClickableItem(
icon="send",
text="Outbox",
),
MDNavigationDrawerDivider(),
MDNavigationDrawerLabel(
text="Labels",
),
DrawerLabelItem(
icon="information-outline",
text="Label",
),
DrawerLabelItem(
icon="information-outline",
text="Label",
),
),
id="nav_drawer",
radius=(0, 16, 16, 0),
)
)
)
)
Example().run()
Declarative KV styles
KV = '''
<ContentNavigationDrawer>
MDList:
OneLineListItem:
text: "Screen 1"
on_press:
root.nav_drawer.set_state("close")
root.screen_manager.current = "scr 1"
OneLineListItem:
text: "Screen 2"
on_press:
root.nav_drawer.set_state("close")
root.screen_manager.current = "scr 2"
MDScreen:
MDTopAppBar:
pos_hint: {"top": 1}
elevation: 4
title: "MDNavigationDrawer"
left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]
MDNavigationLayout:
MDScreenManager:
id: screen_manager
MDScreen:
name: "scr 1"
MDLabel:
(continues on next page)
MDScreen:
name: "scr 2"
MDLabel:
text: "Screen 2"
halign: "center"
MDNavigationDrawer:
id: nav_drawer
radius: (0, 16, 16, 0)
ContentNavigationDrawer:
screen_manager: screen_manager
nav_drawer: nav_drawer
'''
class ContentNavigationDrawer(MDScrollView):
screen_manager = ObjectProperty()
nav_drawer = ObjectProperty()
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
return (
MDScreen(
(continues on next page)
def nav_drawer_open(self):
(continues on next page)
Example().run()
API - kivymd.uix.navigationdrawer.navigationdrawer
MDNavigationDrawer:
MDNavigationDrawerMenu:
MDNavigationDrawerLabel:
text: "Mail"
text
Text label.
text is a StringProperty and defaults to ‘’.
padding
Padding between layout box and children: [padding_left, padding_top, padding_right, padding_bottom].
Padding also accepts a two argument form [padding_horizontal, padding_vertical] and a one argument form
[padding].
padding is a VariableListProperty and defaults to [‘20dp’, 0, 0, ‘8dp’].
class kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawerDivider(*args,
**kwargs)
Implements a divider for a menu for MDNavigationDrawer class.
For more information, see in the MDBoxLayout class documentation.
New in version 1.0.0.
MDNavigationDrawer:
MDNavigationDrawerMenu:
MDNavigationDrawerLabel:
text: "Mail"
(continues on next page)
MDNavigationDrawerDivider:
padding
Padding between layout box and children: [padding_left, padding_top, padding_right, padding_bottom].
Padding also accepts a two argument form [padding_horizontal, padding_vertical] and a one argument form
[padding].
padding is a VariableListProperty and defaults to [‘20dp’, ‘12dp’, 0, ‘12dp’].
color
Divider color in (r, g, b, a) or string format.
color is a ColorProperty and defaults to None.
class kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawerHeader(**kwargs)
Implements a header for a menu for MDNavigationDrawer class.
For more information, see in the MDBoxLayout class documentation.
New in version 1.0.0.
MDNavigationDrawer:
MDNavigationDrawerMenu:
(continues on next page)
MDNavigationDrawerHeader:
title: "Header title"
text: "Header text"
spacing: "4dp"
padding: "12dp", 0, 0, "56dp"
source
Image logo path.
MDNavigationDrawer:
MDNavigationDrawerMenu:
MDNavigationDrawerHeader:
title: "Header title"
text: "Header text"
source: "logo.png"
spacing: "4dp"
padding: "12dp", 0, 0, "56dp"
text_halign
Text halign first line.
text_halign is a StringProperty and defaults to ‘left’.
text_color
Title text color in (r, g, b, a) or string format.
text_color is a ColorProperty and defaults to None.
text_font_style
Title shown in the first line.
text_font_style is a StringProperty and defaults to ‘H6’.
text_font_size
Title shown in the first line.
text_font_size is a StringProperty and defaults to ’20sp’.
check_content(self, interval: int | float)
Removes widgets that the user has not added to the container.
class kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawerItem(*args, **kwargs)
Implements an item for the MDNavigationDrawer menu list.
For more information, see in the OneLineAvatarIconListItem and FocusBehavior class documentation.
New in version 1.0.0.
MDNavigationDrawer:
MDNavigationDrawerMenu:
MDNavigationDrawerHeader:
title: "Header title"
text: "Header text"
spacing: "4dp"
padding: "12dp", 0, 0, "56dp"
MDNavigationDrawerItem
icon: "gmail"
right_text: "+99"
text: "Inbox"
selected
Is the item selected.
selected is a BooleanProperty and defaults to False.
icon
Icon item.
icon is a StringProperty and defaults to ‘’.
icon_color
Icon color in (r, g, b, a) or string format item.
icon_color is a ColorProperty and defaults to None.
selected_color
The color in (r, g, b, a) or string format of the icon and text of the selected item.
selected_color is a ColorProperty and defaults to [0, 0, 0, 1].
right_text
Right text item.
right_text is a StringProperty and defaults to ‘’.
text_right_color
Right text color item in (r, g, b, a) or string format.
text_right_color is a ColorProperty and defaults to None.
MDNavigationDrawer:
MDNavigationDrawerMenu:
spacing
Spacing between children, in pixels.
spacing is a NumericProperty and defaults to 0.
add_widget(self, widget, *args, **kwargs)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
type
Type of drawer. Modal type will be on top of screen. Standard type will be at left or right of screen. Also
it automatically disables close_on_click and enable_swiping to prevent closing drawer for standard
type.
For more information, see in the MDCard class documentation.
Standard
MDNavigationDrawer:
type: "standard"
Modal
MDNavigationDrawer:
type: "modal"
Left
MDNavigationDrawer:
anchor: "left"
Right
MDNavigationDrawer:
anchor: "right"
MDNavigationDrawer:
scrim_color: 0, 0, 0, .8
# scrim_color: 0, 0, 0, .2
Padding also accepts a two argument form [padding_horizontal, padding_vertical] and a one argument form
[padding].
Changed in version 1.0.0.
MDNavigationDrawer:
padding: 56, 56, 12, 16
get_dist_from_side(self, x: float)
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.
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.
on_radius(self, instance_navigation_drawer, radius_value: list)
2.3.45 TextField
See also:
Material Design spec, Text fields
Note: MDTextField inherited from TextInput. Therefore, most parameters and all events of the TextInput class
are also available in the MDTextField class.
MDTextField
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
MDTextField:
hint_text: "Persistent helper text"
helper_text: "Text is always here"
helper_text_mode: "persistent"
To display an error in a text field when using the helper_text_mode: "on_error" parameter, set the “error” text
field parameter to True:
KV = '''
MDScreen:
MDTextField:
id: text_field_error
hint_text: "Helper text on error (press 'Enter')"
helper_text: "There will always be a mistake"
helper_text_mode: "on_error"
pos_hint: {"center_x": .5, "center_y": .5}
size_hint_x: .5
(continues on next page)
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
self.screen.ids.text_field_error.bind(
on_text_validate=self.set_error_message,
on_focus=self.set_error_message,
)
return self.screen
Test().run()
MDTextField:
hint_text: "required = True"
text: "required = True"
required: True
helper_text_mode: "on_error"
helper_text: "Enter text"
MDTextField:
hint_text: "Max text length = 5"
max_text_length: 5
MDTextField:
multiline: True
hint_text: "Multi-line text"
Rectangle mode
MDTextField:
hint_text: "Rectangle mode"
mode: "rectangle"
Fill mode
MDTextField:
hint_text: "Fill mode"
mode: "fill"
Round mode
MDTextField:
hint_text: "Round mode"
mode: "round"
max_text_length: 15
helper_text: "Massage"
MDTextFieldRect
Note: MDTextFieldRect inherited from TextInput. You can use all parameters and attributes of the TextInput
class in the MDTextFieldRect class.
MDTextFieldRect:
size_hint: 1, None
height: "30dp"
background_color: app.theme_cls.bg_normal
KV = '''
<ClickableTextFieldRound>:
size_hint_y: None
height: text_field.height
MDTextField:
id: text_field
hint_text: root.hint_text
text: root.text
password: True
icon_left: "key-variant"
MDIconButton:
icon: "eye-off"
pos_hint: {"center_y": .5}
pos: text_field.width - self.width + dp(8), 0
theme_text_color: "Hint"
on_release:
self.icon = "eye" if self.icon == "eye-off" else "eye-off"
text_field.password = False if text_field.password is True else True
MDScreen:
ClickableTextFieldRound:
size_hint_x: None
width: "300dp"
hint_text: "Password"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class ClickableTextFieldRound(MDRelativeLayout):
text = StringProperty()
hint_text = StringProperty()
# Here specify the required parameters for MDTextFieldRound:
# [...]
class Test(MDApp):
(continues on next page)
Test().run()
See also:
See more information in the MDTextFieldRect class.
API - kivymd.uix.textfield.textfield
class kivymd.uix.textfield.textfield.MDTextFieldRect(**kwargs)
Textfield rect class.
For more information, see in the ThemableBehavior and TextInput classes documentation.
line_anim
If True, then text field shows animated line when on focus.
line_anim is an BooleanProperty and defaults to True.
get_rect_instruction(self )
get_color_instruction(self )
mode
Text field mode. Available options are: ‘line’, ‘rectangle’, ‘fill’, ‘round’.
mode is an OptionProperty and defaults to ‘line’.
phone_mask
validator
The type of text field for entering Email, time, etc. Automatically sets the type of the text field as “error” if
the user input does not match any of the set validation types. Available options are: ‘date’, ‘email’, ‘time’.
When using ‘date’, date_format must be defined.
New in version 1.1.0.
MDTextField:
hint_text: "Email"
helper_text: "user@gmail.com"
validator: "email"
Declarative KV style
KV = '''
MDScreen:
MDBoxLayout:
orientation: "vertical"
spacing: "20dp"
adaptive_height: True
size_hint_x: .8
pos_hint: {"center_x": .5, "center_y": .5}
MDTextField:
(continues on next page)
MDTextField:
hint_text: "Date mm/dd/yyyy without limits"
helper_text: "Enter a valid mm/dd/yyyy date"
validator: "date"
date_format: "mm/dd/yyyy"
MDTextField:
hint_text: "Date yyyy/mm/dd without limits"
helper_text: "Enter a valid yyyy/mm/dd date"
validator: "date"
date_format: "yyyy/mm/dd"
MDTextField:
hint_text: "Date dd/mm/yyyy in [01/01/1900, 01/01/2100] interval"
helper_text: "Enter a valid dd/mm/yyyy date"
validator: "date"
date_format: "dd/mm/yyyy"
date_interval: "01/01/1900", "01/01/2100"
MDTextField:
hint_text: "Date dd/mm/yyyy in [01/01/1900, None] interval"
helper_text: "Enter a valid dd/mm/yyyy date"
validator: "date"
date_format: "dd/mm/yyyy"
date_interval: "01/01/1900", None
MDTextField:
hint_text: "Date dd/mm/yyyy in [None, 01/01/2100] interval"
helper_text: "Enter a valid dd/mm/yyyy date"
validator: "date"
date_format: "dd/mm/yyyy"
date_interval: None, "01/01/2100"
'''
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Test().run()
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDBoxLayout(
MDTextField(
hint_text="Date dd/mm/yyyy without limits",
helper_text="Enter a valid dd/mm/yyyy date",
validator="date",
date_format="dd/mm/yyyy",
),
MDTextField(
hint_text="Date mm/dd/yyyy without limits",
helper_text="Enter a valid mm/dd/yyyy date",
validator="date",
date_format="mm/dd/yyyy",
),
MDTextField(
hint_text="Date yyyy/mm/dd without limits",
helper_text="Enter a valid yyyy/mm/dd date",
validator="date",
date_format="yyyy/mm/dd",
),
MDTextField(
hint_text="Date dd/mm/yyyy in [01/01/1900, 01/01/2100]␣
˓→interval",
Test().run()
MDTextField:
hint_text: "line_color_normal"
line_color_normal: "red"
MDTextField:
hint_text: "line_color_focus"
line_color_focus: "red"
error
If True, then the text field goes into error mode.
error is an BooleanProperty and defaults to False.
hint_text_color_normal
Hint text color in (r, g, b, a) or string format when text field is out of focus.
New in version 1.0.0.
MDTextField:
hint_text: "hint_text_color_normal"
hint_text_color_normal: "red"
MDTextField:
hint_text: "hint_text_color_focus"
hint_text_color_focus: "red"
MDTextField:
helper_text: "helper_text_color_normal"
helper_text_mode: "persistent"
helper_text_color_normal: "red"
helper_text_color_focus
Helper text color in (r, g, b, a) or string format when the text field has focus.
New in version 1.0.0.
MDTextField:
helper_text: "helper_text_color_focus"
helper_text_mode: "persistent"
helper_text_color_focus: "red"
MDTextField:
icon_right: "language-python"
hint_text: "icon_right_color_normal"
icon_right_color_normal: "red"
MDTextField:
icon_right: "language-python"
hint_text: "icon_right_color_focus"
icon_right_color_focus: "red"
icon_left_color_focus
Color in (r, g, b, a) or string format of right icon when the text field has focus.
New in version 1.0.0.
icon_left_color_focus is an ColorProperty and defaults to [0, 0, 0, 0].
max_length_text_color
Text color in (r, g, b, a) or string format of the maximum length of characters to be input.
New in version 1.0.0.
MDTextField:
hint_text: "max_length_text_color"
max_length_text_color: "red"
max_text_length: 5
Note: It’s just a texture. It has no press/touch events. Also note that you cannot use the left and right icons
at the same time yet.
MDTextField:
hint_text: "text_color_normal"
text_color_normal: "red"
MDTextField:
hint_text: "text_color_focus"
text_color_focus: "red"
MDTextField:
size_hint_x: .5
hint_text: "multiline=True"
max_height: "200dp"
mode: "fill"
fill_color: 0, 0, 0, .4
multiline: True
pos_hint: {"center_x": .5, "center_y": .5}
radius
The corner radius for a text field in fill/rectangle mode.
radius is a ListProperty and defaults to [10, 10, 0, 0].
font_name_helper_text
Font name for helper text.
font_name_helper_text is an StringProperty and defaults to ‘Roboto’.
font_name_hint_text
Font name for hint text.
font_name_hint_text is an StringProperty and defaults to ‘Roboto’.
font_name_max_length
Font name for max text length.
font_name_max_length is an StringProperty and defaults to ‘Roboto’.
cancel_all_animations_on_double_click(self )
Cancels the animations of the text field when double-clicking on the text field.
set_colors_to_updated(self, interval: float | int)
set_objects_labels(self )
Creates labels objects for the parameters`helper_text`,`hint_text`, etc.
on_helper_text(self, instance_text_field, helper_text: str)
2.3.46 SelectionControls
See also:
Material Design spec, Checkbox
Material Design spec, Switch
MDCheckbox
Usage
KV = '''
MDFloatLayout:
MDCheckbox:
size_hint: None, None
size: "48dp", "48dp"
pos_hint: {'center_x': .5, 'center_y': .5}
(continues on next page)
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
Note: Be sure to specify the size of the checkbox. By default, it is (dp(48), dp(48)), but the ripple effect takes up all
the available space.
Control state
MDCheckbox:
on_active: app.on_checkbox_active(*args)
KV = '''
<Check@MDCheckbox>:
group: 'group'
size_hint: None, None
size: dp(48), dp(48)
MDFloatLayout:
Check:
active: True
pos_hint: {'center_x': .4, 'center_y': .5}
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, all child
checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all,
child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.
Usage
MDCheckbox:
group: "root" # this is a required name for the parent checkbox group
MDCheckbox:
group: "child" # this is a required name for a group of child checkboxes
MDCheckbox:
group: "child" # this is a required name for a group of child checkboxes
Example
KV = '''
<CheckItem>
adaptive_height: True
MDCheckbox:
size_hint: None, None
size: "48dp", "48dp"
(continues on next page)
MDLabel:
text: root.text
adaptive_height: True
theme_text_color: "Custom"
text_color: "#B2B6AE"
pos_hint: {"center_y": .5}
MDBoxLayout:
orientation: "vertical"
md_bg_color: "#141612"
MDTopAppBar:
md_bg_color: "#21271F"
specific_text_color: "#B2B6AE"
elevation: 0
title: "Meal options"
left_action_items: [["arrow-left", lambda x: x]]
anchor_title: "left"
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
padding: "12dp", "36dp", 0, 0
CheckItem:
text: "Recieve emails"
group: "root"
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
padding: "24dp", 0, 0, 0
CheckItem:
text: "Daily"
group: "child"
CheckItem:
text: "Weekly"
group: "child"
CheckItem:
text: "Monthly"
group: "child"
MDWidget:
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Teal"
return Builder.load_string(KV)
Example().run()
MDSwitch
Usage
KV = '''
MDFloatLayout:
MDSwitch:
pos_hint: {'center_x': .5, 'center_y': .5}
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.selectioncontrol.selectioncontrol
class kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox(**kwargs)
Checkbox class.
For more information, see in the CircularRippleBehavior and ToggleButtonBehavior and MDIcon classes
documentation.
active
Indicates if the checkbox is active or inactive.
active is a BooleanProperty and defaults to False.
checkbox_icon_normal
Background icon of the checkbox used for the default graphical representation when the checkbox is not
pressed.
checkbox_icon_normal is a StringProperty and defaults to ‘checkbox-blank-outline’.
checkbox_icon_down
Background icon of the checkbox used for the default graphical representation when the checkbox is
pressed.
checkbox_icon_down is a StringProperty and defaults to ‘checkbox-marked’.
radio_icon_normal
Background icon (when using the group option) of the checkbox used for the default graphical representa-
tion when the checkbox is not pressed.
radio_icon_normal is a StringProperty and defaults to ‘checkbox-blank-circle-outline’.
radio_icon_down
Background icon (when using the group option) of the checkbox used for the default graphical representa-
tion when the checkbox is pressed.
radio_icon_down is a StringProperty and defaults to ‘checkbox-marked-circle’.
color_active
Color in (r, g, b, a) or string format when the checkbox is in the active state.
New in version 1.0.0.
MDCheckbox:
color_active: "red"
MDCheckbox:
color_inactive: "blue"
MDCheckbox:
disabled_color: "lightgrey"
disabled: True
active: True
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.
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.
class kivymd.uix.selectioncontrol.selectioncontrol.MDSwitch(**kwargs)
Switch class.
For more information, see in the ThemableBehavior and FloatLayout classes documentation.
active
Indicates if the switch is active or inactive.
active is a BooleanProperty and defaults to False.
icon_active
Thumb icon when the switch is in the active state (only M3 style).
New in version 1.0.0.
MDSwitch:
active: True
icon_active: "check"
MDSwitch:
icon_inactive: "close"
MDSwitch:
active: True
icon_active: "check"
icon_active_color: "white"
MDSwitch:
icon_inactive: "close"
icon_inactive_color: "grey"
MDSwitch:
active: True
thumb_color_active: "brown"
MDSwitch:
thumb_color_inactive: "brown"
MDSwitch:
active: True
thumb_color_disabled: "brown"
disabled: True
MDSwitch:
active: True
track_color_active: "red"
MDSwitch:
track_color_inactive: "red"
MDSwitch:
track_color_disabled: "lightgrey"
disabled: True
2.3.47 SegmentedControl
Usage
Declarative KV style
KV = '''
MDScreen:
MDSegmentedControl:
pos_hint: {"center_x": .5, "center_y": .5}
MDSegmentedControlItem:
text: "Male"
MDSegmentedControlItem:
text: "Female"
MDSegmentedControlItem:
text: "All"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDSegmentedControl(
MDSegmentedControlItem(
text="Male"
),
MDSegmentedControlItem(
text="Female"
),
MDSegmentedControlItem(
text="All"
),
pos_hint={"center_x": 0.5, "center_y": 0.5}
)
)
)
Example().run()
Events
MDSegmentedControl:
on_active: app.on_active(*args)
def on_active(
self,
segmented_control: MDSegmentedControl,
segmented_item: MDSegmentedControlItem,
) -> None:
'''Called when the segment is activated.'''
API - kivymd.uix.segmentedcontrol.segmentedcontrol
MDSegmentedControl:
md_bg_color: "brown"
MDSegmentedControl:
md_bg_color: "brown"
segment_color: "red"
MDSegmentedControl:
md_bg_color: "brown"
segment_color: "red"
MDSegmentedControlItem:
text: "[color=fff]Male[/color]"
MDSegmentedControl:
segment_panel_height: "56dp"
MDSegmentedControl:
md_bg_color: "brown"
segment_color: "red"
separator_color: "white"
MDSegmentedControl:
radius: 0
on_active(self, *args)
Called when the segment is activated.
2.3.48 Dialog
See also:
Material Design spec, Dialogs
Dialogs inform users about a task and can contain critical information, require decisions, or involve
multiple tasks.
Usage
KV = '''
MDFloatLayout:
MDFlatButton:
text: "ALERT DIALOG"
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_alert_dialog()
'''
class Example(MDApp):
dialog = None
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.dialog.dialog
class kivymd.uix.dialog.dialog.BaseDialog(**kwargs)
ModalView class. See module documentation for more information.
Events
on_pre_open:
Fired before the ModalView is opened. When this event is fired ModalView is not yet added
to window.
on_open:
Fired when the ModalView is opened.
on_pre_dismiss:
Fired before the ModalView is closed.
on_dismiss:
Fired when the ModalView is closed. If the callback returns True, the dismiss will be can-
celed.
Changed in version 1.11.0: Added events on_pre_open and on_pre_dismiss.
Changed in version 2.0.0: Added property ‘overlay_color’.
Changed in version 2.1.0: Marked attach_to property as deprecated.
elevation
See kivymd.uix.behaviors.elevation.CommonElevationBehavior.elevation attribute for
more information.
New in version 1.1.0.
elevation is an NumericProperty and defaults to 3.
shadow_softness
See kivymd.uix.behaviors.elevation.CommonElevationBehavior.shadow_softness attribute
for more information.
New in version 1.1.0.
shadow_softness is an NumericProperty and defaults to 24.
shadow_offset
See kivymd.uix.behaviors.elevation.CommonElevationBehavior.shadow_offset attribute for
more information.
New in version 1.1.0.
shadow_offset is an ListProperty and defaults to [0, 4].
radius
Dialog corners rounding value.
[...]
self.dialog = MDDialog(
text="Oops! Something seems to have gone wrong!",
radius=[20, 7, 20, 7],
)
[...]
class kivymd.uix.dialog.dialog.MDDialog(**kwargs)
Dialog class.
For more information, see in the ThemableBehavior and ModalView and CommonElevationBehavior classes
documentation.
title
Title dialog.
[...]
self.dialog = MDDialog(
title="Reset settings?",
buttons=[
MDFlatButton(
text="CANCEL",
theme_text_color="Custom",
text_color=self.theme_cls.primary_color,
),
MDFlatButton(
text="ACCEPT",
theme_text_color="Custom",
text_color=self.theme_cls.primary_color,
),
],
)
[...]
[...]
self.dialog = MDDialog(
title="Reset settings?",
text="This will reset your device to its default factory settings.",
buttons=[
MDFlatButton(
text="CANCEL",
theme_text_color="Custom",
(continues on next page)
[...]
self.dialog = MDDialog(
text="Discard draft?",
buttons=[
MDFlatButton(text="CANCEL"), MDRaisedButton(text="DISCARD"),
],
)
[...]
items
List of items objects for dialog. Objects must be inherited from BaseListItem class.
KV = '''
<Item>
ImageLeftWidget:
source: root.source
MDFloatLayout:
MDFlatButton:
text: "ALERT DIALOG"
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_simple_dialog()
'''
class Item(OneLineAvatarListItem):
divider = None
source = StringProperty()
class Example(MDApp):
dialog = None
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def show_simple_dialog(self):
if not self.dialog:
self.dialog = MDDialog(
title="Set backup account",
type="simple",
items=[
Item(text="user01@gmail.com", source="kivymd/images/logo/
˓→kivymd-icon-128.png"),
Item(text="user02@gmail.com", source="data/logo/kivy-icon-
˓→128.png"),
],
(continues on next page)
Example().run()
KV = '''
<ItemConfirm>
on_release: root.set_icon(check)
CheckboxLeftWidget:
id: check
group: "check"
MDFloatLayout:
MDFlatButton:
text: "ALERT DIALOG"
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_confirmation_dialog()
'''
class ItemConfirm(OneLineAvatarIconListItem):
divider = None
class Example(MDApp):
dialog = None
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def show_confirmation_dialog(self):
if not self.dialog:
self.dialog = MDDialog(
title="Phone ringtone",
type="confirmation",
items=[
ItemConfirm(text="Callisto"),
ItemConfirm(text="Luna"),
ItemConfirm(text="Night"),
ItemConfirm(text="Solo"),
ItemConfirm(text="Phobos"),
ItemConfirm(text="Diamond"),
ItemConfirm(text="Sirena"),
ItemConfirm(text="Red music"),
ItemConfirm(text="Allergio"),
ItemConfirm(text="Magic"),
ItemConfirm(text="Tic-tac"),
],
buttons=[
MDFlatButton(
text="CANCEL",
theme_text_color="Custom",
text_color=self.theme_cls.primary_color,
),
MDFlatButton(
text="OK",
theme_text_color="Custom",
text_color=self.theme_cls.primary_color,
),
],
)
self.dialog.open()
Example().run()
KV = '''
<Content>
orientation: "vertical"
spacing: "12dp"
size_hint_y: None
height: "120dp"
(continues on next page)
MDTextField:
hint_text: "City"
MDTextField:
hint_text: "Street"
MDFloatLayout:
MDFlatButton:
text: "ALERT DIALOG"
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_confirmation_dialog()
'''
class Content(BoxLayout):
pass
class Example(MDApp):
dialog = None
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def show_confirmation_dialog(self):
if not self.dialog:
self.dialog = MDDialog(
title="Address:",
type="custom",
content_cls=Content(),
buttons=[
MDFlatButton(
text="CANCEL",
theme_text_color="Custom",
text_color=self.theme_cls.primary_color,
),
MDFlatButton(
text="OK",
theme_text_color="Custom",
text_color=self.theme_cls.primary_color,
),
],
)
self.dialog.open()
Example().run()
class Example(MDApp):
dialog = None
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDFloatLayout(
MDFlatButton(
text="ALERT DIALOG",
pos_hint={'center_x': 0.5, 'center_y': 0.5},
on_release=self.show_confirmation_dialog,
)
)
)
Example().run()
update_height(self, *args)
on_open(self )
default open event handler.
get_normal_height(self )
edit_padding_for_item(self, instance_item)
create_items(self )
create_buttons(self )
2.3.49 FileManager
Usage
path = os.path.expanduser("~") # path to the directory that will be opened in the file␣
˓→manager
file_manager = MDFileManager(
exit_manager=self.exit_manager, # function called when the user reaches directory␣
˓→tree root
Warning: Be careful! To use the ‘/’ path on Android devices, you need special permissions. Therefore, you are
likely to get an error.
file_manager = MDFileManager(
exit_manager=self.exit_manager,
select_path=self.select_path,
preview=True,
)
Warning: The preview mode is intended only for viewing images and will not display other types of files.
Example
import os
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "MDFileManager"
left_action_items: [["menu", lambda x: None]]
elevation: 3
MDFloatLayout:
MDRoundFlatIconButton:
(continues on next page)
class Example(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
Window.bind(on_keyboard=self.events)
self.manager_open = False
self.file_manager = MDFileManager(
exit_manager=self.exit_manager, select_path=self.select_path
)
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
def file_manager_open(self):
self.file_manager.show(os.path.expanduser("~")) # output manager to the screen
self.manager_open = True
self.exit_manager()
toast(path)
self.manager_open = False
self.file_manager.close()
Example().run()
def file_manager_open(self):
self.file_manager.show_disks()
API - kivymd.uix.filemanager.filemanager
MDFileManager(
...
icon_selection_button="pencil",
)
MDFileManager(
...
background_color_selection_button="brown",
)
MDFileManager(
...
background_color_toolbar="brown",
)
MDFileManager(
...
preview=True,
icon_folder="path/to/icon.png",
)
MDFileManager(
...
preview=False,
icon_color="brown",
)
show_hidden_files
Shows hidden files.
show_hidden_files is an BooleanProperty and defaults to False.
sort_by
It can take the values ‘nothing’ ‘name’ ‘date’ ‘size’ ‘type’ - sorts files by option. By default, sort by name.
Available options are: ‘nothing’, ‘name’, ‘date’, ‘size’, ‘type’.
sort_by is an OptionProperty and defaults to name.
sort_by_desc
Sort by descending.
sort_by_desc is an BooleanProperty and defaults to False.
selector
It can take the values ‘any’ ‘file’ ‘folder’ ‘multi’ By default, any. Available options are: ‘any’, ‘file’, ‘folder’,
‘multi’.
selector is an OptionProperty and defaults to any.
selection
Contains the list of files that are currently selected.
selection is a read-only ListProperty and defaults to [].
selection_button
The instance of the directory/path selection button.
New in version 1.1.0.
selection_button is a read-only ObjectProperty and defaults to None.
show_disks(self )
get_content(self )
Returns a list of the type [[Folder List], [file list]].
close(self )
Closes the file manager window.
select_dir_or_file(self, path: str, widget: BodyManagerWithPreview | Factory.BodyManager)
Called by tap on the name of the directory or file.
back(self )
Returning to the branch down in the directory tree.
select_directory_on_press_button(self, *args)
Called when a click on a floating button.
on_icon(self, instance_file_manager, icon_name: str)
Called when the icon property is changed.
2.3.50 DropdownItem
Usage
KV = '''
MDScreen
MDDropDownItem:
id: drop_item
pos_hint: {'center_x': .5, 'center_y': .5}
text: 'Item'
on_release: print("Press item")
'''
class Test(MDApp):
(continues on next page)
def build(self):
return self.screen
Test().run()
See also:
Work with the class MDDropdownMenu see here
API - kivymd.uix.dropdownitem.dropdownitem
2.3.51 Transition
Changing transitions
Note: You cannot control the direction of a slide using the direction attribute.
API - kivymd.uix.transition.transition
class kivymd.uix.transition.transition.MDTransitionBase
TransitionBase is used to animate 2 screens within the MDScreenManager.
For more information, see in the TransitionBase class documentation.
start(self, instance_screen_manager: MDScreenManager)
(internal) Starts the transition. This is automatically called by the ScreenManager.
animated_hero_in(self )
Animates the flight of heroes from screen A to screen B.
animated_hero_out(self )
Animates the flight of heroes from screen B to screen A.
on_complete(self )
Override method. See :attr:`kivy.uix.screenmanager.TransitionBase.on_complete’.
class kivymd.uix.transition.transition.MDSwapTransition(**kwargs)
Swap transition that looks like iOS transition when a new window appears on the screen.
class kivymd.uix.transition.transition.MDSlideTransition
Slide Transition, can be used to show a new screen from any direction: left, right, up or down.
class kivymd.uix.transition.transition.MDFadeSlideTransition
Slide Transition, can be used to show a new screen from any direction: left, right, up or down.
start(self, instance_screen_manager: MDScreenManager)
(internal) Starts the transition. This is automatically called by the ScreenManager.
on_progress(self, progression: float)
2.3.52 BottomNavigation
See also:
Material Design 2 spec, Bottom navigation and Material Design 3 spec, Bottom navigation
Usage
<Root>
MDBottomNavigation:
MDBottomNavigationItem:
name: "screen 1"
YourContent:
MDBottomNavigationItem:
name: "screen 2"
YourContent:
MDBottomNavigationItem:
name: "screen 3"
YourContent:
<Root>
ScreenManager:
Screen:
name: "screen 1"
Screen:
name: "screen 2"
YourContent:
Screen:
name: "screen 3"
YourContent:
Example
Declarative KV style
class Test(MDApp):
def build(self):
self.theme_cls.material_style = "M3"
self.theme_cls.theme_style = "Dark"
return Builder.load_string(
'''
MDScreen:
MDBottomNavigation:
#panel_color: "#eeeaea"
selected_color_background: "orange"
text_color_active: "lightgrey"
MDBottomNavigationItem:
name: 'screen 1'
text: 'Mail'
icon: 'gmail'
badge_icon: "numeric-10"
MDLabel:
text: 'Mail'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 2'
text: 'Twitter'
icon: 'twitter'
badge_icon: "numeric-5"
(continues on next page)
MDLabel:
text: 'Twitter'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 3'
text: 'LinkedIN'
icon: 'linkedin'
MDLabel:
text: 'LinkedIN'
halign: 'center'
'''
)
Test().run()
class Test(MDApp):
def build(self):
self.theme_cls.material_style = "M3"
self.theme_cls.theme_style = "Dark"
return (
MDScreen(
MDBottomNavigation(
MDBottomNavigationItem(
MDLabel(
text='Mail',
halign='center',
),
name='screen 1',
text='Mail',
icon='gmail',
badge_icon="numeric-10",
),
MDBottomNavigationItem(
MDLabel(
text='Twitter',
halign='center',
),
name='screen 1',
text='Twitter',
icon='twitter',
(continues on next page)
Test().run()
__events__ = (
"on_tab_touch_down",
"on_tab_touch_move",
"on_tab_touch_up",
"on_tab_press",
"on_tab_release",
)
Root:
MDBottomNavigation:
MDBottomNavigationItem:
on_tab_touch_down: print("on_tab_touch_down")
on_tab_touch_move: print("on_tab_touch_move")
on_tab_touch_up: print("on_tab_touch_up")
on_tab_press: print("on_tab_press")
on_tab_release: print("on_tab_release")
YourContent:
Use method switch_tab which takes as argument the name of the tab you want to switch to.
MDBottomNavigation:
MDBottomNavigationItem:
icon: "icon.png"
API - kivymd.uix.bottomnavigation.bottomnavigation
on_tab_touch_move(self, *args)
on_tab_touch_up(self, *args)
on_tab_press(self, *args)
on_tab_release(self, *args)
header
header is an MDBottomNavigationHeader and defaults to None.
animate_header(self, bottom_navigation_object, bottom_navigation_header_object)
on_tab_press(self, *args)
Called when clicking on a panel item.
on_disabled(self, instance_bottom_navigation_item, disabled_value: bool)
on_leave(self, *args)
class kivymd.uix.bottomnavigation.bottomnavigation.TabbedPanelBase(**kwargs)
A class that contains all variables a TabPannel must have. It is here so I (zingballyhoo) don’t get mad about the
TabbedPannels not being DRY.
For more information, see in the ThemableBehavior and SpecificBackgroundColorBehavior and
BoxLayout classes documentation.
current
Current tab name.
current is an StringProperty and defaults to None.
previous_tab
previous_tab is an MDTab and defaults to None.
panel_color
Panel color of bottom navigation.
panel_color is an ColorProperty and defaults to None.
tabs
text_color_normal
Text color of the label when it is not selected.
MDBottomNavigation:
text_color_normal: 1, 0, 1, 1
MDBottomNavigation:
text_color_active: 0, 0, 0, 1
MDBottomNavigation:
selected_color_background: 0, 0, 1, .4
MDBottomNavigation:
font_name: "path/to/font.ttf"
switch_tab(self, name_tab)
Switching the tab by name.
refresh_tabs(self, *args)
Refresh all tabs.
on_font_name(self, instance_bottom_navigation, font_name: str)
on_resize(self, instance: WindowSDL | None = None, width: int | None = None, do_again: bool = True)
Called when the application window is resized.
add_widget(self, widget, **kwargs)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
remove_widget(self, widget)
Remove a widget from the children of this widget.
Parameters
widget: Widget
Widget to remove from our children list.
2.3.53 Swiper
Usage
MDSwiper:
MDSwiperItem:
MDSwiperItem:
MDSwiperItem:
Example
kv = '''
<MySwiper@MDSwiperItem>
FitImage:
source: "guitar.png"
radius: [20,]
MDScreen:
MDTopAppBar:
id: toolbar
title: "MDSwiper"
elevation: 4
pos_hint: {"top": 1}
MDSwiper:
size_hint_y: None
height: root.height - toolbar.height - dp(40)
y: root.height - self.height - toolbar.height - dp(20)
MySwiper:
MySwiper:
MySwiper:
MySwiper:
MySwiper:
'''
class Main(MDApp):
def build(self):
return Builder.load_string(kv)
Main().run()
Warning: The width of MDSwiperItem is adjusted automatically. Consider changing that by width_mult.
Warning: The width of MDSwiper is automatically adjusted according to the width of the window.
__events__ = (
"on_swipe",
"on_pre_swipe",
"on_overswipe_right",
"on_overswipe_left",
"on_swipe_left",
"on_swipe_right"
)
MDSwiper:
on_swipe: print("on_swipe")
on_pre_swipe: print("on_pre_swipe")
on_overswipe_right: print("on_overswipe_right")
on_overswipe_left: print("on_overswipe_left")
on_swipe_left: print("on_swipe_left")
on_swipe_right: print("on_swipe_right")
Example
kv = '''
<MagicButton@MagicBehavior+MDIconButton>
<MySwiper@MDSwiperItem>
RelativeLayout:
FitImage:
source: "guitar.png"
radius: [20,]
MDBoxLayout:
adaptive_height: True
spacing: "12dp"
MagicButton:
id: icon
icon: "weather-sunny"
user_font_size: "56sp"
opposite_colors: True
MDLabel:
text: "MDLabel"
font_style: "H5"
size_hint_y: None
(continues on next page)
MDScreen:
MDTopAppBar:
id: toolbar
title: "MDSwiper"
elevation: 4
pos_hint: {"top": 1}
MDSwiper:
size_hint_y: None
height: root.height - toolbar.height - dp(40)
y: root.height - self.height - toolbar.height - dp(20)
on_swipe: self.get_current_item().ids.icon.shake()
MySwiper:
MySwiper:
MySwiper:
MySwiper:
MySwiper:
'''
class Main(MDApp):
def build(self):
return Builder.load_string(kv)
Main().run()
Example
MDSwiper:
id: swiper
MDRaisedButton:
text: "Go to Second"
on_release: swiper.set_current(1)
API - kivymd.uix.swiper.swiper
swipe_distance
Distance to move before swiping the MDSwiperItem.
swipe_distance is an NumericProperty and defaults to 70dp.
width_mult
This number is multiplied by items_spacing x2 and then subtracted from the width of window to specify
the width of MDSwiperItem. So by decreasing the width_mult the width of MDSwiperItem increases
and vice versa.
width_mult is an NumericProperty and defaults to 3.
swipe_on_scroll
Wheter to swipe on mouse wheel scrolling or not.
swipe_on_scroll is an BooleanProperty and defaults to True.
add_widget(self, widget, index=0)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
remove_widget(self, widget)
Remove a widget from the children of this widget.
Parameters
widget: Widget
Widget to remove from our children list.
set_current(self, index)
Switch to given MDSwiperItem index.
get_current_index(self )
Returns the current MDSwiperItem index.
get_current_item(self )
Returns the current MDSwiperItem instance.
get_items(self )
Returns the list of MDSwiperItem children.
on_swipe(self )
on_pre_swipe(self )
on_overswipe_right(self )
on_overswipe_left(self )
on_swipe_left(self )
on_swipe_right(self )
swipe_left(self )
swipe_right(self )
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.
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_up(self, touch)
Receive a touch up event. The touch is in parent coordinates.
See on_touch_down() for more information.
2.3.54 List
See also:
Material Design spec, Lists
The class MDList in combination with a BaseListItem like OneLineListItem will create a list that expands as
items are added to it, working nicely with Kivy’s ScrollView.
Due to the variety in sizes and controls in the Material Design spec, this module suffers from a certain level of com-
plexity to keep the widgets compliant, flexible and performant.
For this KivyMD provides list items that try to cover the most common usecases, when those are insufficient, there’s a
base class called BaseListItem which you can use to create your own list items. This documentation will only cover
the provided ones, for custom implementations please refer to this module’s source code.
KivyMD provides the following list items classes for use:
• OneLineListItem
• TwoLineListItem
• ThreeLineListItem
These widgets will take other widgets that inherit from ILeftBody, ILeftBodyTouch , IRightBody or
IRightBodyTouch and put them in their corresponding container.
As the name implies, ILeftBody and IRightBody will signal that the widget goes into the left or right container,
respectively.
ILeftBodyTouch and IRightBodyTouch do the same thing, except these widgets will also receive touch events that
occur within their surfaces.
KivyMD provides base classes such as ImageLeftWidget, ImageRightWidget, IconRightWidget,
IconLeftWidget, based on the above classes.
• OneLineAvatarListItem
• TwoLineAvatarListItem
• ThreeLineAvatarListItem
• OneLineIconListItem
• TwoLineIconListItem
• ThreeLineIconListItem
It allows the use of elements with custom widgets on the left and the right.
• OneLineAvatarIconListItem
• TwoLineAvatarIconListItem
• ThreeLineAvatarIconListItem
• OneLineRightIconListItem
• TwoLineRightIconListItem
• ThreeLineRightIconListItem
Usage
Declarative KV style
KV = '''
MDScrollView:
MDList:
id: container
'''
(continues on next page)
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def on_start(self):
for i in range(20):
self.root.ids.container.add_widget(
OneLineListItem(text=f"Single-line item {i}")
)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return (
MDScrollView(
MDList(
id="container"
)
)
)
def on_start(self):
for i in range(20):
self.root.ids.container.add_widget(
OneLineListItem(text=f"Single-line item {i}")
)
Example().run()
Events of List
Declarative KV style
KV = '''
(continues on next page)
MDList:
OneLineAvatarIconListItem:
on_release: print("Click!")
IconLeftWidget:
icon: "github"
OneLineAvatarIconListItem:
on_release: print("Click 2!")
IconLeftWidget:
icon: "gitlab"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return (
MDScrollView(
MDList(
OneLineAvatarIconListItem(
IconLeftWidget(
icon="github"
),
on_release=lambda x: print("Click!")
),
OneLineAvatarIconListItem(
IconLeftWidget(
icon="gitlab"
),
on_release=lambda x: print("Click 2!")
),
)
(continues on next page)
Example().run()
OneLineListItem
OneLineListItem:
text: "Single-line item"
TwoLineListItem
TwoLineListItem:
text: "Two-line item"
secondary_text: "Secondary text here"
ThreeLineListItem
ThreeLineListItem:
text: "Three-line item"
secondary_text: "This is a multi-line label where you can"
tertiary_text: "fit more text than usual"
OneLineAvatarListItem
Declarative KV style
OneLineAvatarListItem:
text: "Single-line item with avatar"
ImageLeftWidget:
source: "kivymd/images/logo/kivymd-icon-256.png"
OneLineAvatarListItem(
ImageLeftWidget(
source="kivymd/images/logo/kivymd-icon-256.png"
),
text="Single-line item with avatar",
)
TwoLineAvatarListItem
Declarative KV style
TwoLineAvatarListItem:
text: "Two-line item with avatar"
secondary_text: "Secondary text here"
ImageLeftWidget:
source: "kivymd/images/logo/kivymd-icon-256.png"
OneLineAvatarListItem(
ImageLeftWidget(
source="kivymd/images/logo/kivymd-icon-256.png"
),
text="Single-line item with avatar",
secondary_text: "Secondary text here",
)
ThreeLineAvatarListItem
Declarative KV style
ThreeLineAvatarListItem:
text: "Three-line item with avatar"
secondary_text: "Secondary text here"
tertiary_text: "fit more text than usual"
ImageLeftWidget:
source: "kivymd/images/logo/kivymd-icon-256.png"
OneLineAvatarListItem(
ImageLeftWidget(
source="kivymd/images/logo/kivymd-icon-256.png"
),
text="Single-line item with avatar",
secondary_text: "Secondary text here",
tertiary_text: "fit more text than usual"
)
OneLineRightIconListItem
Declarative KV style
OneLineRightIconListItem:
text: "Single-line item with avatar"
ImageRightWidget:
source: "kivymd/images/logo/kivymd-icon-256.png"
OneLineRightIconListItem(
ImageRightWidget(
source="kivymd/images/logo/kivymd-icon-256.png"
),
text="Single-line item with avatar",
)
TwoLineRightIconListItem
Declarative KV style
TwoLineRightIconListItem:
text: "Single-line item with avatar"
secondary_text: "Secondary text here"
ImageRightWidget:
source: "kivymd/images/logo/kivymd-icon-256.png"
TwoLineRightIconListItem(
ImageRightWidget(
source="kivymd/images/logo/kivymd-icon-256.png"
),
text="Single-line item with avatar",
secondary_text: "Secondary text here",
)
ThreeLineRightIconListItem
Declarative KV style
ThreeLineRightIconListItem:
text: "Single-line item with avatar"
secondary_text: "Secondary text here"
tertiary_text: "fit more text than usual"
ImageRightWidget:
source: "kivymd/images/logo/kivymd-icon-256.png"
ThreeLineRightIconListItem(
ImageRightWidget(
source="kivymd/images/logo/kivymd-icon-256.png"
),
text="Single-line item with avatar",
secondary_text: "Secondary text here",
tertiary_text: "fit more text than usual",
)
OneLineIconListItem
Declarative KV style
OneLineIconListItem:
text: "Single-line item with avatar"
IconLeftWidget:
icon: "language-python"
OneLineIconListItem(
IconLeftWidget(
icon="language-python"
),
text="Single-line item with avatar"
)
TwoLineIconListItem
Declarative KV style
TwoLineIconListItem:
text: "Two-line item with avatar"
secondary_text: "Secondary text here"
IconLeftWidget:
icon: "language-python"
TwoLineIconListItem(
IconLeftWidget(
icon="language-python"
),
text="Single-line item with avatar",
secondary_text: "Secondary text here"
)
ThreeLineIconListItem
Declarative KV style
ThreeLineIconListItem:
text: "Three-line item with avatar"
secondary_text: "Secondary text here"
tertiary_text: "fit more text than usual"
IconLeftWidget:
icon: "language-python"
ThreeLineIconListItem(
IconLeftWidget(
icon="language-python"
),
text="Single-line item with avatar",
secondary_text: "Secondary text here",
tertiary_text: "fit more text than usual",
)
OneLineAvatarIconListItem
Declarative KV style
OneLineAvatarIconListItem:
text: "One-line item with avatar"
IconLeftWidget:
icon: "plus"
IconRightWidget:
icon: "minus"
OneLineAvatarIconListItem(
IconLeftWidget(
(continues on next page)
TwoLineAvatarIconListItem
Declarative KV style
TwoLineAvatarIconListItem:
text: "Two-line item with avatar"
secondary_text: "Secondary text here"
IconLeftWidget:
icon: "plus"
IconRightWidget:
icon: "minus"
TwoLineAvatarIconListItem(
IconLeftWidget(
icon="plus"
),
IconRightWidget(
icon="minus"
),
text="Single-line item with avatar",
secondary_text: "Secondary text here",
)
ThreeLineAvatarIconListItem
Declarative KV style
ThreeLineAvatarIconListItem:
text: "Three-line item with avatar"
secondary_text: "Secondary text here"
tertiary_text: "fit more text than usual"
IconLeftWidget:
icon: "plus"
IconRightWidget:
icon: "minus"
ThreeLineAvatarIconListItem(
IconLeftWidget(
icon="plus"
),
IconRightWidget(
icon="minus"
),
text="Single-line item with avatar",
secondary_text: "Secondary text here",
tertiary_text: "fit more text than usual",
)
Declarative KV style
KV = '''
<ListItemWithCheckbox>:
IconLeftWidget:
(continues on next page)
RightCheckbox:
MDScrollView:
MDList:
id: scroll
'''
class ListItemWithCheckbox(OneLineAvatarIconListItem):
'''Custom list item.'''
icon = StringProperty("android")
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def on_start(self):
icons = list(md_icons.keys())
for i in range(30):
self.root.ids.scroll.add_widget(
ListItemWithCheckbox(text=f"Item {i}", icon=icons[i])
)
Example().run()
class Example(MDApp):
(continues on next page)
def on_start(self):
icons = list(md_icons.keys())
for i in range(30):
self.root.ids.scroll.add_widget(
OneLineAvatarIconListItem(
IconLeftWidget(
icon=icons[i]
),
RightCheckbox(),
text=f"Item {i}",
)
)
Example().run()
Declarative KV style
KV = '''
OneLineAvatarIconListItem:
text: "One-line item with avatar"
on_size:
self.ids._right_container.width = container.width
self.ids._right_container.x = container.width
(continues on next page)
IconLeftWidget:
icon: "cog"
YourContainer:
id: container
MDIconButton:
icon: "minus"
MDIconButton:
icon: "plus"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return (
OneLineAvatarIconListItem(
IconLeftWidget(
icon="cog"
),
YourContainer(
MDIconButton(
icon="minus"
),
(continues on next page)
def on_start(self):
container = self.root.ids.container
self.root.ids._right_container.width = container.width
container.x = container.width
Example().run()
Behavior
When using the AvatarListItem and IconListItem classes, when an icon is clicked, the event of this icon is triggered:
Declarative KV style
OneLineIconListItem:
text: "Single-line item with icon"
IconLeftWidget:
icon: "language-python"
OneLineIconListItem(
IconLeftWidget(
icon="language-python"
),
text="Single-line item with avatar",
)
You can disable the icon event using the WithoutTouch classes:
Declarative KV style
OneLineIconListItem:
text: "Single-line item with icon"
OneLineIconListItem(
IconLeftWidgetWithoutTouch(
icon="language-python"
),
text="Single-line item with avatar",
)
API - kivymd.uix.list.list
tertiary_text
The text is displayed on the third line.
tertiary_text is a StringProperty and defaults to ‘’.
secondary_text_color
Text color in (r, g, b, a) or string format used for secondary text if secondary_theme_text_color is set
to ‘Custom’.
secondary_text_color is a ColorProperty and defaults to None.
tertiary_text_color
Text color in (r, g, b, a) or string format used for tertiary text if tertiary_theme_text_color is set to
‘Custom’.
tertiary_text_color is a ColorProperty and defaults to None.
secondary_theme_text_color
The name of the color scheme for for the secondary text.
secondary_theme_text_color is a StringProperty and defaults to ‘Secondary’.
tertiary_theme_text_color
The name of the color scheme for for the tertiary text.
tertiary_theme_text_color is a StringProperty and defaults to ‘Secondary’.
secondary_font_style
Font style for secondary line. See font-definitions for more information.
secondary_font_style is a StringProperty and defaults to ‘Body1’.
tertiary_font_style
Font style for tertiary line. See font-definitions for more information.
tertiary_font_style is a StringProperty and defaults to ‘Body1’.
divider
Divider mode. Available options are: ‘Full’, ‘Inset’ and default to ‘Full’.
divider is a OptionProperty and defaults to ‘Full’.
divider_color
Divider color in (r, g, b, a) or string format.
New in version 1.0.0.
divider_color is a ColorProperty and defaults to None.
bg_color
Background color for list item in (r, g, b, a) or string format.
bg_color is a ColorProperty and defaults to None.
radius
Canvas radius.
add_widget(self, widget)
Add a new widget as a child of this widget.
Parameters
widget: Widget
Widget to add to our list of children.
index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget
is inserted at the beginning of the list and will thus be drawn on top of other sibling
widgets. For a full discussion of the index and widget hierarchy, please see the
Widgets Programming Guide.
New in version 1.0.5.
canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default
canvas.
New in version 1.9.0.
remove_widget(self, widget)
Remove a widget from the children of this widget.
Parameters
widget: Widget
Widget to remove from our children list.
class kivymd.uix.list.list.ILeftBodyTouch
Same as ILeftBody, but allows the widget to receive touch events instead of triggering the ListItem’s ripple
effect.
class kivymd.uix.list.list.IRightBodyTouch
Same as IRightBody, but allows the widget to receive touch events instead of triggering the ListItem’s ripple
effect
class kivymd.uix.list.list.OneLineListItem(*args, **kwargs)
A one line list item.
For more information, see in the BaseListItem classes documentation.
class kivymd.uix.list.list.TwoLineListItem(**kwargs)
A two line list item.
For more information, see in the BaseListItem classes documentation.
class kivymd.uix.list.list.ThreeLineListItem(*args, **kwargs)
A three line list item.
For more information, see in the BaseListItem classes documentation.
class kivymd.uix.list.list.OneLineAvatarListItem(*args, **kwargs)
A one line list item with left image.
For more information, see in the BaseListItem classes documentation.
class kivymd.uix.list.list.TwoLineAvatarListItem(*args, **kwargs)
A two line list item with left image.
For more information, see in the OneLineAvatarListItem classes documentation.
class kivymd.uix.list.list.ThreeLineAvatarListItem(*args, **kwargs)
A three line list item with left image.
For more information, see in the ThreeLineListItem classes documentation.
class kivymd.uix.list.list.OneLineIconListItem(*args, **kwargs)
A one line list item with left icon.
For more information, see in the OneLineListItem classes documentation.
class kivymd.uix.list.list.TwoLineIconListItem(*args, **kwargs)
A two line list item with left icon.
For more information, see in the OneLineIconListItem classes documentation.
class kivymd.uix.list.list.ThreeLineIconListItem(*args, **kwargs)
A three line list item with left icon.
For more information, see in the ThreeLineListItem classes documentation.
pos_hint
class kivymd.uix.list.list.CheckboxLeftWidget(**kwargs)
The widget implements the left checkbox element for use in ListItem classes.
For more information, see in the ILeftBodyTouch and MDCheckbox classes documentation.
2.3.55 Chip
See also:
Material Design spec, Chips
Usage
KV = '''
MDScreen:
MDChip:
text: "Portland"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.on_release_chip(self)
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
MDChip:
text: "Portland"
icon_right: "close-circle-outline"
MDChip:
text: "Portland"
icon_left: "map-marker"
MDChip:
text: "Portland"
icon_left: "avatar.png"
MDChip:
text: "Portland"
icon_left: "avatar.png"
icon_right: "close-circle-outline"
MDChip:
text: "Portland"
icon_left: "avatar.png"
icon_right: "close-circle-outline"
line_color: app.theme_cls.disabled_hint_text_color
MDChip:
text: "Portland"
icon_left: "avatar.png"
icon_right: "close-circle-outline"
line_color: app.theme_cls.disabled_hint_text_color
md_bg_color: 1, 0, 0, .5
MDChip:
text: "Portland"
icon_left: "avatar.png"
icon_right: "close-circle-outline"
line_color: app.theme_cls.disabled_hint_text_color
md_bg_color: 1, 0, 0, .5
elevation: 4
Behavior
Long press on the chip, it will be marked. When you click on the marked chip, the mark will be removed:
Examples
Multiple choose
Selecting a single choice chip automatically deselects all other chips in the set.
KV = '''
<MyScreen>
MDBoxLayout:
orientation: "vertical"
adaptive_size: True
spacing: "12dp"
padding: "56dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDLabel:
text: "Multiple choice"
bold: True
font_style: "H5"
adaptive_size: True
MDBoxLayout:
id: chip_box
adaptive_size: True
spacing: "8dp"
MyChip:
text: "Elevator"
on_press: if self.active: root.removes_marks_all_chips()
MyChip:
text: "Washer / Dryer"
on_press: if self.active: root.removes_marks_all_chips()
MyChip:
text: "Fireplace"
on_press: if self.active: root.removes_marks_all_chips()
ScreenManager:
MyScreen:
'''
self.md_bg_color = (
(0, 0, 0, 0.4)
if active_value
else (
self.theme_cls.bg_darkest
if self.theme_cls.theme_style == "Light"
else (
self.theme_cls.bg_light
if not self.disabled
else self.theme_cls.disabled_hint_text_color
)
)
)
class MyScreen(MDScreen):
def removes_marks_all_chips(self):
for instance_chip in self.ids.chip_box.children:
if instance_chip.active:
instance_chip.active = False
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Only choose
KV = '''
<MyScreen>
[...]
MDBoxLayout:
id: chip_box
adaptive_size: True
spacing: "8dp"
MyChip:
text: "Elevator"
on_active: if self.active: root.removes_marks_all_chips(self)
MyChip:
text: "Washer / Dryer"
on_active: if self.active: root.removes_marks_all_chips(self)
MyChip:
text: "Fireplace"
on_active: if self.active: root.removes_marks_all_chips(self)
[...]
'''
class MyScreen(MDScreen):
def removes_marks_all_chips(self, selected_instance_chip):
for instance_chip in self.ids.chip_box.children:
if instance_chip != selected_instance_chip:
instance_chip.active = False
API - kivymd.uix.chip.chip
class kivymd.uix.chip.chip.MDChip(**kwargs)
Chip class.
For more information, see in the MDBoxLayout and RectangularRippleBehavior and ButtonBehavior and
CommonElevationBehavior and CommonElevationBehavior classes documentation.
text
Chip text.
text is an StringProperty and defaults to ‘’.
icon_left
Chip left icon.
on_press(self, *args)
2.4 Controllers
2.4.1 WindowController
class Test(MDApp):
def build(self):
return MyScreen()
Test().run()
API - kivymd.uix.controllers.windowcontroller
class kivymd.uix.controllers.windowcontroller.WindowController
2.5 Behaviors
2.5.1 Touch
Usage
KV = '''
MDScreen:
MyButton:
text: "PRESS ME"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class MainApp(MDApp):
def build(self):
return Builder.load_string(KV)
MainApp().run()
API - kivymd.uix.behaviors.touch_behavior
class kivymd.uix.behaviors.touch_behavior.TouchBehavior(**kwargs)
duration_long_touch
Time for a long touch.
duration_long_touch is an NumericProperty and defaults to 0.4.
create_clock(self, widget, touch, *args)
2.5.2 Scale
Kivy
KV = '''
Screen:
ScaleButton:
size_hint: .5, .5
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.change_scale(self)
canvas.before:
PushMatrix
Scale:
(continues on next page)
class ScaleButton(Button):
scale_value_x = NumericProperty(1)
scale_value_y = NumericProperty(1)
scale_value_z = NumericProperty(1)
class Test(App):
def build(self):
return Builder.load_string(KV)
Test().run()
KivyMD
KV = '''
MDScreen:
ScaleBox:
size_hint: .5, .5
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.change_scale(self)
md_bg_color: "red"
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
API - kivymd.uix.behaviors.scale_behavior
class kivymd.uix.behaviors.scale_behavior.ScaleBehavior
Base class for controlling the scale of the widget.
scale_value_x
X-axis value.
scale_value_x is an NumericProperty and defaults to 1.
scale_value_y
Y-axis value.
scale_value_y is an NumericProperty and defaults to 1.
scale_value_z
Z-axis value.
scale_value_z is an NumericProperty and defaults to 1.
scale_value_center
Origin of the scale.
New in version 1.2.0.
The format of the origin can be either (x, y) or (x, y, z).
scale_value_center is an NumericProperty and defaults to [].
2.5.3 ToggleButton
This behavior must always be inherited after the button’s Widget class since it works with the inherited properties of
the button class.
example:
Declarative KV style
KV = '''
MDScreen:
MDBoxLayout:
adaptive_size: True
spacing: "12dp"
pos_hint: {"center_x": .5, "center_y": .5}
MyToggleButton:
text: "Show ads"
group: "x"
MyToggleButton:
text: "Do not show ads"
group: "x"
MyToggleButton:
text: "Does not matter"
group: "x"
'''
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return Builder.load_string(KV)
(continues on next page)
Test().run()
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDBoxLayout(
MyToggleButton(
text="Show ads",
group="x",
),
MyToggleButton(
text="Do not show ads",
group="x",
),
MyToggleButton(
text="Does not matter",
group="x",
),
adaptive_size=True,
spacing="12dp",
pos_hint={"center_x": .5, "center_y": .5},
),
)
)
Test().run()
You can inherit the MyToggleButton class only from the following classes
• MDRaisedButton
• MDFlatButton
• MDRectangleFlatButton
• MDRectangleFlatIconButton
• MDRoundFlatButton
• MDRoundFlatIconButton
• MDFillRoundFlatButton
• MDFillRoundFlatIconButton
API - kivymd.uix.behaviors.toggle_behavior
class kivymd.uix.behaviors.toggle_behavior.MDToggleButton(**kwargs)
This mixin class provides togglebutton behavior. Please see the togglebutton behaviors module docu-
mentation for more information.
New in version 1.8.0.
background_normal
Color of the button in rgba format for the ‘normal’ state.
background_normal is a ColorProperty and is defaults to None.
background_down
Color of the button in rgba format for the ‘down’ state.
background_down is a ColorProperty and is defaults to None.
font_color_normal
Color of the font’s button in rgba format for the ‘normal’ state.
font_color_normal is a ColorProperty and is defaults to None.
font_color_down
Color of the font’s button in rgba format for the ‘down’ state.
font_color_down is a ColorProperty and is defaults to [1, 1, 1, 1].
2.5.4 Hover
Changing when the mouse is on the widget and the widget is visible.
To apply hover behavior, you must create a new class that is inherited from the widget to which you apply the behavior
and from the HoverBehavior class.
In KV file:
<HoverItem@MDBoxLayout+HoverBehavior>
In python file:
After creating a class, you must define two methods for it: HoverBehavior.on_enter and HoverBehavior.
on_leave, which will be automatically called when the mouse cursor is over the widget and when the mouse cursor
goes beyond the widget.
Note: HoverBehavior will by default check to see if the current Widget is visible (i.e. not covered by a modal or
popup and not a part of a Relative Layout, MDTab or Carousel that is not currently visible etc) and will only issue
events if the widget is visible.
To get the legacy behavior that the events are always triggered, you can set detect_visible on the Widget to False.
KV = '''
Screen
MDBoxLayout:
id: box
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: .8, .8
md_bg_color: app.theme_cls.bg_darkest
'''
self.md_bg_color = (1, 1, 1, 1)
self.md_bg_color = self.theme_cls.bg_darkest
class Test(MDApp):
def build(self):
self.screen = Builder.load_string(KV)
for i in range(5):
self.screen.ids.box.add_widget(HoverItem())
return self.screen
Test().run()
API - kivymd.uix.behaviors.hover_behavior
class kivymd.uix.behaviors.hover_behavior.HoverBehavior(**kwargs)
Events
on_enter
Called when mouse enters the bbox of the widget AND the widget is visible
on_leave
Called when the mouse exits the widget AND the widget is visible
hovering
True, if the mouse cursor is within the borders of the widget.
Note that this is set and cleared even if the widget is not visible
hover is a BooleanProperty and defaults to False.
hover_visible
True if hovering is True AND is the current widget is visible
hover_visible is a BooleanProperty and defaults to False.
enter_point
Holds the last position where the mouse pointer crossed into the Widget if the Widget is visible and is
currently in a hovering state
enter_point is a ObjectProperty and defaults to None.
detect_visible
Should this widget perform the visibility check?
detect_visible is a BooleanProperty and defaults to True.
on_mouse_update(self, *args)
on_enter(self )
Called when mouse enters the bbox of the widget AND the widget is visible.
on_leave(self )
Called when the mouse exits the widget AND the widget is visible.
2.5.5 Stencil
Kivy
KV = '''
Carousel:
Button:
size_hint: .9, .8
pos_hint: {"center_x": .5, "center_y": .5}
canvas.before:
StencilPush
RoundedRectangle:
pos: root.pos
size: root.size
StencilUse
canvas.after:
StencilUnUse
RoundedRectangle:
pos: root.pos
size: root.size
StencilPop
'''
class Test(App):
def build(self):
return Builder.load_string(KV)
Test().run()
KivyMD
KV = '''
#:import os os
#:import images_path kivymd.images_path
MDCarousel:
StencilImage:
size_hint: .9, .8
pos_hint: {"center_x": .5, "center_y": .5}
source: os.path.join(images_path, "logo", "kivymd-icon-512.png")
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
API - kivymd.uix.behaviors.stencil_behavior
class kivymd.uix.behaviors.stencil_behavior.StencilBehavior
Base class for controlling the stencil instructions of the widget.
radius
Canvas radius.
New in version 1.0.0.
2.5.6 Declarative
Imperative style
class Example(MDApp):
def build(self):
screen = MDScreen()
bottom_navigation = MDBottomNavigation(
panel_color="#eeeaea",
selected_color_background="#97ecf8",
text_color_active="white",
)
data = {
"screen 1": {"text": "Mail", "icon": "gmail"},
"screen 2": {"text": "Discord", "icon": "discord"},
"screen 3": {"text": "LinkedIN", "icon": "linkedin"},
}
for key in data.keys():
text = data[key]["text"]
navigation_item = MDBottomNavigationItem(
name=key, text=text, icon=data[key]["icon"]
)
navigation_item.add_widget(MDLabel(text=text, halign="center"))
bottom_navigation.add_widget(navigation_item)
screen.add_widget(bottom_navigation)
return screen
Example().run()
Take a look at the above code example. This is a very simple UI. But looking at this code, you will not be able to figure
the widget tree and understand which UI this code implements. This is named imperative programming style, which is
used in Kivy.
Now let’s see how the same code is implemented using the KV language, which uses a declarative style of describing
widget properties.
class Test(MDApp):
def build(self):
return Builder.load_string(
'''
MDScreen:
MDBottomNavigation:
panel_color: "#eeeaea"
selected_color_background: "#97ecf8"
text_color_active: "white"
MDBottomNavigationItem:
name: "screen 1"
text: "Mail"
icon: "gmail"
(continues on next page)
MDLabel:
text: "Mail"
halign: "center"
MDBottomNavigationItem:
name: "screen 2"
text: "Discord"
icon: "discord"
MDLabel:
text: "Discord"
halign: "center"
MDBottomNavigationItem:
name: "screen 3"
text: "LinkedIN"
icon: "linkedin"
MDLabel:
text: "LinkedIN"
halign: "center"
'''
)
Test().run()
Looking at this code, we can now clearly see the widget tree and their properties. We can quickly navigate through the
components of the screen and quickly change/add new properties/widgets. This is named declarative UI creation style.
But now the KivyMD library allows you to write Python code in a declarative style. Just as it is implemented in
Flutter/Jetpack Compose/SwiftUI.
class Example(MDApp):
def build(self):
return (
MDScreen(
MDBottomNavigation(
MDBottomNavigationItem(
MDLabel(
text="Mail",
halign="center",
),
name="screen 1",
text="Mail",
icon="gmail",
),
MDBottomNavigationItem(
MDLabel(
text="Discord",
halign="center",
),
name="screen 2",
text="Discord",
icon="discord",
),
MDBottomNavigationItem(
MDLabel(
text="LinkedIN",
halign="center",
),
name="screen 3",
text="LinkedIN",
icon="linkedin",
),
panel_color="#eeeaea",
selected_color_background="#97ecf8",
text_color_active="white",
)
)
)
Example().run()
Note: The KivyMD library does not support creating Kivy widgets in Python code in a declarative style.
But you can still use the declarative style of creating Kivy widgets in Python code. To do this, you need to create a new
class that will be inherited from the Kivy widget and the DeclarativeBehavior class:
class Example(MDApp):
def build(self):
return (
DeclarativeStyleBoxLayout(
Button(),
Button(),
orientation="vertical",
)
)
Example().run()
In the declarative style in Python code, the ids parameter of the specified widget will return only the id of the child
widget/container, ignoring other ids. Therefore, to get objects by identifiers in declarative style in Python code, you
must specify all the container ids in which the widget is nested until you get to the desired id:
class Example(MDApp):
def build(self):
return (
MDBoxLayout(
MDFloatLayout(
MDRaisedButton(
id="button_1",
text="Button 1",
pos_hint={"center_x": 0.5, "center_y": 0.5},
(continues on next page)
def on_start(self):
# {
# 'box_container_1': <kivymd.uix.floatlayout.MDFloatLayout>,
# 'box_container_2': <kivymd.uix.boxlayout.MDBoxLayout object>
# }
print(self.root.ids)
# <kivymd.uix.button.button.MDRaisedButton>
print(self.root.ids.box_container_2.ids.float_container.ids.button_2)
Example().run()
Yes, this is not a very good solution, but I think it will be fixed soon.
Warning: Declarative programming style in Python code in the KivyMD library is an experimental feature.
Therefore, if you receive errors, do not hesitate to create new issue in the KivyMD repository.
API - kivymd.uix.behaviors.declarative_behavior
Note: The following classes are intended for in-house use of the library.
API - kivymd.uix.behaviors.backgroundcolor_behavior
class kivymd.uix.behaviors.backgroundcolor_behavior.BackgroundColorBehavior(**kwarg)
background
Background image path.
background is a StringProperty and defaults to None.
radius
Canvas radius.
Widget:
canvas:
Color:
rgba: 0, 1, 1, 1
Rectangle:
size: self.size
pos: self.pos
similar to code:
<MyWidget@BackgroundColorBehavior>
md_bg_color: 0, 1, 1, 1
MDBoxLayout:
size_hint: .5, .2
md_bg_color: 0, 1, 1, .5
(continues on next page)
background_origin
class kivymd.uix.behaviors.backgroundcolor_behavior.SpecificBackgroundColorBehavior(**kwargs)
background_palette
See kivymd.color_definitions.palette.
background_palette is an OptionProperty and defaults to ‘Primary’.
background_hue
See kivymd.color_definitions.hue.
background_hue is an OptionProperty and defaults to ‘500’.
specific_text_color
specific_text_color is an ColorProperty and defaults to [0, 0, 0, 0.87].
specific_secondary_text_color
specific_secondary_text_color`is an :class:`~kivy.properties.ColorProperty and de-
faults to [0, 0, 0, 0.87].
2.5.8 Ripple
To create a widget with ircular ripple effect, you must create a new class that inherits from the
CircularRippleBehavior class.
For example, let’s create an image button with a circular ripple effect:
KV = '''
MDScreen:
CircularRippleButton:
source: "data/logo/kivy-icon-256.png"
size_hint: None, None
size: "250dp", "250dp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
To create a widget with rectangular ripple effect, you must create a new class that inherits from the
RectangularRippleBehavior class:
KV = '''
MDScreen:
RectangularRippleButton:
size_hint: None, None
size: "250dp", "50dp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class RectangularRippleButton(
RectangularRippleBehavior, ButtonBehavior, BackgroundColorBehavior
):
md_bg_color = [0, 0, 1, 1]
(continues on next page)
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.behaviors.ripple_behavior
class kivymd.uix.behaviors.ripple_behavior.CommonRipple
Base class for ripple effect.
ripple_rad_default
The starting value of the radius of the ripple effect.
CircularRippleButton:
ripple_rad_default: 100
CircularRippleButton:
ripple_color: app.theme_cls.primary_color
CircularRippleButton:
ripple_alpha: .9
ripple_color: app.theme_cls.primary_color
CircularRippleButton:
ripple_scale: .5
CircularRippleButton:
ripple_scale: 1
CircularRippleButton:
ripple_duration_in_fast: .1
CircularRippleButton:
ripple_duration_in_slow: 5
CircularRippleButton:
ripple_duration_out: 5
MDIconButton:
ripple_canvas_after: True
icon: "android"
ripple_alpha: .8
ripple_color: app.theme_cls.primary_color
icon_size: "100sp"
MDIconButton:
ripple_canvas_after: False
icon: "android"
ripple_alpha: .8
ripple_color: app.theme_cls.primary_color
icon_size: "100sp"
start_ripple(self )
finish_ripple(self )
fade_out(self, *args)
anim_complete(self, *args)
on_touch_down(self, touch)
call_ripple_animation_methods(self, touch)
on_touch_up(self, touch)
class kivymd.uix.behaviors.ripple_behavior.RectangularRippleBehavior
Class implements a rectangular ripple effect.
For more information, see in the CommonRipple class documentation.
ripple_scale
See ripple_scale.
ripple_scale is an NumericProperty and defaults to 2.75.
lay_canvas_instructions(self )
class kivymd.uix.behaviors.ripple_behavior.CircularRippleBehavior
Class implements a circular ripple effect.
For more information, see in the CommonRipple class documentation.
ripple_scale
See ripple_scale.
ripple_scale is an NumericProperty and defaults to 1.
lay_canvas_instructions(self )
2.5.9 Magic
To apply magic effects, you must create a new class that is inherited from the widget to which you apply the effect and
from the MagicBehavior class.
In KV file:
<MagicButton@MagicBehavior+MDRectangleFlatButton>
In python file:
• MagicBehavior.wobble
• MagicBehavior.grow
• MagicBehavior.shake
• MagicBehavior.twist
• MagicBehavior.shrink
Example:
KV = '''
<MagicButton@MagicBehavior+MDRectangleFlatButton>
MDFloatLayout:
MagicButton:
text: "WOBBLE EFFECT"
on_release: self.wobble()
pos_hint: {"center_x": .5, "center_y": .3}
MagicButton:
text: "GROW EFFECT"
on_release: self.grow()
pos_hint: {"center_x": .5, "center_y": .4}
(continues on next page)
MagicButton:
text: "SHAKE EFFECT"
on_release: self.shake()
pos_hint: {"center_x": .5, "center_y": .5}
MagicButton:
text: "TWIST EFFECT"
on_release: self.twist()
pos_hint: {"center_x": .5, "center_y": .6}
MagicButton:
text: "SHRINK EFFECT"
on_release: self.shrink()
pos_hint: {"center_x": .5, "center_y": .7}
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.behaviors.magic_behavior
class kivymd.uix.behaviors.magic_behavior.MagicBehavior
magic_speed
Animation playback speed.
magic_speed is a NumericProperty and defaults to 1.
grow(self )
Grow effect animation.
shake(self )
Shake effect animation.
wobble(self )
Wobble effect animation.
twist(self )
Twist effect animation.
shrink(self )
Shrink effect animation.
on_touch_up(self, *args)
2.5.10 Elevation
See also:
Material Design spec, Elevation
Elevation is the relative distance between two surfaces along the z-axis.
To create an elevation effect, use the CommonElevationBehavior class. For example, let’s create a button with a
rectangular elevation effect:
Declarative style with KV
KV = '''
<RectangularElevationButton>
size_hint: None, None
(continues on next page)
MDScreen:
class RectangularElevationButton(
RectangularRippleBehavior,
CommonElevationBehavior,
ButtonBehavior,
BackgroundColorBehavior,
):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.md_bg_color = "red"
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
class RectangularElevationButton(
RectangularRippleBehavior,
CommonElevationBehavior,
(continues on next page)
class Example(MDApp):
def build(self):
return (
MDScreen(
RectangularElevationButton(
pos_hint={"center_x": .5, "center_y": .6},
elevation=4,
shadow_softness=4,
shadow_offset=(0, -6),
),
RectangularElevationButton(
pos_hint={"center_x": .5, "center_y": .4},
),
)
)
Example().run()
Warning: If before the KivyMD 1.1.0 library version you used the elevation property with an average value of
12 for the shadow, then starting with the KivyMD 1.1.0 library version, the average value of the elevation property
will be somewhere 4.
KV = '''
<CircularElevationButton>
size_hint: None, None
size: "100dp", "100dp"
radius: self.size[0] / 2
shadow_radius: self.radius[0]
md_bg_color: "red"
MDIcon:
icon: "hand-heart"
halign: "center"
valign: "center"
pos_hint: {"center_x": .5, "center_y": .5}
size: root.size
pos: root.pos
font_size: root.size[0] * .6
theme_text_color: "Custom"
text_color: "white"
MDScreen:
CircularElevationButton:
pos_hint: {"center_x": .5, "center_y": .6}
elevation: 4
shadow_softness: 4
'''
class CircularElevationButton(
CommonElevationBehavior,
CircularRippleBehavior,
ButtonBehavior,
MDFloatLayout,
):
pass
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
class CircularElevationButton(
CommonElevationBehavior,
CircularRippleBehavior,
ButtonBehavior,
MDFloatLayout,
):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.size_hint = (None, None)
self.size = (dp(100), dp(100))
self.radius = dp(100) / 2
self.shadow_radius = dp(100) / 2
self.md_bg_color = "red"
self.add_widget(
MDIcon(
icon="hand-heart",
halign="center",
valign="center",
pos_hint={"center_x": .5, "center_y": .5},
size=self.size,
theme_text_color="Custom",
text_color="white",
font_size=self.size[0] * 0.6,
)
)
class Example(MDApp):
def build(self):
return (
MDScreen(
CircularElevationButton(
pos_hint={"center_x": .5, "center_y": .5},
elevation=4,
shadow_softness=4,
)
)
)
Example().run()
KV = '''
MDScreen:
ElevatedWidget:
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: None, None
size: 100, 100
md_bg_color: 0, 0, 1, 1
elevation: 2
radius: 18
'''
class ElevatedWidget(
CommonElevationBehavior,
RectangularRippleBehavior,
ButtonBehavior,
MDWidget,
):
_elev = 0 # previous elevation value
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
class ElevatedWidget(
CommonElevationBehavior,
RectangularRippleBehavior,
ButtonBehavior,
MDWidget,
):
_elev = 0 # previous elevation value
class Example(MDApp):
def build(self):
return (
MDScreen(
ElevatedWidget(
pos_hint={'center_x': .5, 'center_y': .5},
size_hint=(None, None),
size=(100, 100),
md_bg_color="blue",
elevation=2,
radius=18,
(continues on next page)
Example().run()
API - kivymd.uix.behaviors.elevation
class kivymd.uix.behaviors.elevation.CommonElevationBehavior(**kwargs)
Common base class for rectangular and circular elevation behavior.
For more information, see in the Widget class documentation.
elevation
Elevation of the widget.
elevation is an BoundedNumericProperty and defaults to 0.
shadow_radius
Radius of the corners of the shadow.
New in version 1.1.0.
You don’t have to use this parameter. The radius of the elevation effect is calculated automatically one way
or another based on the radius of the parent widget, for example:
KV = '''
MDScreen:
MDCard:
radius: 12, 46, 12, 46
size_hint: .5, .3
pos_hint: {"center_x": .5, "center_y": .5}
elevation: 2
shadow_softness: 4
shadow_offset: (2, -2)
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
KV = '''
<RectangularElevationButton>
size_hint: None, None
size: "250dp", "50dp"
MDScreen:
RectangularElevationButton:
pos_hint: {"center_x": .5, "center_y": .6}
elevation: 6
shadow_softness: 6
RectangularElevationButton:
pos_hint: {"center_x": .5, "center_y": .4}
elevation: 6
shadow_softness: 12
'''
class RectangularElevationButton(CommonElevationBehavior,␣
˓→BackgroundColorBehavior):
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
KV = '''
<RectangularElevationButton>
size_hint: None, None
size: "100dp", "100dp"
(continues on next page)
MDScreen:
RectangularElevationButton:
pos_hint: {"center_x": .5, "center_y": .5}
elevation: 6
shadow_radius: 6
shadow_softness: 12
shadow_offset: -12, -12
'''
class RectangularElevationButton(CommonElevationBehavior,␣
˓→BackgroundColorBehavior):
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
RectangularElevationButton:
shadow_offset: 12, -12
RectangularElevationButton:
shadow_offset: 12, 12
RectangularElevationButton:
shadow_offset: -12, 12
RectangularElevationButton:
shadow_color: 0, 0, 1, .8
class kivymd.uix.behaviors.elevation.RectangularElevationBehavior(**kwargs)
Deprecated since version 1.1.0.
Use CommonElevationBehavior class instead.
class kivymd.uix.behaviors.elevation.CircularElevationBehavior(**kwargs)
Deprecated since version 1.1.0.
Use CommonElevationBehavior class instead.
class kivymd.uix.behaviors.elevation.RoundedRectangularElevationBehavior(**kwargs)
Deprecated since version 1.1.0.
Use CommonElevationBehavior class instead.
class kivymd.uix.behaviors.elevation.FakeRectangularElevationBehavior(**kwargs)
Deprecated since version 1.1.0.
Use CommonElevationBehavior class instead.
class kivymd.uix.behaviors.elevation.FakeCircularElevationBehavior(**kwargs)
Deprecated since version 1.1.0.
Use CommonElevationBehavior class instead.
2.5.11 Rotate
Kivy
KV = '''
Screen:
RotateButton:
size_hint: .5, .5
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.change_rotate(self)
canvas.before:
PushMatrix
Rotate:
angle: self.rotate_value_angle
axis: 0, 0, 1
origin: self.center
canvas.after:
PopMatrix
'''
class Test(App):
def build(self):
return Builder.load_string(KV)
Test().run()
KivyMD
KV = '''
MDScreen:
RotateBox:
size_hint: .5, .5
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.change_rotate(self)
md_bg_color: "red"
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
API - kivymd.uix.behaviors.rotate_behavior
class kivymd.uix.behaviors.rotate_behavior.RotateBehavior
Base class for controlling the rotate of the widget.
rotate_value_angle
Property for getting/setting the angle of the rotation.
rotate_value_angle is an NumericProperty and defaults to 0.
rotate_value_axis
Property for getting/setting the axis of the rotation.
rotate_value_axis is an ListProperty and defaults to (0, 0, 1).
2.5.12 Focus
To apply focus behavior, you must create a new class that is inherited from the widget to which you apply the behavior
and from the FocusBehavior class.
Usage
KV = '''
MDScreen:
md_bg_color: 1, 1, 1, 1
FocusWidget:
size_hint: .5, .3
pos_hint: {"center_x": .5, "center_y": .5}
md_bg_color: app.theme_cls.bg_light
MDLabel:
text: "Label"
theme_text_color: "Primary"
pos_hint: {"center_y": .5}
halign: "center"
'''
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Test().run()
FocusWidget:
focus_color: 1, 0, 1, 1
unfocus_color: 0, 0, 1, 1
API - kivymd.uix.behaviors.focus_behavior
class kivymd.uix.behaviors.focus_behavior.FocusBehavior(**kwargs)
Focus behavior class.
For more information, see in the HoverBehavior and ButtonBehavior classes documentation.
Events
on_enter
Called when mouse enters the bbox of the widget AND the widget is visible
on_leave
Called when the mouse exits the widget AND the widget is visible
focus_behavior
Using focus when hovering over a widget.
focus_behavior is a BooleanProperty and defaults to False.
focus_color
The color of the widget when the mouse enters the bbox of the widget.
focus_color is a ColorProperty and defaults to None.
unfocus_color
The color of the widget when the mouse exits the bbox widget.
unfocus_color is a ColorProperty and defaults to None.
on_enter(self )
Called when mouse enter the bbox of the widget.
on_leave(self )
Called when the mouse exit the widget.
2.6 Effects
2.6.1 StiffScrollEffect
An Effect to be used with ScrollView to prevent scrolling beyond the bounds, but politely.
A ScrollView constructed with StiffScrollEffect, eg. ScrollView(effect_cls=StiffScrollEffect), will get harder to scroll
as you get nearer to its edges. You can scroll all the way to the edge if you want to, but it will take more finger-movement
than usual.
Unlike DampedScrollEffect, it is impossible to overscroll with StiffScrollEffect. That means you cannot push the
contents of the ScrollView far enough to see what’s beneath them. This is appropriate if the ScrollView contains, eg.,
a background image, like a desktop wallpaper. Overscrolling may give the impression that there is some reason to
overscroll, even if just to take a peek beneath, and that impression may be misleading.
StiffScrollEffect was written by Zachary Spector. His other stuff is at: https://github.com/LogicalDash/ He can be
reached, and possibly hired, at: zacharyspector@gmail.com
API - kivymd.effects.stiffscroll.stiffscroll
class kivymd.effects.stiffscroll.stiffscroll.StiffScrollEffect(**kwargs)
Kinetic effect class. See module documentation for more information.
drag_threshold
Minimum distance to travel before the movement is considered as a drag.
drag_threshold is an NumericProperty and defaults to ’20sp’.
min
Minimum boundary to stop the scrolling at.
min is an NumericProperty and defaults to 0.
max
Maximum boundary to stop the scrolling at.
max is an NumericProperty and defaults to 0.
max_friction
How hard should it be to scroll, at the worst?
max_friction is an NumericProperty and defaults to 1.
body
Proportion of the range in which you can scroll unimpeded.
body is an NumericProperty and defaults to 0.7.
scroll
Computed value for scrolling
scroll is an NumericProperty and defaults to 0.0.
transition_min
The AnimationTransition function to use when adjusting the friction near the minimum end of the effect.
transition_min is an ObjectProperty and defaults to kivy.animation.AnimationTransition.
transition_max
The AnimationTransition function to use when adjusting the friction near the maximum end of the effect.
transition_max is an ObjectProperty and defaults to kivy.animation.AnimationTransition.
target_widget
The widget to apply the effect to.
target_widget is an ObjectProperty and defaults to None.
displacement
The absolute distance moved in either direction.
displacement is an NumericProperty and defaults to 0.
update_velocity(self, dt)
Before actually updating my velocity, meddle with self.friction to make it appropriate to where I’m
at, currently.
on_value(self, *args)
Prevent moving beyond my bounds, and update self.scroll
start(self, val, t=None)
Start movement with self.friction = self.base_friction
update(self, val, t=None)
Reduce the impact of whatever change has been made to me, in proportion with my current friction.
stop(self, val, t=None)
Work out whether I’ve been flung.
2.6.2 FadingEdgeEffect
KV = '''
MDScreen:
FadeScrollView:
fade_height: self.height / 2
fade_color: root.md_bg_color
MDList:
id: container
'''
(continues on next page)
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
for i in range(20):
self.root.ids.container.add_widget(
OneLineListItem(text=f"Single-line item {i}")
)
Test().run()
Note: Use the same color value for the fade_color parameter as for the parent widget.
API - kivymd.effects.fadingedge.fadingedge
class kivymd.effects.fadingedge.fadingedge.FadingEdgeEffect(**kwargs)
The class implements the fade effect.
New in version 1.0.0.
fade_color
Fade color.
fade_color is an ColorProperty and defaults to None.
fade_height
Fade height.
fade_height is an ColorProperty and defaults to 0.
edge_top
Display fade edge top.
edge_top is an BooleanProperty and defaults to True.
edge_bottom
Display fade edge bottom.
edge_bottom is an BooleanProperty and defaults to True.
set_fade(self, interval: int | float)
Draws a bottom and top fade border on the canvas.
2.6.3 RouletteScrollEffect
This is a subclass of kivy.effects.ScrollEffect that simulates the motion of a roulette, or a notched wheel (think
Wheel of Fortune). It is primarily designed for emulating the effect of the iOS and android date pickers.
Usage
for i in range(30):
btn = Button(text=str(i), size=(480, 40), size_hint=(None, None))
layout.add_widget(btn)
root = ScrollView(
size_hint=(None, None),
size=(500, 320),
pos_hint={'center_x': .5, 'center_y': .5},
do_scroll_x=False,
)
root.add_widget(layout)
Here the ScrollView scrolls through a series of buttons with height 40. We then attached a RouletteScrollEffect
with interval 40, corresponding to the button heights. This allows the scrolling to stop at the same offset no matter
where it stops. The RouletteScrollEffect.anchor adjusts this offset.
Customizations
API - kivymd.effects.roulettescroll.roulettescroll
class kivymd.effects.roulettescroll.roulettescroll.RouletteScrollEffect(**kwargs)
This is a subclass of kivy.effects.ScrollEffect that simulates the motion of a roulette, or a notched wheel
(think Wheel of Fortune). It is primarily designed for emulating the effect of the iOS and android date pickers.
New in version 0.104.2.
drag_threshold
Overrides ScrollEffect.drag_threshold to abolish drag threshold.
Note: If using this with a Roulette or other Tickline subclasses, what matters is Tickline.
drag_threshold, which is passed to this attribute in the end.
max
interval
The interval of the values of the “roulette”.
interval is an NumericProperty and defaults to 50.
anchor
One of the valid stopping values.
anchor is an NumericProperty and defaults to 0.
pull_duration
When movement slows around a stopping value, an animation is used to pull it toward the nearest value.
pull_duration is the duration used for such an animation.
pull_duration is an NumericProperty and defaults to 0.2.
coasting_alpha
When within coasting_alpha * interval of the next notch and velocity is below terminal_velocity,
coasting begins and will end on the next notch.
coasting_alpha is an NumericProperty and defaults to 0.5.
pull_back_velocity
The velocity below which the scroll value will be drawn to the nearest notch instead of the next notch in
the direction travelled.
pull_back_velocity is an NumericProperty and defaults to 50sp.
terminal_velocity
If velocity falls between pull_back_velocity and terminal velocity then the movement will start
to coast to the next coming stopping value.
terminal_velocity is computed from a set formula given interval, coasting_alpha,
pull_duration, and friction. Setting terminal_velocity has the effect of setting pull_duration.
get_term_vel(self )
set_term_vel(self, val)
nearest_notch(self, *args)
next_notch(self, *args)
near_notch(self, d=0.01)
near_next_notch(self, d=None)
update_velocity(self, dt)
(internal) Update the velocity according to the frametime and friction.
on_coasted_to_stop(self, *args)
This event fires when the roulette has stopped, making a selection.
2.7 Templates
2.7.1 RotateWidget
Note: RotateWidget class has been deprecated. Please use RotateBahavior class instead.
API - kivymd.uix.templates.rotatewidget.rotatewidget
class kivymd.uix.templates.rotatewidget.rotatewidget.RotateWidget(**kwargs)
Deprecated since version 1.1.0.
Use RotateBehavior class instead.
2.7.2 ScaleWidget
Note: ScaleWidget class has been deprecated. Please use ScaleBehavior class instead.
API - kivymd.uix.templates.scalewidget.scalewidget
class kivymd.uix.templates.scalewidget.scalewidget.ScaleWidget(**kwargs)
Deprecated since version 1.1.0.
Use ScaleBehavior class instead.
2.7.3 StencilWidget
Note: StencilWidget class has been deprecated. Please use StencilBehavior class instead.
API - kivymd.uix.templates.stencilwidget.stencilwidget
class kivymd.uix.templates.stencilwidget.stencilwidget.StencilWidget(**kwargs)
Deprecated since version 1.1.0.
Use StencilBehavior class instead.
2.8 Changelog
2.8.1 Unreleased
2.8.2 1.1.1
– icon_color - color of the folder icon when the preview property is set to False;
• Add binds to MDFloatingActionButtonSpeedDial individual buttons;
• Add functionality for using multiple heroes.
• Add shadow_softness_size attribute (value of the softness of the shadow) to CommonElevationBehavior class.
• Optimize of MDDatePicker widget.
2.8.3 1.0.2
2.8.4 1.0.1
2.8.5 1.0.0
2.8.6 0.104.2
• Added palette attribute - the feature to change the color of the MDSpinner when changing rotation cycles
• Added the feature to change the border color of the MDRectangleFlatIconButton class
• Add MDRelativeLayout class
• Added the feature to use radius for MDNavigationDrawer corners
• Removed UserAnimationCard class
• Added feature to set background color for MDDialog class
• Added MDNavigationRail component
• Added MDSwiper component
• Added ripple effect to MDTabs class
• Added the feature to set toast positions on an Android device
• Added of tooltips to MDToolbar icons
• Fixed MDBottomAppBar notch transparency
• Updated MDDatePicker class to material design specification.
• Updated MDTimePicker class to material design specification.
• Elevation behavior redesign to comply with the material design specification.
• Removed the vendor package.
• Added the feature to use a class instance (Kivy or KivyMD widget), which will be added to the MDDropdownMenu
class menu header.
2.8.7 0.104.1
2.8.8 0.104.0
• Fixed bug in kivymd.uix.expansionpanel.MDExpansionPanel if, with the panel open, without closing it,
try to open another panel, then the chevron of the first panel remained open.
• The kivymd.uix.textfield.MDTextFieldRound class is now directly inherited from the kivy.uix.
textinput.TextInput class.
• Removed kivymd.uix.textfield.MDTextFieldClear class.
• kivymd.uix.navigationdrawer.NavigationLayout allowed to add kivymd.uix.toolbar.MDToolbar
class.
• Added feature to control range of dates to be active in kivymd.uix.picker.MDDatePicker class.
• Updated kivymd.uix.navigationdrawer.MDNavigationDrawer realization.
• Removed kivymd.uix.card.MDCardPost class.
• Added kivymd.uix.card.MDCardSwipe class.
• Added switch_tab method for switching tabs to kivymd.uix.bottomnavigation.MDBottomNavigation
class.
• Added feature to use panel type in the kivymd.uix.expansionpanel.MDExpansionPanel class:
kivymd.uix.expansionpanel.MDExpansionPanelOneLine, kivymd.uix.expansionpanel.
MDExpansionPanelTwoLine or kivymd.uix.expansionpanel.MDExpansionPanelThreeLine.
• Fixed panel opening animation in the kivymd.uix.expansionpanel.MDExpansionPanel class.
• Delete kivymd.uix.managerswiper.py
• Add MDFloatingActionButtonSpeedDial class
• Added the feature to create text on tabs using markup, thereby triggering the on_ref_press event in the MDTab-
sLabel class
• Added color_indicator attribute to set custom indicator color in the MDTabs class
• Added the feature to change the background color of menu items in the BaseListItem class
• Add MDTapTargetView class
2.8.9 0.103.0
2.8.10 0.102.1
2.8.11 0.102.0
2.8.12 0.101.8
2.8.13 0.101.7
• Fixed colors and position of the buttons in the Buttons demo screen ([Kitchen Sink demo](https://github.com/
kivymd/KivyMD/tree/master/demos/kitchen_sink)).
• Displaying percent of loading kv-files ([Kitchen Sink demo](https://github.com/kivymd/KivyMD/tree/master/
demos/kitchen_sink)).
2.8.14 0.101.6
2.8.15 0.101.5
• Added feature to see source code of current example ([Kitchen Sink demo](https://github.com/kivymd/KivyMD/
tree/master/demos/kitchen_sink)).
• Added names of authors of this fork ([Kitchen Sink demo](https://github.com/kivymd/KivyMD/tree/master/
demos/kitchen_sink)).
• Bug fixes and other minor improvements.
2.8.16 0.101.4
2.8.17 0.101.3
2.8.18 0.101.2
2.8.19 0.101.1
2.8.20 0.101.0
2.8.21 0.100.2
• [Black](https://github.com/psf/black) formatting.
2.8.22 0.100.1
2.8.23 0.100.0
2.8.24 0.99.99.01
• Fixed MDNavigationDrawer.use_logo.
2.8.25 0.99.99
2.8.26 0.99.98
2.8.27 0.99.97
2.8.28 0.99.96
2.8.29 0.99.95
2.8.30 0.99.94
2.8.31 0.99.93
2.8.32 0.99.92
2.9 About
2.9.1 License
Refer to LICENSE.
MIT License
Copyright (c) 2022 Andrés Rodríguez and other contributors - KivyMD library up to␣
˓→version 0.1.2
Copyright (c) 2022 KivyMD Team and other contributors - KivyMD library version 0.1.3 and␣
˓→higher
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
2.10 KivyMD
Is a collection of Material Design compliant widgets for use with, Kivy cross-platform graphical framework a frame-
work for cross-platform, touch-enabled graphical applications. The project’s goal is to approximate Google’s Material
Design spec as close as possible without sacrificing ease of use.
This library is a fork of the KivyMD project. We found the strength and brought this project to a new level.
If you wish to become a project developer (permission to create branches on the project without forking for easier
collaboration), have at least one PR approved and ask for it. If you contribute regularly to the project the role may be
offered to you without asking too.
kivymd.release = False
kivymd.path
Path to KivyMD package directory.
kivymd.fonts_path
Path to fonts directory.
kivymd.images_path
Path to images directory.
kivymd.uix_path
Path to uix directory.
2.10.2 Submodules
API - kivymd.factory_registers
kivymd.factory_registers.register
Material Resources
API - kivymd.material_resources
kivymd.material_resources.dp
kivymd.material_resources.DEVICE_IOS
kivymd.material_resources.DEVICE_TYPE = desktop
kivymd.material_resources.MAX_NAV_DRAWER_WIDTH
kivymd.material_resources.SEGMENT_CONTROL_SEGMENT_SWITCH_ELEVATION = 1
kivymd.material_resources.FILE_MANAGER_TOP_APP_BAR_ELEVATION = 1
kivymd.material_resources.FLOATING_ACTION_BUTTON_M2_ELEVATION = 1
kivymd.material_resources.FLOATING_ACTION_BUTTON_M3_ELEVATION = 0.5
kivymd.material_resources.CARD_STYLE_ELEVATED_M3_ELEVATION = 0.5
kivymd.material_resources.CARD_STYLE_OUTLINED_FILLED_M3_ELEVATION = 0
kivymd.material_resources.DATA_TABLE_ELEVATION = 4
kivymd.material_resources.DROP_DOWN_MENU_ELEVATION = 4
kivymd.material_resources.TOP_APP_BAR_ELEVATION = 2
kivymd.material_resources.SNACK_BAR_ELEVATION = 2
kivymd.material_resources.RAISED_BUTTON_SOFTNESS = 4
kivymd.material_resources.FLOATING_ACTION_BUTTON_M3_SOFTNESS = 0
kivymd.material_resources.DATA_TABLE_SOFTNESS = 12
kivymd.material_resources.DROP_DOWN_MENU_SOFTNESS = 12
kivymd.material_resources.RAISED_BUTTON_OFFSET
kivymd.material_resources.FLOATING_ACTION_BUTTON_M2_OFFSET
kivymd.material_resources.FLOATING_ACTION_BUTTON_M3_OFFSET
kivymd.material_resources.DATA_TABLE_OFFSET
kivymd.material_resources.DROP_DOWN_MENU_OFFSET
kivymd.material_resources.SNACK_BAR_OFFSET
kivymd.material_resources.TOUCH_TARGET_HEIGHT
Two implementations. The first is based on color brightness obtained from- https://www.w3.org/TR/AERT#
color-contrast The second is based on relative luminance calculation for sRGB obtained from- https://www.w3.
org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef and contrast ratio calculation obtained from- https:
//www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
Preliminary testing suggests color brightness more closely matches the Material Design spec suggested text colors,
but the alternative implementation is both newer and the current ‘correct’ recommendation, so is included here as an
option.
API - kivymd.theming_dynamic_text
kivymd.theming_dynamic_text.get_contrast_text_color(color, use_color_brightness=True)
kivymd.theming_dynamic_text.color
Effects
API - kivymd.effects
Submodules
kivymd.effects.fadingedge
API - kivymd.effects.fadingedge
Submodules
kivymd.effects.roulettescroll
API - kivymd.effects.roulettescroll
Submodules
kivymd.effects.stiffscroll
API - kivymd.effects.stiffscroll
Submodules
kivymd.toast
API - kivymd.toast
Submodules
API - kivymd.toast.androidtoast
Submodules
AndroidToast
KV = '''
MDScreen:
MDFlatButton:
text: "My Toast"
pos_hint:{"center_x": .5, "center_y": .5}
on_press: app.show_toast()
'''
class Test(MDApp):
def build(self):
(continues on next page)
def show_toast(self):
toast("Hello World", True, 80, 200, 0)
Test().run()
API - kivymd.toast.androidtoast.androidtoast
kivymd.toast.kivytoast
API - kivymd.toast.kivytoast
Submodules
KivyToast
KV = '''
MDScreen:
(continues on next page)
MDTopAppBar:
title: 'Test Toast'
pos_hint: {'top': 1}
left_action_items: [['menu', lambda x: x]]
MDRaisedButton:
text: 'TEST KIVY TOAST'
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_toast()
'''
class Test(MDApp):
def show_toast(self):
'''Displays a toast on the screen.'''
def build(self):
return Builder.load_string(KV)
Test().run()
API - kivymd.toast.kivytoast.kivytoast
class kivymd.toast.kivytoast.kivytoast.Toast(**kwargs)
ModalView class. See module documentation for more information.
Events
on_pre_open:
Fired before the ModalView is opened. When this event is fired ModalView is not yet added
to window.
on_open:
Fired when the ModalView is opened.
on_pre_dismiss:
Fired before the ModalView is closed.
on_dismiss:
Fired when the ModalView is closed. If the callback returns True, the dismiss will be can-
celed.
Changed in version 1.11.0: Added events on_pre_open and on_pre_dismiss.
Changed in version 2.0.0: Added property ‘overlay_color’.
Changed in version 2.1.0: Marked attach_to property as deprecated.
duration
The amount of time (in seconds) that the toast is visible on the screen.
duration is an NumericProperty and defaults to 2.5.
kivymd.tools
API - kivymd.tools
Submodules
kivymd.tools.argument_parser
API - kivymd.tools.argument_parser
error(self, message)
error(message: string)
Prints a usage message incorporating the message to stderr and exits.
If you override this in a subclass, it should not return – it should either exit or raise an exception.
format_help(self )
kivymd.tools.hotreload
API - kivymd.tools.hotreload
Submodules
HotReload
Note: Since the project is not developing, we decided to include it in the KivvMD library and hope that the further
development of the hot reload tool in the KivyMD project will develop faster.
This library enhance Kivy frameworks with opiniated features such as:
Usage
Note: See create project with hot reload for more information.
TODO
FIXME
API - kivymd.tools.hotreload.app
kivymd.tools.hotreload.app.original_argv
kivymd.tools.hotreload.app.monotonic
kivymd.tools.hotreload.app.PY3 = True
class kivymd.tools.hotreload.app.ExceptionClass
Base handler that catches exceptions in runTouchApp(). You can subclass and extend it as follows:
class E(ExceptionHandler):
def handle_exception(self, inst):
Logger.exception('Exception caught by ExceptionHandler')
return ExceptionManager.PASS
ExceptionManager.add_handler(E())
Then, all exceptions will be set to PASS, and logged to the console!
handle_exception(self, inst)
Called by ExceptionManagerBase to handle a exception.
Defaults to returning ExceptionManager.RAISE that re-raises the exception. Return
ExceptionManager.PASS to indicate that the exception was handled and should be ignored.
This may be called multiple times with the same exception, if ExceptionManager.RAISE is returned as
the exception bubbles through multiple kivy exception handling levels.
class kivymd.tools.hotreload.app.MDApp(**kwargs)
HotReload Application class.
DEBUG
Control either we activate debugging in the app or not. Defaults depend if ‘DEBUG’ exists in os.environ.
DEBUG is a BooleanProperty.
FOREGROUND_LOCK
If True it will require the foreground lock on windows.
FOREGROUND_LOCK is a BooleanProperty and defaults to False.
KV_FILES
List of KV files under management for auto reloader.
KV_FILES is a ListProperty and defaults to [].
KV_DIRS
List of managed KV directories for autoloader.
KV_DIRS is a ListProperty and defaults to [].
AUTORELOADER_PATHS
List of path to watch for auto reloading.
AUTORELOADER_PATHS is a ListProperty and defaults to ([(“.”, {“recursive”: True})].
AUTORELOADER_IGNORE_PATTERNS
List of extensions to ignore.
AUTORELOADER_IGNORE_PATTERNS is a ListProperty and defaults to [‘*.pyc’, ‘*__pycache__*’].
CLASSES
Factory classes managed by hotreload.
CLASSES is a DictProperty and defaults to {}.
IDLE_DETECTION
Idle detection (if True, event on_idle/on_wakeup will be fired). Rearming idle can also be done with
rearm_idle().
IDLE_DETECTION is a BooleanProperty and defaults to False.
IDLE_TIMEOUT
Default idle timeout.
IDLE_TIMEOUT is a NumericProperty and defaults to 60.
RAISE_ERROR
Raise error. When the DEBUG is activated, it will raise any error instead of showing it on the screen. If
you still want to show the error when not in DEBUG, put this to False.
RAISE_ERROR is a BooleanProperty and defaults to True.
build(self )
Initializes the application; it will be called only once. If this method returns a widget (tree), it will be used
as the root widget and added to the window.
Returns
None or a root Widget instance if no self.root exists.
get_root(self )
Return a root widget, that will contains your application. It should not be your application widget itself, as
it may be destroyed and recreated from scratch when reloading.
By default, it returns a RelativeLayout, but it could be a Viewport.
get_root_path(self )
Return the root file path.
abstract build_app(self, first=False)
Must return your application widget.
If first is set, it means that will be your first time ever that the application is built. Act according to it.
unload_app_dependencies(self )
Called when all the application dependencies must be unloaded. Usually happen before a reload
load_app_dependencies(self )
Load all the application dependencies. This is called before rebuild.
rebuild(self, *args, **kwargs)
set_widget(self, wid)
Clear the root container, and set the new approot widget to wid.
apply_state(self, state)
Whatever the current state is, reapply the current state.
install_idle(self, timeout=60)
Install the idle detector. Default timeout is 60s. Once installed, it will check every second if the idle timer
expired. The timer can be rearm using rearm_idle().
rearm_idle(self, *args)
Rearm the idle timer.
patch_builder(self )
on_idle(self, *args)
Event fired when the application enter the idle mode.
on_wakeup(self, *args)
Event fired when the application leaves idle mode.
kivymd.tools.packaging
API - kivymd.tools.packaging
Submodules
PyInstaller hooks
import sys
import os
path = os.path.abspath(".")
a = Analysis(
["main.py"],
pathex=[path],
hookspath=[kivymd_hooks_path],
win_no_prefer_redirects=False,
win_private_assemblies=False,
cipher=None,
noarchive=False,
)
pyz = PYZ(a.pure, a.zipped_data, cipher=None)
exe = EXE(
pyz,
a.scripts,
a.binaries,
a.zipfiles,
a.datas,
*[Tree(p) for p in (sdl2.dep_bins + glew.dep_bins)],
debug=False,
strip=False,
upx=True,
name="app_name",
console=True,
)
API - kivymd.tools.packaging.pyinstaller
kivymd.tools.packaging.pyinstaller.hooks_path
Path to hook directory to use with PyInstaller. See kivymd.tools.packaging.pyinstaller for more infor-
mation.
kivymd.tools.packaging.pyinstaller.get_hook_dirs()
kivymd.tools.packaging.pyinstaller.get_pyinstaller_tests()
Submodules
API - kivymd.tools.packaging.pyinstaller.hook-kivymd
kivymd.tools.patterns
API - kivymd.tools.patterns
Submodules
The script creates a new View package in an existing project with an MVC template created using the create_project
utility.
New in version 1.0.0.
See also:
Utility create_project
To add a new view to an existing project that was created using the create_project utility, use the following command:
kivymd.add_view \
name_pattern \
path_to_project \
name_view
Example command:
kivymd.add_view \
MVC \
/Users/macbookair/Projects \
NewScreen
You can also add new views with responsive behavior to an existing project:
kivymd.add_view \
MVC \
/Users/macbookair/Projects \
NewScreen \
--use_responsive yes
API - kivymd.tools.patterns.add_view
kivymd.tools.patterns.add_view.main()
The function of adding a new view to the project.
Use a clean architecture for your applications. KivyMD allows you to quickly create a project template with the MVC
pattern. So far, this is the only pattern that this utility offers. You can also include database support in your project. At
the moment, support for the Firebase database (the basic implementation of the real time database) and RestDB (the
full implementation) is available.
Project creation
Template command:
kivymd.create_project \
name_pattern \
path_to_project \
name_project \
python_version \
kivy_version
Example command:
kivymd.create_project \
MVC \
/Users/macbookair/Projects \
MyMVCProject \
python3.10 \
2.1.0
This command will by default create a project with an MVC pattern. Also, the project will create a virtual environment
with Python 3.10, Kivy version 2.1.0 and KivyMD master version.
Note: Please note that the Python version you specified must be installed on your computer.
Note: Note that in the following command, you can use one of two database names: ‘firebase’ or ‘restdb’.
Template command:
kivymd.create_project \
name_pattern \
path_to_project \
name_project \
python_version \
kivy_version \
--name_database
Example command:
kivymd.create_project \
MVC \
/Users/macbookair/Projects \
MyMVCProject \
python3.10 \
2.1.0 \
--name_database restdb
This command will create a project with an MVC template by default. The project will also create a virtual environment
with Python 3.10, Kivy version 2.1.0, KivyMD master version and a wrapper for working with the database restdb.io.
class DataBase:
def __init__(self):
database_url = "https://restdbio-5498.restdb.io"
api_key = "7ce258d66f919d3a891d1166558765f0b4dbd"
Note: Please note that database.py the shell in the DataBase class uses the database_url and api_key parameters on
the test database (works only in read mode), so you should use your data for the database.
Template command:
kivymd.create_project \
name_pattern \
path_to_project \
name_project \
python_version \
kivy_version \
--use_hotreload
Example command:
kivymd.create_project \
MVC \
/Users/macbookair/Projects \
MyMVCProject \
python3.10 \
2.1.0 \
--use_hotreload yes
After creating the project, open the file main.py, there is a lot of useful information. Also, the necessary information
is in other modules of the project in the form of comments. So do not forget to look at the source files of the created
project.
When creating a project, you can specify which views should use responsive behavior. To do this, specify the name of
the view/views in the –use_responsive argument:
Template command:
kivymd.create_project \
name_pattern \
path_to_project \
name_project \
python_version \
kivy_version \
--name_screen FirstScreen SecondScreen ThirdScreen \
--use_responsive FirstScreen SecondScreen
The FirstScreen and SecondScreen views will be created with an responsive architecture. For more detailed information
about using the adaptive view, see the MDResponsiveLayout widget.
Required Arguments
• pattern
– the name of the pattern with which the project will be created
• directory
– directory in which the project will be created
• name
– project name
• python_version
– the version of Python (specify as python3.9 or python3.8) with
– which the virtual environment will be created
• kivy_version
– version of Kivy (specify as 2.1.0 or master) that will be used in the project
Optional arguments
• name_screen
– the name of the class which be used when creating the project pattern
When you need to create an application template with multiple screens, use multiple values separated by a space for
the name_screen parameter, for example, as shown below:
Template command:
kivymd.create_project \
name_pattern \
path_to_project \
name_project \
python_version \
kivy_version \
--name_screen FirstScreen SecondScreen ThirdScreen
• name_database
– provides a basic template for working with the ‘firebase’ library
– or a complete implementation for working with a database ‘restdb.io’
• use_hotreload
– creates a hot reload entry point to the application
• use_localization
– creates application localization files
• use_responsive
– the name/names of the views to be used by the responsive UI
Warning: On Windows, hot reloading of Python files may not work. But, for example, there is no such problem
in macOS. If you fix this, please report it to the KivyMD community.
API - kivymd.tools.patterns.create_project
kivymd.tools.patterns.create_project.main()
Project creation function.
kivymd.tools.patterns.MVC
API - kivymd.tools.patterns.MVC
Submodules
kivymd.tools.patterns.MVC.Model
API - kivymd.tools.patterns.MVC.Model
Submodules
kivymd.tools.patterns.MVC.Model.database_firebase
API - kivymd.tools.patterns.MVC.Model.database_firebase
This package is an API Wrapper for the website restdb.io, which allows for online databases.
API - kivymd.tools.patterns.MVC.Model.database_restdb
name = RestDB
kivymd.tools.patterns.MVC.libs
API - kivymd.tools.patterns.MVC.libs
Submodules
kivymd.tools.patterns.MVC.libs.translation
API - kivymd.tools.patterns.MVC.libs.translation
switch_lang(self, lang)
kivymd.tools.release
API - kivymd.tools.release
Submodules
kivymd.tools.release.git_commands
API - kivymd.tools.release.git_commands
API - kivymd.tools.release.make_release
kivymd.tools.release.make_release.run_pre_commit()
Run pre-commit.
kivymd.tools.release.make_release.replace_in_file(pattern, repl, file)
Replace one pattern match to repl in file file.
kivymd.tools.release.make_release.update_init_py(version, is_release, test: bool = False)
Change version in kivymd/__init__.py.
kivymd.tools.release.make_release.update_readme(previous_version, version, test: bool = False)
Change version in README.md.
kivymd.tools.release.make_release.move_changelog(index_file, unreleased_file, previous_version,
version_file, version, test: bool = False)
Edit unreleased.rst and rename to <version>.rst.
kivymd.tools.release.make_release.create_unreleased_changelog(index_file, unreleased_file, version,
ask: bool = True, test: bool =
False)
Create unreleased.rst by template.
kivymd.tools.release.make_release.main()
kivymd.tools.release.make_release.create_argument_parser()
API - kivymd.tools.release.update_icons
kivymd.tools.release.update_icons.kivymd_path
kivymd.tools.release.update_icons.font_path
kivymd.tools.release.update_icons.icon_definitions_path
kivymd.tools.release.update_icons.font_version = master
kivymd.tools.release.update_icons.url
kivymd.tools.release.update_icons.temp_path
kivymd.tools.release.update_icons.temp_repo_path
kivymd.tools.release.update_icons.temp_font_path
kivymd.tools.release.update_icons.temp_preview_path
kivymd.tools.release.update_icons.re_icons_json
kivymd.tools.release.update_icons.re_additional_icons
kivymd.tools.release.update_icons.re_version
kivymd.tools.release.update_icons.re_quote_keys
kivymd.tools.release.update_icons.re_icon_definitions
kivymd.tools.release.update_icons.re_version_in_file
kivymd.tools.release.update_icons.download_file(url, path)
kivymd.tools.release.update_icons.unzip_archive(archive_path, dir_path)
kivymd.tools.release.update_icons.get_icons_list()
kivymd.tools.release.update_icons.make_icon_definitions(icons)
kivymd.tools.release.update_icons.export_icon_definitions(icon_definitions, version)
kivymd.tools.release.update_icons.main()
kivymd.uix
API - kivymd.uix
class kivymd.uix.MDAdaptiveWidget(**kwargs)
adaptive_height
If True, the following properties will be applied to the widget:
size_hint_y: None
height: self.minimum_height
size_hint_x: None
width: self.minimum_width
Submodules
kivymd.uix.backdrop
API - kivymd.uix.backdrop
Submodules
kivymd.uix.banner
API - kivymd.uix.banner
Submodules
Behaviors
API - kivymd.uix.behaviors
Submodules
kivymd.uix.bottomnavigation
API - kivymd.uix.bottomnavigation
Submodules
kivymd.uix.bottomsheet
API - kivymd.uix.bottomsheet
Submodules
kivymd.uix.button
API - kivymd.uix.button
Submodules
kivymd.uix.card
API - kivymd.uix.card
Submodules
kivymd.uix.chip
API - kivymd.uix.chip
Submodules
Controllers
API - kivymd.uix.controllers
Submodules
kivymd.uix.datatables
API - kivymd.uix.datatables
Submodules
kivymd.uix.dialog
API - kivymd.uix.dialog
Submodules
kivymd.uix.dropdownitem
API - kivymd.uix.dropdownitem
Submodules
kivymd.uix.expansionpanel
API - kivymd.uix.expansionpanel
Submodules
kivymd.uix.filemanager
API - kivymd.uix.filemanager
Submodules
kivymd.uix.fitimage
API - kivymd.uix.fitimage
Submodules
kivymd.uix.imagelist
API - kivymd.uix.imagelist
Submodules
kivymd.uix.label
API - kivymd.uix.label
Submodules
kivymd.uix.list
API - kivymd.uix.list
Submodules
kivymd.uix.menu
API - kivymd.uix.menu
Submodules
kivymd.uix.navigationdrawer
API - kivymd.uix.navigationdrawer
Submodules
kivymd.uix.navigationrail
API - kivymd.uix.navigationrail
Submodules
kivymd.uix.pickers
API - kivymd.uix.pickers
Submodules
kivymd.uix.pickers.colorpicker
API - kivymd.uix.pickers.colorpicker
Submodules
kivymd.uix.pickers.datepicker
API - kivymd.uix.pickers.datepicker
Submodules
kivymd.uix.pickers.timepicker
API - kivymd.uix.pickers.timepicker
Submodules
kivymd.uix.progressbar
API - kivymd.uix.progressbar
Submodules
kivymd.uix.refreshlayout
API - kivymd.uix.refreshlayout
Submodules
kivymd.uix.segmentedbutton
API - kivymd.uix.segmentedbutton
Submodules
kivymd.uix.segmentedcontrol
API - kivymd.uix.segmentedcontrol
Submodules
kivymd.uix.selection
API - kivymd.uix.selection
Submodules
kivymd.uix.selectioncontrol
API - kivymd.uix.selectioncontrol
Submodules
kivymd.uix.slider
API - kivymd.uix.slider
Submodules
kivymd.uix.sliverappbar
API - kivymd.uix.sliverappbar
Submodules
kivymd.uix.snackbar
API - kivymd.uix.snackbar
Submodules
kivymd.uix.spinner
API - kivymd.uix.spinner
Submodules
kivymd.uix.swiper
API - kivymd.uix.swiper
Submodules
kivymd.uix.tab
API - kivymd.uix.tab
Submodules
Templates
Base classes for controlling the scale, rotation of the widget, etc.
API - kivymd.uix.templates
Submodules
kivymd.uix.templates.rotatewidget
API - kivymd.uix.templates.rotatewidget
Submodules
kivymd.uix.templates.scalewidget
API - kivymd.uix.templates.scalewidget
Submodules
kivymd.uix.templates.stencilwidget
API - kivymd.uix.templates.stencilwidget
Submodules
kivymd.uix.textfield
API - kivymd.uix.textfield
Submodules
kivymd.uix.toolbar
API - kivymd.uix.toolbar
Submodules
kivymd.uix.tooltip
API - kivymd.uix.tooltip
Submodules
kivymd.uix.transition
API - kivymd.uix.transition
Submodules
kivymd.utils
API - kivymd.utils
Submodules
asynckivy
API - kivymd.utils.asynckivy
kivymd.utils.asynckivy.start(coro)
kivymd.utils.asynckivy.sleep(duration)
bind(self, step_coro)
Monitor module
The Monitor module is a toolbar that shows the activity of your current application :
• FPS
API - kivymd.utils.fpsmonitor
class kivymd.utils.fpsmonitor.FpsMonitor(**kwargs)
Label class, see module documentation for more information.
Events
on_ref_press
Fired when the user clicks on a word referenced with a [ref] tag in a text markup.
updated_interval
FPS refresh rate.
anchor
Monitor position.
start(self )
update_fps(self, *args)
kivymd.utils.set_bars_colors
API - kivymd.utils.set_bars_colors
KV = '''
MDBoxLayout:
orientation: "vertical"
MDBottomNavigation:
panel_color: app.theme_cls.primary_color
text_color_active: .2, .2, .2, 1
text_color_normal: .9, .9, .9, 1
use_text: False
MDBottomNavigationItem:
icon: 'gmail'
MDBottomNavigationItem:
icon: 'twitter'
MDBottomNavigationItem:
icon: 'youtube'
'''
class Test(MDApp):
def build(self):
self.set_bars_colors()
return Builder.load_string(KV)
def set_bars_colors(self):
set_bars_colors(
self.theme_cls.primary_color, # status bar color
self.theme_cls.primary_color, # navigation bar color
"Light", # icons color of status bar
)
Test().run()
def set_bars_colors(self):
set_bars_colors(
self.theme_cls.primary_color, # status bar color
self.theme_cls.primary_color, # navigation bar color
"Dark", # icons color of status bar
)
THREE
• genindex
• modindex
• search
611
KivyMD, Release 1.2.0.dev0
k 597
kivymd, 577 kivymd.tools.release, 598
kivymd.app, 28 kivymd.tools.release.git_commands, 598
kivymd.color_definitions, 30 kivymd.tools.release.make_release, 598
kivymd.effects, 579 kivymd.tools.release.update_icons, 599
kivymd.effects.fadingedge, 579 kivymd.uix, 600
kivymd.effects.fadingedge.fadingedge, 558 kivymd.uix.anchorlayout, 37
kivymd.effects.roulettescroll, 579 kivymd.uix.backdrop, 601
kivymd.effects.roulettescroll.roulettescroll, kivymd.uix.backdrop.backdrop, 168
560 kivymd.uix.banner, 601
kivymd.effects.stiffscroll, 579 kivymd.uix.banner.banner, 243
kivymd.effects.stiffscroll.stiffscroll, 557 kivymd.uix.behaviors, 601
kivymd.factory_registers, 577 kivymd.uix.behaviors.backgroundcolor_behavior,
kivymd.font_definitions, 36 532
kivymd.icon_definitions, 33 kivymd.uix.behaviors.declarative_behavior,
kivymd.material_resources, 578 526
kivymd.theming, 7 kivymd.uix.behaviors.elevation, 540
kivymd.theming_dynamic_text, 579 kivymd.uix.behaviors.focus_behavior, 555
kivymd.toast, 579 kivymd.uix.behaviors.hover_behavior, 521
kivymd.toast.androidtoast, 580 kivymd.uix.behaviors.magic_behavior, 538
kivymd.toast.androidtoast.androidtoast, 580 kivymd.uix.behaviors.ripple_behavior, 533
kivymd.toast.kivytoast, 581 kivymd.uix.behaviors.rotate_behavior, 553
kivymd.toast.kivytoast.kivytoast, 581 kivymd.uix.behaviors.scale_behavior, 516
kivymd.tools, 583 kivymd.uix.behaviors.stencil_behavior, 524
kivymd.tools.argument_parser, 583 kivymd.uix.behaviors.toggle_behavior, 519
kivymd.tools.hotreload, 584 kivymd.uix.behaviors.touch_behavior, 515
kivymd.tools.hotreload.app, 584 kivymd.uix.bottomnavigation, 601
kivymd.tools.packaging, 588 kivymd.uix.bottomnavigation.bottomnavigation,
kivymd.tools.packaging.pyinstaller, 588 470
kivymd.uix.bottomsheet,
kivymd.tools.packaging.pyinstaller.hook-kivymd, 601
590 kivymd.uix.bottomsheet.bottomsheet, 143
kivymd.tools.patterns, 590 kivymd.uix.boxlayout, 61
kivymd.tools.patterns.add_view, 590 kivymd.uix.button, 601
kivymd.tools.patterns.create_project, 591 kivymd.uix.button.button, 117
kivymd.tools.patterns.MVC, 596 kivymd.uix.card, 602
kivymd.tools.patterns.MVC.libs, 597 kivymd.uix.card.card, 248
kivymd.tools.patterns.MVC.libs.translation, kivymd.uix.carousel, 78
597 kivymd.uix.chip, 602
kivymd.tools.patterns.MVC.Model, 596 kivymd.uix.chip.chip, 506
kivymd.uix.circularlayout, 56
kivymd.tools.patterns.MVC.Model.database_firebase,
596 kivymd.uix.controllers, 602
kivymd.uix.controllers.windowcontroller, 514
kivymd.tools.patterns.MVC.Model.database_restdb,
613
KivyMD, Release 1.2.0.dev0
A add_actions_buttons()
accent_color (kivymd.theming.ThemeManager at- (kivymd.uix.banner.banner.MDBanner
tribute), 15 method), 247
add_doc_to_collection()
accent_color (kivymd.uix.pickers.datepicker.datepicker.BaseDialogPicker
attribute), 279 (kivymd.tools.patterns.MVC.Model.database_restdb.DataBase
accent_dark (kivymd.theming.ThemeManager at- method), 597
tribute), 16 add_overflow_button()
accent_dark_hue (kivymd.theming.ThemeManager at- (kivymd.uix.toolbar.toolbar.MDTopAppBar
tribute), 15 method), 197
accent_hue (kivymd.theming.ThemeManager attribute), add_row() (kivymd.uix.datatables.datatables.MDDataTable
15 method), 108
accent_light (kivymd.theming.ThemeManager at- add_scrim() (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigati
tribute), 16 method), 400
accent_light_hue (kivymd.theming.ThemeManager add_scrim_layer() (kivymd.uix.bottomsheet.bottomsheet.MDBottomShee
attribute), 15 method), 158
accent_palette (kivymd.theming.ThemeManager at- add_widget() (kivymd.uix.backdrop.backdrop.MDBackdrop
tribute), 15 method), 174
action_items (kivymd.uix.toolbar.toolbar.MDBottomAppBar add_widget() (kivymd.uix.bottomnavigation.bottomnavigation.MDBottom
attribute), 199 method), 477
active (kivymd.uix.chip.chip.MDChip attribute), 513 add_widget() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
method), 159
active (kivymd.uix.navigationrail.navigationrail.MDNavigationRailItem
attribute), 220 add_widget() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheetDragH
method),
active (kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButtonItem 155
attribute), 331 add_widget() (kivymd.uix.card.card.MDCardSwipe
active (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox method), 262
attribute), 435 add_widget() (kivymd.uix.expansionpanel.expansionpanel.MDExpansionP
active (kivymd.uix.selectioncontrol.selectioncontrol.MDSwitch method), 311
attribute), 437 add_widget() (kivymd.uix.imagelist.imagelist.MDSmartTile
active (kivymd.uix.slider.slider.MDSlider attribute), 113 method), 87
active (kivymd.uix.spinner.spinner.MDSpinner at- add_widget() (kivymd.uix.list.list.BaseListItem
tribute), 357 method), 503
active_line (kivymd.uix.textfield.textfield.MDTextField add_widget() (kivymd.uix.navigationdrawer.navigationdrawer.MDNaviga
attribute), 423 method), 407
adaptive_height (kivymd.uix.MDAdaptiveWidget at- add_widget() (kivymd.uix.navigationdrawer.navigationdrawer.MDNaviga
tribute), 600 method), 400
adaptive_size (kivymd.uix.MDAdaptiveWidget at- add_widget() (kivymd.uix.navigationrail.navigationrail.MDNavigationRa
tribute), 600 method), 235
adaptive_width (kivymd.uix.MDAdaptiveWidget add_widget() (kivymd.uix.screenmanager.MDScreenManager
attribute), 600 method), 60
add_action_button_to_overflow() add_widget() (kivymd.uix.segmentedbutton.segmentedbutton.MDSegment
(kivymd.uix.toolbar.toolbar.MDTopAppBar method), 332
method), 197 add_widget() (kivymd.uix.segmentedcontrol.segmentedcontrol.MDSegmen
615
KivyMD, Release 1.2.0.dev0
616 Index
KivyMD, Release 1.2.0.dev0
Index 617
KivyMD, Release 1.2.0.dev0
21 catching_up() (kivymd.uix.progressbar.progressbar.MDProgressBar
bind() (kivymd.utils.asynckivy.event method), 607 method), 240
bind_key() (kivymd.tools.hotreload.app.MDApp change_month() (kivymd.uix.pickers.datepicker.datepicker.MDDatePicker
method), 588 method), 294
body (kivymd.effects.stiffscroll.stiffscroll.StiffScrollEffect check (kivymd.uix.datatables.datatables.MDDataTable
attribute), 557 attribute), 100
border_margin (kivymd.uix.menu.menu.MDDropdownMenu check_content() (kivymd.uix.navigationdrawer.navigationdrawer.MDNav
attribute), 348 method), 405
box_color (kivymd.uix.imagelist.imagelist.MDSmartTile check_determinate()
attribute), 83 (kivymd.uix.spinner.spinner.MDSpinner
box_position (kivymd.uix.imagelist.imagelist.MDSmartTile method), 357
attribute), 84 check_font_styles()
box_radius (kivymd.uix.imagelist.imagelist.MDSmartTile (kivymd.uix.label.label.MDLabel method),
attribute), 82 324
build() (kivymd.tools.hotreload.app.MDApp method), check_max_opening_height()
587 (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
build_app() (kivymd.tools.hotreload.app.MDApp method), 158
method), 587 check_open_panel() (kivymd.uix.expansionpanel.expansionpanel.MDExp
button_centering_animation() method), 310
(kivymd.uix.toolbar.toolbar.MDBottomAppBar check_overflow_cls()
method), 200 (kivymd.uix.toolbar.toolbar.MDTopAppBar
buttons (kivymd.uix.dialog.dialog.MDDialog attribute), method), 197
450 check_parent() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
buttons (kivymd.uix.snackbar.snackbar.MDSnackbar at- method), 158
tribute), 385 check_scroll_direction()
(kivymd.uix.toolbar.toolbar.MDBottomAppBar
C method), 200
call_ripple_animation_methods() check_size() (kivymd.uix.progressbar.progressbar.MDProgressBar
(kivymd.uix.behaviors.ripple_behavior.CommonRipple method), 239
method), 537 check_text() (kivymd.uix.textfield.textfield.MDTextField
callback() (kivymd.utils.asynckivy.event method), 607 method), 429
caller (kivymd.uix.menu.menu.MDDropdownMenu at- check_transition() (kivymd.uix.screenmanager.MDScreenManager
tribute), 351 method), 60
can_capitalize (kivymd.uix.label.label.MDLabel at- checkbox_icon_down (kivymd.uix.selectioncontrol.selectioncontrol.MDCh
tribute), 323 attribute), 435
cancel_all_animations_on_double_click() checkbox_icon_normal
(kivymd.uix.textfield.textfield.MDTextField (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox
method), 428 attribute), 435
cancel_selection() (kivymd.uix.label.label.MDLabel CheckboxLeftWidget (class in kivymd.uix.list.list), 506
method), 324 circle_color (kivymd.uix.refreshlayout.refreshlayout.MDScrollViewRefre
cancelable (kivymd.uix.taptargetview.MDTapTargetView attribute), 90
attribute), 52 circular_padding (kivymd.uix.circularlayout.MDCircularLayout
canvas_bg (kivymd.uix.label.label.MDLabel attribute), attribute), 58
323 circular_radius (kivymd.uix.circularlayout.MDCircularLayout
CARD_STYLE_ELEVATED_M3_ELEVATION (in module attribute), 58
kivymd.material_resources), 578 CircularElevationBehavior (class in
CARD_STYLE_OUTLINED_FILLED_M3_ELEVATION (in kivymd.uix.behaviors.elevation), 552
module kivymd.material_resources), 578 CircularRippleBehavior (class in
catching_duration (kivymd.uix.progressbar.progressbar.MDProgressBar kivymd.uix.behaviors.ripple_behavior), 537
attribute), 239 CLASSES (kivymd.tools.hotreload.app.MDApp attribute),
catching_transition 587
(kivymd.uix.progressbar.progressbar.MDProgressBar clear_content() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
attribute), 239 method), 159
clockwise (kivymd.uix.circularlayout.MDCircularLayout
618 Index
KivyMD, Release 1.2.0.dev0
Index 619
KivyMD, Release 1.2.0.dev0
620 Index
KivyMD, Release 1.2.0.dev0
Index 621
KivyMD, Release 1.2.0.dev0
622 Index
KivyMD, Release 1.2.0.dev0
get_content() (kivymd.uix.filemanager.filemanager.MDFileManager(kivymd.uix.textfield.textfield.MDTextFieldRect
method), 466 method), 418
get_contrast_text_color() (in module get_rgb() (kivymd.uix.pickers.colorpicker.colorpicker.MDColorPicker
kivymd.theming_dynamic_text), 579 method), 298
get_current_index() get_root() (kivymd.tools.hotreload.app.MDApp
(kivymd.uix.swiper.swiper.MDSwiper method), method), 587
484 get_root_path() (kivymd.tools.hotreload.app.MDApp
get_current_item() (kivymd.uix.swiper.swiper.MDSwiper method), 587
method), 484 get_row_checks() (kivymd.uix.datatables.datatables.MDDataTable
get_current_tab() (kivymd.uix.tab.tab.MDTabs method), 112
method), 378 get_selected() (kivymd.uix.selection.selection.MDSelectionList
get_data_from_collection() method), 269
(kivymd.tools.patterns.MVC.Model.database_firebase.DataBase
get_selected_list_items()
method), 596 (kivymd.uix.selection.selection.MDSelectionList
get_data_from_collection() method), 269
(kivymd.tools.patterns.MVC.Model.database_restdb.DataBase
get_slides() (kivymd.uix.tab.tab.MDTabs method),
method), 597 378
get_date_range() (kivymd.uix.pickers.datepicker.datepicker.MDDatePicker
get_state() (kivymd.uix.expansionpanel.expansionpanel.MDExpansionPa
method), 294 method), 310
get_default_overflow_cls() get_state() (kivymd.uix.pickers.timepicker.timepicker.MDTimePicker
(kivymd.uix.toolbar.toolbar.MDTopAppBar method), 306
method), 198 get_tab_list() (kivymd.uix.tab.tab.MDTabs method),
get_default_toolbar() 378
(kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbar
get_term_vel() (kivymd.effects.roulettescroll.roulettescroll.RouletteScroll
method), 167 method), 562
get_dist_from_side() get_window_width_resizing_direction()
(kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawer
(kivymd.uix.controllers.windowcontroller.WindowController
method), 412 method), 514
get_field() (kivymd.uix.pickers.datepicker.datepicker.MDDatePicker
git_clean() (in module
method), 294 kivymd.tools.release.git_commands), 598
get_hero_from_widget() git_commit() (in module
(kivymd.uix.screenmanager.MDScreenManager kivymd.tools.release.git_commands), 598
method), 60 git_push() (in module
get_hook_dirs() (in module kivymd.tools.release.git_commands), 598
kivymd.tools.packaging.pyinstaller), 589 git_tag() (in module
get_icons_list() (in module kivymd.tools.release.git_commands), 598
kivymd.tools.release.update_icons), 600 grow() (kivymd.uix.behaviors.magic_behavior.MagicBehavior
get_items() (kivymd.uix.navigationrail.navigationrail.MDNavigationRail
method), 539
method), 234
get_items() (kivymd.uix.swiper.swiper.MDSwiper H
method), 484 halign (kivymd.uix.button.button.BaseButton attribute),
get_list_date() (kivymd.uix.pickers.datepicker.datepicker.DatePickerInputField
132
method), 290 handle_exception() (kivymd.tools.hotreload.app.ExceptionClass
get_normal_height() method), 586
(kivymd.uix.dialog.dialog.MDDialog method), header (kivymd.uix.backdrop.backdrop.MDBackdrop at-
457 tribute), 173
get_previous_version() (in module header (kivymd.uix.bottomnavigation.bottomnavigation.MDBottomNavigati
kivymd.tools.release.git_commands), 598 attribute), 474
get_pyinstaller_tests() (in module header_cls (kivymd.uix.menu.menu.MDDropdownMenu
kivymd.tools.packaging.pyinstaller), 589 attribute), 343
get_real_device_type() header_text (kivymd.uix.backdrop.backdrop.MDBackdrop
(kivymd.uix.controllers.windowcontroller.WindowControllerattribute), 173
method), 514 headline_text (kivymd.uix.toolbar.toolbar.MDTopAppBar
get_rect_instruction() attribute), 197
Index 623
KivyMD, Release 1.2.0.dev0
624 Index
KivyMD, Release 1.2.0.dev0
Index 625
KivyMD, Release 1.2.0.dev0
input_field_text_color kivymd.icon_definitions
(kivymd.uix.pickers.datepicker.datepicker.BaseDialogPicker
module, 33
attribute), 287 kivymd.material_resources
input_field_text_color_focus module, 578
(kivymd.uix.pickers.datepicker.datepicker.BaseDialogPicker
kivymd.theming
attribute), 288 module, 7
input_field_text_color_normal kivymd.theming_dynamic_text
(kivymd.uix.pickers.datepicker.datepicker.BaseDialogPicker
module, 579
attribute), 287 kivymd.toast
input_filter() (kivymd.uix.pickers.datepicker.datepicker.DatePickerInputField
module, 579
method), 290 kivymd.toast.androidtoast
install_idle() (kivymd.tools.hotreload.app.MDApp module, 580
method), 588 kivymd.toast.androidtoast.androidtoast
interval (kivymd.effects.roulettescroll.roulettescroll.RouletteScrollEffect
module, 580
attribute), 561 kivymd.toast.kivytoast
IRightBodyTouch (class in kivymd.uix.list.list), 504 module, 581
is_date_valaid() (kivymd.uix.pickers.datepicker.datepicker.MDDatePicker
kivymd.toast.kivytoast.kivytoast
method), 294 module, 581
is_numeric() (kivymd.uix.pickers.datepicker.datepicker.DatePickerInputField
kivymd.tools
method), 290 module, 583
is_selected (kivymd.uix.label.label.MDLabel at- kivymd.tools.argument_parser
tribute), 323 module, 583
items (kivymd.uix.dialog.dialog.MDDialog attribute), kivymd.tools.hotreload
451 module, 584
items (kivymd.uix.menu.menu.MDDropdownMenu at- kivymd.tools.hotreload.app
tribute), 344 module, 584
items_spacing (kivymd.uix.swiper.swiper.MDSwiper kivymd.tools.packaging
attribute), 482 module, 588
kivymd.tools.packaging.pyinstaller
K module, 588
kivymd kivymd.tools.packaging.pyinstaller.hook-kivymd
module, 577 module, 590
kivymd.app kivymd.tools.patterns
module, 28 module, 590
kivymd.color_definitions kivymd.tools.patterns.add_view
module, 30 module, 590
kivymd.effects kivymd.tools.patterns.create_project
module, 579 module, 591
kivymd.effects.fadingedge kivymd.tools.patterns.MVC
module, 579 module, 596
kivymd.effects.fadingedge.fadingedge kivymd.tools.patterns.MVC.libs
module, 558 module, 597
kivymd.effects.roulettescroll kivymd.tools.patterns.MVC.libs.translation
module, 579 module, 597
kivymd.effects.roulettescroll.roulettescroll kivymd.tools.patterns.MVC.Model
module, 560 module, 596
kivymd.effects.stiffscroll kivymd.tools.patterns.MVC.Model.database_firebase
module, 579 module, 596
kivymd.effects.stiffscroll.stiffscroll kivymd.tools.patterns.MVC.Model.database_restdb
module, 557 module, 597
kivymd.factory_registers kivymd.tools.release
module, 577 module, 598
kivymd.font_definitions kivymd.tools.release.git_commands
module, 36 module, 598
626 Index
KivyMD, Release 1.2.0.dev0
kivymd.tools.release.make_release kivymd.uix.button.button
module, 598 module, 117
kivymd.tools.release.update_icons kivymd.uix.card
module, 599 module, 602
kivymd.uix kivymd.uix.card.card
module, 600 module, 248
kivymd.uix.anchorlayout kivymd.uix.carousel
module, 37 module, 78
kivymd.uix.backdrop kivymd.uix.chip
module, 601 module, 602
kivymd.uix.backdrop.backdrop kivymd.uix.chip.chip
module, 168 module, 506
kivymd.uix.banner kivymd.uix.circularlayout
module, 601 module, 56
kivymd.uix.banner.banner kivymd.uix.controllers
module, 243 module, 602
kivymd.uix.behaviors kivymd.uix.controllers.windowcontroller
module, 601 module, 514
kivymd.uix.behaviors.backgroundcolor_behavior kivymd.uix.datatables
module, 532 module, 602
kivymd.uix.behaviors.declarative_behavior kivymd.uix.datatables.datatables
module, 526 module, 91
kivymd.uix.behaviors.elevation kivymd.uix.dialog
module, 540 module, 602
kivymd.uix.behaviors.focus_behavior kivymd.uix.dialog.dialog
module, 555 module, 446
kivymd.uix.behaviors.hover_behavior kivymd.uix.dropdownitem
module, 521 module, 602
kivymd.uix.behaviors.magic_behavior kivymd.uix.dropdownitem.dropdownitem
module, 538 module, 467
kivymd.uix.behaviors.ripple_behavior kivymd.uix.expansionpanel
module, 533 module, 602
kivymd.uix.behaviors.rotate_behavior kivymd.uix.expansionpanel.expansionpanel
module, 553 module, 306
kivymd.uix.behaviors.scale_behavior kivymd.uix.filemanager
module, 516 module, 603
kivymd.uix.behaviors.stencil_behavior kivymd.uix.filemanager.filemanager
module, 524 module, 458
kivymd.uix.behaviors.toggle_behavior kivymd.uix.fitimage
module, 519 module, 603
kivymd.uix.behaviors.touch_behavior kivymd.uix.fitimage.fitimage
module, 515 module, 387
kivymd.uix.bottomnavigation kivymd.uix.floatlayout
module, 601 module, 79
kivymd.uix.bottomnavigation.bottomnavigation kivymd.uix.gridlayout
module, 470 module, 76
kivymd.uix.bottomsheet kivymd.uix.hero
module, 601 module, 65
kivymd.uix.bottomsheet.bottomsheet kivymd.uix.imagelist
module, 143 module, 603
kivymd.uix.boxlayout kivymd.uix.imagelist.imagelist
module, 61 module, 80
kivymd.uix.button kivymd.uix.label
module, 601 module, 603
Index 627
KivyMD, Release 1.2.0.dev0
kivymd.uix.label.label kivymd.uix.segmentedbutton
module, 311 module, 604
kivymd.uix.list kivymd.uix.segmentedbutton.segmentedbutton
module, 603 module, 325
kivymd.uix.list.list kivymd.uix.segmentedcontrol
module, 485 module, 605
kivymd.uix.menu kivymd.uix.segmentedcontrol.segmentedcontrol
module, 603 module, 441
kivymd.uix.menu.menu kivymd.uix.selection
module, 333 module, 605
kivymd.uix.navigationdrawer kivymd.uix.selection.selection
module, 603 module, 263
kivymd.uix.navigationdrawer.navigationdrawer kivymd.uix.selectioncontrol
module, 390 module, 605
kivymd.uix.navigationrail kivymd.uix.selectioncontrol.selectioncontrol
module, 603 module, 430
kivymd.uix.navigationrail.navigationrail kivymd.uix.slider
module, 201 module, 605
kivymd.uix.pickers kivymd.uix.slider.slider
module, 604 module, 112
kivymd.uix.pickers.colorpicker kivymd.uix.sliverappbar
module, 604 module, 605
kivymd.uix.pickers.colorpicker.colorpicker kivymd.uix.sliverappbar.sliverappbar
module, 295 module, 160
kivymd.uix.pickers.datepicker kivymd.uix.snackbar
module, 604 module, 605
kivymd.uix.pickers.datepicker.datepicker kivymd.uix.snackbar.snackbar
module, 270 module, 379
kivymd.uix.pickers.timepicker kivymd.uix.spinner
module, 604 module, 605
kivymd.uix.pickers.timepicker.timepicker kivymd.uix.spinner.spinner
module, 299 module, 354
kivymd.uix.progressbar kivymd.uix.stacklayout
module, 604 module, 63
kivymd.uix.progressbar.progressbar kivymd.uix.swiper
module, 235 module, 605
kivymd.uix.recyclegridlayout kivymd.uix.swiper.swiper
module, 38 module, 478
kivymd.uix.recycleview kivymd.uix.tab
module, 62 module, 606
kivymd.uix.refreshlayout kivymd.uix.tab.tab
module, 604 module, 357
kivymd.uix.refreshlayout.refreshlayout kivymd.uix.taptargetview
module, 88 module, 40
kivymd.uix.relativelayout kivymd.uix.templates
module, 64 module, 606
kivymd.uix.responsivelayout kivymd.uix.templates.rotatewidget
module, 54 module, 606
kivymd.uix.screen kivymd.uix.templates.rotatewidget.rotatewidget
module, 59 module, 562
kivymd.uix.screenmanager kivymd.uix.templates.scalewidget
module, 60 module, 606
kivymd.uix.scrollview kivymd.uix.templates.scalewidget.scalewidget
module, 53 module, 563
628 Index
KivyMD, Release 1.2.0.dev0
kivymd.uix.templates.stencilwidget lay_canvas_instructions()
module, 606 (kivymd.uix.behaviors.ripple_behavior.RectangularRippleBehavio
kivymd.uix.templates.stencilwidget.stencilwidget method), 537
module, 563 left_action (kivymd.uix.banner.banner.MDBanner at-
kivymd.uix.textfield tribute), 247
module, 606 left_action_items (kivymd.uix.backdrop.backdrop.MDBackdrop
kivymd.uix.textfield.textfield attribute), 172
module, 413 left_action_items (kivymd.uix.toolbar.toolbar.MDTopAppBar
kivymd.uix.toolbar attribute), 190
module, 606 light_colors (in module kivymd.color_definitions), 32
kivymd.uix.toolbar.toolbar line_anim (kivymd.uix.textfield.textfield.MDTextField
module, 175 attribute), 423
kivymd.uix.tooltip line_anim (kivymd.uix.textfield.textfield.MDTextFieldRect
module, 607 attribute), 418
kivymd.uix.tooltip.tooltip line_color (kivymd.uix.behaviors.backgroundcolor_behavior.Background
module, 240 attribute), 532
kivymd.uix.transition line_color (kivymd.uix.button.button.BaseButton at-
module, 607 tribute), 133
kivymd.uix.transition.transition line_color_disabled
module, 468 (kivymd.uix.button.button.BaseButton at-
kivymd.uix.widget tribute), 133
module, 37 line_color_focus (kivymd.uix.textfield.textfield.MDTextField
kivymd.utils attribute), 423
module, 607 line_color_normal (kivymd.uix.textfield.textfield.MDTextField
kivymd.utils.asynckivy attribute), 422
module, 607 line_width (kivymd.uix.behaviors.backgroundcolor_behavior.Background
kivymd.utils.fpsmonitor attribute), 533
module, 608 line_width (kivymd.uix.button.button.BaseButton at-
kivymd.utils.set_bars_colors tribute), 133
module, 608 line_width (kivymd.uix.spinner.spinner.MDSpinner at-
kivymd_path (in module tribute), 357
kivymd.tools.release.update_icons), 599 lines (kivymd.uix.imagelist.imagelist.MDSmartTile at-
KV_DIRS (kivymd.tools.hotreload.app.MDApp attribute), tribute), 86
586 load_all_kv_files() (kivymd.app.MDApp method),
KV_FILES (kivymd.tools.hotreload.app.MDApp at- 30
tribute), 586 load_app_dependencies()
(kivymd.tools.hotreload.app.MDApp method),
L 587
lock_swiping (kivymd.uix.tab.tab.MDTabs attribute),
label_bg_color (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
attribute), 137 377
label_check_texture_size()
(kivymd.toast.kivytoast.kivytoast.Toast M
method), 582 magic_speed (kivymd.uix.behaviors.magic_behavior.MagicBehavior
attribute), 539
label_radius (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
attribute), 137 MagicBehavior (class in
kivymd.uix.behaviors.magic_behavior), 539
label_text_color (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
attribute), 137 main() (in module kivymd.tools.patterns.add_view), 591
lay_canvas_instructions() main() (in module kivymd.tools.patterns.create_project),
596
(kivymd.uix.behaviors.ripple_behavior.CircularRippleBehavior
method), 537 main() (in module kivymd.tools.release.make_release),
lay_canvas_instructions() 599
main() (in module kivymd.tools.release.update_icons),
(kivymd.uix.behaviors.ripple_behavior.CommonRipple
method), 537 600
Index 629
KivyMD, Release 1.2.0.dev0
630 Index
KivyMD, Release 1.2.0.dev0
Index 631
KivyMD, Release 1.2.0.dev0
632 Index
KivyMD, Release 1.2.0.dev0
Index 633
KivyMD, Release 1.2.0.dev0
634 Index
KivyMD, Release 1.2.0.dev0
on_active() (kivymd.uix.segmentedcontrol.segmentedcontrol.MDSegmentedControl
method), 174
method), 445 on_close() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
on_active() (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox
method), 158
method), 437 on_close() (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
on_active() (kivymd.uix.selectioncontrol.selectioncontrol.MDSwitchmethod), 142
method), 440 on_close() (kivymd.uix.expansionpanel.expansionpanel.MDExpansionPan
on_active() (kivymd.uix.slider.slider.MDSlider method), 310
method), 116 on_close() (kivymd.uix.taptargetview.MDTapTargetView
on_active() (kivymd.uix.spinner.spinner.MDSpinner method), 52
method), 357 on_coasted_to_stop()
on_adaptive_height() (kivymd.effects.roulettescroll.roulettescroll.RouletteScrollEffect
(kivymd.uix.MDAdaptiveWidget method), method), 562
600 on_color_icon_root_button()
on_adaptive_size() (kivymd.uix.MDAdaptiveWidget (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
method), 601 method), 142
on_adaptive_width() (kivymd.uix.MDAdaptiveWidget on_color_icon_stack_button()
method), 600 (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
on_allow_selection() method), 142
(kivymd.uix.label.label.MDLabel method), on_complete() (kivymd.uix.transition.transition.MDTransitionBase
324 method), 469
on_anchor() (kivymd.uix.card.card.MDCardSwipe on_copy() (kivymd.uix.label.label.MDLabel method),
method), 262 324
on_anchor_title() (kivymd.uix.toolbar.toolbar.MDTopAppBaron_current_hero() (kivymd.uix.screenmanager.MDScreenManager
method), 198 method), 60
on_background_color() on_data() (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
(kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbar method), 142
method), 167 on_description_text()
on_background_color_toolbar() (kivymd.uix.taptargetview.MDTapTargetView
(kivymd.uix.filemanager.filemanager.MDFileManager method), 52
method), 466 on_description_text_bold()
on_background_down_button_selected_type_color() (kivymd.uix.taptargetview.MDTapTargetView
(kivymd.uix.pickers.colorpicker.colorpicker.MDColorPickermethod), 52
method), 298 on_description_text_size()
on_bg_color_root_button() (kivymd.uix.taptargetview.MDTapTargetView
(kivymd.uix.button.button.MDFloatingActionButtonSpeedDial method), 52
method), 142 on_determinate_complete()
on_bg_color_stack_button() (kivymd.uix.spinner.spinner.MDSpinner
(kivymd.uix.button.button.MDFloatingActionButtonSpeedDial method), 357
method), 142 on_device_orientation()
on_bg_hint_color() (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
(kivymd.uix.pickers.datepicker.datepicker.MDDatePicker
method), 142 method), 293
on_cancel() (kivymd.uix.pickers.datepicker.datepicker.BaseDialogPicker
on_disabled() (kivymd.uix.bottomnavigation.bottomnavigation.MDBottom
method), 290 method), 475
on_cancel_selection() on_disabled() (kivymd.uix.button.button.BaseButton
(kivymd.uix.label.label.MDLabel method), method), 134
324 on_disabled() (kivymd.uix.button.button.MDTextButton
on_carousel_index() (kivymd.uix.tab.tab.MDTabs method), 136
method), 379 on_disabled() (kivymd.uix.segmentedbutton.segmentedbutton.MDSegmen
on_change_screen_type() method), 331
(kivymd.uix.responsivelayout.MDResponsiveLayout on_disabled() (kivymd.uix.textfield.textfield.MDTextField
method), 56 method), 429
on_check_press() (kivymd.uix.datatables.datatables.MDDataTable
on_dismiss() (kivymd.uix.filemanager.filemanager.MDFileManager
method), 112 method), 467
on_close() (kivymd.uix.backdrop.backdrop.MDBackdrop on_dismiss() (kivymd.uix.menu.menu.MDDropdownMenu
Index 635
KivyMD, Release 1.2.0.dev0
636 Index
KivyMD, Release 1.2.0.dev0
Index 637
KivyMD, Release 1.2.0.dev0
(kivymd.uix.toolbar.toolbar.MDTopAppBar on_swipe_complete()
method), 198 (kivymd.uix.card.card.MDCardSwipe method),
on_ripple_behavior() 262
(kivymd.uix.card.card.MDCard method), on_swipe_left() (kivymd.uix.swiper.swiper.MDSwiper
260 method), 484
on_row_press() (kivymd.uix.datatables.datatables.MDDataTable
on_swipe_right() (kivymd.uix.swiper.swiper.MDSwiper
method), 112 method), 484
on_save() (kivymd.uix.pickers.datepicker.datepicker.BaseDialogPicker
on_switch_tabs() (kivymd.uix.bottomnavigation.bottomnavigation.MDBo
method), 290 method), 477
on_scroll_cls() (kivymd.uix.toolbar.toolbar.MDBottomAppBar
on_switch_tabs() (kivymd.uix.pickers.colorpicker.colorpicker.MDColorP
method), 200 method), 298
on_scroll_content() on_tab_press() (kivymd.uix.bottomnavigation.bottomnavigation.MDBotto
(kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbar method), 475
method), 166 on_tab_press() (kivymd.uix.bottomnavigation.bottomnavigation.MDTab
on_scroll_start() (kivymd.uix.swiper.swiper.MDSwiper method), 474
method), 484 on_tab_release() (kivymd.uix.bottomnavigation.bottomnavigation.MDTa
on_select_color() (kivymd.uix.pickers.colorpicker.colorpicker.MDColorPicker
method), 474
method), 298 on_tab_switch() (kivymd.uix.tab.tab.MDTabs
on_selected() (kivymd.uix.selection.selection.MDSelectionList method), 379
method), 269 on_tab_touch_down()
on_selected_color_background() (kivymd.uix.bottomnavigation.bottomnavigation.MDTab
(kivymd.uix.bottomnavigation.bottomnavigation.MDBottomNavigation
method), 474
method), 477 on_tab_touch_move()
on_selection() (kivymd.uix.label.label.MDLabel (kivymd.uix.bottomnavigation.bottomnavigation.MDTab
method), 324 method), 474
on_show() (kivymd.uix.tooltip.tooltip.MDTooltip on_tab_touch_up() (kivymd.uix.bottomnavigation.bottomnavigation.MDT
method), 243 method), 474
on_show_bar() (kivymd.uix.toolbar.toolbar.MDBottomAppBar on_target_radius() (kivymd.uix.taptargetview.MDTapTargetView
method), 200 method), 53
on_show_off() (kivymd.uix.slider.slider.MDSlider on_target_touch() (kivymd.uix.taptargetview.MDTapTargetView
method), 116 method), 53
on_size() (kivymd.uix.bottomnavigation.bottomnavigation.MDBottomNavigation
on_text() (kivymd.uix.dropdownitem.dropdownitem.MDDropDownItem
method), 477 method), 468
on_size() (kivymd.uix.controllers.windowcontroller.WindowController
on_text_color() (kivymd.uix.label.label.MDLabel
method), 514 method), 324
on_size() (kivymd.uix.label.label.MDLabel method), on_text_color_active()
324 (kivymd.uix.bottomnavigation.bottomnavigation.MDBottomNaviga
on_size() (kivymd.uix.responsivelayout.MDResponsiveLayout method), 477
method), 56 on_text_color_normal()
on_size() (kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButton
(kivymd.uix.bottomnavigation.bottomnavigation.MDBottomNaviga
method), 333 method), 477
on_size() (kivymd.uix.tab.tab.MDTabs method), 379 on_text_color_normal()
on_size() (kivymd.uix.toolbar.toolbar.MDBottomAppBar (kivymd.uix.textfield.textfield.MDTextField
method), 200 method), 429
on_slide_complete() on_theme_style() (kivymd.theming.ThemeManager
(kivymd.uix.carousel.MDCarousel method), 79 method), 25
on_slide_progress() on_theme_text_color()
(kivymd.uix.carousel.MDCarousel method), 79 (kivymd.uix.label.label.MDLabel method),
on_slide_progress() (kivymd.uix.tab.tab.MDTabs 324
method), 379 on_thumb_down() (kivymd.uix.selectioncontrol.selectioncontrol.MDSwitch
on_state() (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox
method), 440
method), 437 on_title_text() (kivymd.uix.taptargetview.MDTapTargetView
on_swipe() (kivymd.uix.swiper.swiper.MDSwiper method), 52
method), 484 on_title_text_bold()
638 Index
KivyMD, Release 1.2.0.dev0
(kivymd.uix.taptargetview.MDTapTargetView method), 79
method), 53 on_touch_up() (kivymd.uix.list.list.BaseListItem
on_title_text_size() method), 503
(kivymd.uix.taptargetview.MDTapTargetView on_touch_up() (kivymd.uix.menu.menu.MDDropdownMenu
method), 53 method), 354
on_toolbar_cls() (kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbar
on_touch_up() (kivymd.uix.navigationdrawer.navigationdrawer.MDNavig
method), 167 method), 413
on_touch_down() (kivymd.toast.kivytoast.kivytoast.Toast on_touch_up() (kivymd.uix.refreshlayout.refreshlayout.MDScrollViewRefr
method), 583 method), 91
on_touch_down() (kivymd.uix.behaviors.ripple_behavior.CommonRipple
on_touch_up() (kivymd.uix.slider.slider.MDSlider
method), 537 method), 116
on_touch_down() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
on_touch_up() (kivymd.uix.swiper.swiper.MDSwiper
method), 158 method), 484
on_touch_down() (kivymd.uix.button.button.BaseButton on_transform_in() (kivymd.uix.hero.MDHeroFrom
method), 134 method), 76
on_touch_down() (kivymd.uix.card.card.MDCardSwipe on_transform_out() (kivymd.uix.hero.MDHeroFrom
method), 262 method), 76
on_touch_down() (kivymd.uix.carousel.MDCarousel on_triple_tap() (kivymd.uix.behaviors.touch_behavior.TouchBehavior
method), 79 method), 516
on_touch_down() (kivymd.uix.list.list.BaseListItem on_type() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
method), 503 method), 158
on_touch_down() (kivymd.uix.menu.menu.MDDropdownMenu on_type() (kivymd.uix.button.button.MDFloatingActionButton
method), 354 method), 135
on_touch_down() (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawer
on_type() (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigation
method), 412 method), 413
on_touch_down() (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox
on_type() (kivymd.uix.toolbar.toolbar.MDTopAppBar
method), 437 method), 197
on_touch_down() (kivymd.uix.slider.slider.MDSlider on_type_color() (kivymd.uix.pickers.colorpicker.colorpicker.MDColorPi
method), 116 method), 298
on_touch_down() (kivymd.uix.swiper.swiper.MDSwiper on_type_height() (kivymd.uix.toolbar.toolbar.MDTopAppBar
method), 484 method), 197
on_touch_move() (kivymd.uix.behaviors.ripple_behavior.CommonRipple
on_unmarked() (kivymd.uix.segmentedbutton.segmentedbutton.MDSegmen
method), 537 method), 333
on_touch_move() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
on_unselected() (kivymd.uix.selection.selection.MDSelectionList
method), 158 method), 269
on_touch_move() (kivymd.uix.card.card.MDCardSwipe on_use_text() (kivymd.uix.bottomnavigation.bottomnavigation.MDBottom
method), 262 method), 477
on_touch_move() (kivymd.uix.list.list.BaseListItem on_value() (kivymd.effects.stiffscroll.stiffscroll.StiffScrollEffect
method), 503 method), 558
on_touch_move() (kivymd.uix.menu.menu.MDDropdownMenu on_value_normalized()
method), 354 (kivymd.uix.slider.slider.MDSlider method),
on_touch_move() (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawer
116
method), 412 on_vbar() (kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbar
on_touch_up() (kivymd.uix.behaviors.magic_behavior.MagicBehavior method), 167
method), 539 on_wakeup() (kivymd.tools.hotreload.app.MDApp
on_touch_up() (kivymd.uix.behaviors.ripple_behavior.CommonRipple method), 588
method), 537 on_width() (kivymd.uix.textfield.textfield.MDTextField
on_touch_up() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet method), 429
method), 158 on_width() (kivymd.uix.toolbar.toolbar.MDTopAppBar
on_touch_up() (kivymd.uix.button.button.BaseButton method), 197
method), 134 on_window_touch() (kivymd.uix.label.label.MDLabel
on_touch_up() (kivymd.uix.card.card.MDCardSwipe method), 324
method), 262 OneLineAvatarIconListItem (class in
on_touch_up() (kivymd.uix.carousel.MDCarousel kivymd.uix.list.list), 505
Index 639
KivyMD, Release 1.2.0.dev0
640 Index
KivyMD, Release 1.2.0.dev0
Index 641
KivyMD, Release 1.2.0.dev0
642 Index
KivyMD, Release 1.2.0.dev0
right_pad_value (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
563
attribute), 139 RouletteScrollEffect (class in
right_text (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawerItem
kivymd.effects.roulettescroll.roulettescroll),
attribute), 406 561
ripple_alpha (kivymd.uix.behaviors.ripple_behavior.CommonRipple
rounded_button (kivymd.uix.button.button.BaseButton
attribute), 535 attribute), 133
ripple_behavior (kivymd.uix.card.card.MDCard at- RoundedRectangularElevationBehavior (class in
tribute), 260 kivymd.uix.behaviors.elevation), 552
ripple_canvas_after row_data (kivymd.uix.datatables.datatables.MDDataTable
(kivymd.uix.behaviors.ripple_behavior.CommonRipple attribute), 97
attribute), 536 row_spacing (kivymd.uix.circularlayout.MDCircularLayout
ripple_color (kivymd.theming.ThemeManager at- attribute), 58
tribute), 23 rows_num (kivymd.uix.datatables.datatables.MDDataTable
ripple_color (kivymd.uix.behaviors.ripple_behavior.CommonRippleattribute), 102
attribute), 535 run_pre_commit() (in module
ripple_color_item (kivymd.uix.navigationrail.navigationrail.MDNavigationRail
kivymd.tools.release.make_release), 599
attribute), 231 running_away() (kivymd.uix.progressbar.progressbar.MDProgressBar
ripple_duration (kivymd.uix.tab.tab.MDTabs at- method), 240
tribute), 377 running_duration (kivymd.uix.progressbar.progressbar.MDProgressBar
ripple_duration_in_fast attribute), 239
(kivymd.uix.behaviors.ripple_behavior.CommonRipple
running_transition (kivymd.uix.progressbar.progressbar.MDProgressBa
attribute), 536 attribute), 239
ripple_duration_in_slow
S
(kivymd.uix.behaviors.ripple_behavior.CommonRipple
attribute), 536 scale_value_center (kivymd.uix.behaviors.scale_behavior.ScaleBehavio
ripple_duration_out attribute), 518
(kivymd.uix.behaviors.ripple_behavior.CommonRipple
scale_value_x (kivymd.uix.behaviors.scale_behavior.ScaleBehavior
attribute), 536 attribute), 518
ripple_func_in (kivymd.uix.behaviors.ripple_behavior.CommonRipple
scale_value_y (kivymd.uix.behaviors.scale_behavior.ScaleBehavior
attribute), 537 attribute), 518
ripple_func_out (kivymd.uix.behaviors.ripple_behavior.CommonRipple
scale_value_z (kivymd.uix.behaviors.scale_behavior.ScaleBehavior
attribute), 537 attribute), 518
ripple_rad_default (kivymd.uix.behaviors.ripple_behavior.CommonRipple
ScaleBehavior (class in
attribute), 535 kivymd.uix.behaviors.scale_behavior), 518
ripple_scale (kivymd.uix.behaviors.ripple_behavior.CircularRippleBehavior
ScaleWidget (class in
attribute), 537 kivymd.uix.templates.scalewidget.scalewidget),
ripple_scale (kivymd.uix.behaviors.ripple_behavior.CommonRipple563
attribute), 535 scrim_alpha_transition
ripple_scale (kivymd.uix.behaviors.ripple_behavior.RectangularRippleBehavior
(kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDr
attribute), 537 attribute), 412
ripple_transition (kivymd.uix.navigationrail.navigationrail.MDNavigationRail
scrim_color (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigati
attribute), 232 attribute), 410
root_button_anim (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
scrim_layer_color (kivymd.uix.bottomsheet.bottomsheet.MDBottomShee
attribute), 139 attribute), 157
root_layout (kivymd.uix.refreshlayout.refreshlayout.MDScrollViewRefreshLayout
scroll (kivymd.effects.stiffscroll.stiffscroll.StiffScrollEffect
attribute), 90 attribute), 557
rotate_value_angle (kivymd.uix.behaviors.rotate_behavior.RotateBehavior
scroll_cls (kivymd.uix.toolbar.toolbar.MDBottomAppBar
attribute), 555 attribute), 200
rotate_value_axis (kivymd.uix.behaviors.rotate_behavior.RotateBehavior
search (kivymd.uix.filemanager.filemanager.MDFileManager
attribute), 555 attribute), 465
RotateBehavior (class in secondary_font_style
kivymd.uix.behaviors.rotate_behavior), 555 (kivymd.uix.list.list.BaseListItem attribute),
RotateWidget (class in 502
kivymd.uix.templates.rotatewidget.rotatewidget),
Index 643
KivyMD, Release 1.2.0.dev0
644 Index
KivyMD, Release 1.2.0.dev0
set_colors_to_updated() set_icon_right_color()
(kivymd.uix.textfield.textfield.MDTextField (kivymd.uix.textfield.textfield.MDTextField
method), 428 method), 428
set_current() (kivymd.uix.swiper.swiper.MDSwiper set_item() (kivymd.uix.dropdownitem.dropdownitem.MDDropDownItem
method), 483 method), 468
set_current_selected_item() set_line_color() (kivymd.uix.card.card.MDCard
(kivymd.uix.navigationrail.navigationrail.MDNavigationRailmethod), 260
method), 234 set_max_length_text_color()
set_default_colors() (kivymd.uix.textfield.textfield.MDTextField
(kivymd.uix.segmentedcontrol.segmentedcontrol.MDSegmentedControl
method), 428
method), 445 set_max_text_length()
set_default_colors() (kivymd.uix.textfield.textfield.MDTextField
(kivymd.uix.textfield.textfield.MDTextField method), 429
method), 428 set_md_bg_color() (kivymd.uix.toolbar.toolbar.MDTopAppBar
set_disabled_color() method), 198
(kivymd.uix.button.button.BaseButton method), set_menu_pos() (kivymd.uix.menu.menu.MDDropdownMenu
133 method), 354
set_elevation() (kivymd.uix.card.card.MDCard set_menu_properties()
method), 260 (kivymd.uix.menu.menu.MDDropdownMenu
set_error() (kivymd.tools.hotreload.app.MDApp method), 354
method), 587 set_month_day() (kivymd.uix.pickers.datepicker.datepicker.MDDatePicke
set_error() (kivymd.uix.pickers.datepicker.datepicker.DatePickerInputField
method), 294
method), 290 set_new_icon() (kivymd.uix.backdrop.backdrop.MDBackdrop
set_fab_icon() (kivymd.uix.toolbar.toolbar.MDBottomAppBar method), 174
method), 201 set_notch() (kivymd.uix.toolbar.toolbar.MDTopAppBar
set_fab_opacity() (kivymd.uix.toolbar.toolbar.MDBottomAppBar method), 198
method), 200 set_notch_rectangle()
set_fade() (kivymd.effects.fadingedge.fadingedge.FadingEdgeEffect (kivymd.uix.textfield.textfield.MDTextField
method), 559 method), 428
set_fill_color() (kivymd.uix.textfield.textfield.MDTextField
set_objects_labels()
method), 428 (kivymd.uix.textfield.textfield.MDTextField
set_font_size() (kivymd.uix.button.button.MDFloatingActionButton method), 429
method), 135 set_paddings() (kivymd.uix.expansionpanel.expansionpanel.MDExpansi
set_headline_font_style() method), 309
(kivymd.uix.toolbar.toolbar.MDTopAppBar set_pos_bottom_buttons()
method), 197 (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
set_helper_text_color() method), 143
(kivymd.uix.textfield.textfield.MDTextField set_pos_hint_text()
method), 428 (kivymd.uix.textfield.textfield.MDTextField
set_hint_text_color() method), 429
(kivymd.uix.textfield.textfield.MDTextField set_pos_labels() (kivymd.uix.button.button.MDFloatingActionButtonSp
method), 428 method), 143
set_hint_text_font_size() set_pos_menu_fab_buttons()
(kivymd.uix.textfield.textfield.MDTextField (kivymd.uix.navigationrail.navigationrail.MDNavigationRail
method), 429 method), 235
set_icon() (kivymd.uix.selectioncontrol.selectioncontrol.MDSwitch
set_pos_panel_items()
method), 440 (kivymd.uix.navigationrail.navigationrail.MDNavigationRail
set_icon_color() (kivymd.uix.button.button.BaseButton method), 234
method), 134 set_pos_root_button()
set_icon_color() (kivymd.uix.toolbar.toolbar.MDBottomAppBar (kivymd.uix.button.button.MDFloatingActionButtonSpeedDial
method), 201 method), 143
set_icon_left_color() set_position_to_current_year()
(kivymd.uix.textfield.textfield.MDTextField (kivymd.uix.pickers.datepicker.datepicker.MDDatePicker
method), 428 method), 294
Index 645
KivyMD, Release 1.2.0.dev0
646 Index
KivyMD, Release 1.2.0.dev0
Index 647
KivyMD, Release 1.2.0.dev0
648 Index
KivyMD, Release 1.2.0.dev0
Index 649
KivyMD, Release 1.2.0.dev0
650 Index
KivyMD, Release 1.2.0.dev0
Index 651
KivyMD, Release 1.2.0.dev0
652 Index
KivyMD, Release 1.2.0.dev0
attribute), 292
Index 653
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: