Kivymd: Andrés Rodríguez, Ivanov Yuri, Artem Bulgakov and Kivymd Contributors
Kivymd: Andrés Rodríguez, Ivanov Yuri, Artem Bulgakov and Kivymd Contributors
Release 2.0.1.dev0
1 KivyMD 1
2 Contents 3
2.1 Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.4 Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
2.5 Behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
2.6 Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
2.7 Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
2.8 About . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
2.9 KivyMD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Index 499
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 2.0.1.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 2.0.1.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 2.0.1.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(
MDButton(
MDButtonText(
text="Hello, World",
),
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
)
MainApp().run()
6 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
KivyMD:
Kivy:
2.2 Themes
2.2.1 Theming
See also:
Material Design spec, Dynamic color
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.
API - kivymd.theming
class kivymd.theming.ThemeManager(**kwargs)
Dynamic color class.
Added in version 2.0.0.
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.
See kivy.utils.hex_colormap keys for available values.
To change the color scheme of an application:
Imperative python style with KV
2.2. Themes 7
KivyMD, Release 2.0.1.dev0
MDButton:
style: "elevated"
pos_hint: {"center_x": .5, "center_y": .5}
MDButtonIcon:
icon: "plus"
MDButtonText:
text: "Button"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Olive" # "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 = "Olive" # "Purple", "Red"
return (
MDScreen(
MDButton(
MDButtonIcon(
icon="plus",
),
MDButtonText(
text="Button",
),
style="elevated",
pos_hint={"center_x": 0.5, "center_y": 0.5},
),
md_bg_color=self.theme_cls.backgroundColor,
)
)
(continues on next page)
8 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
Example().run()
Warning: Remember that by increasing the quality value, you also increase the generation time of the
color scheme.
KV = '''
MDScreen:
md_bg_color: app.theme_cls.surfaceColor
MDButton:
style: "elevated"
pos_hint: {"center_x": .5, "center_y": .5}
(continues on next page)
2.2. Themes 9
KivyMD, Release 2.0.1.dev0
MDButtonIcon:
icon: "plus"
MDButtonText:
text: "Elevated"
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
self.theme_cls.set_colors()
self.theme_cls.dynamic_color = True
if platform == "android":
from android.permissions import Permission, request_permissions
permissions = [Permission.READ_EXTERNAL_STORAGE]
request_permissions(permissions, callback)
Example().run()
10 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
dynamic_scheme_contrast
The contrast of the generated color scheme.
dynamic_scheme_contrast is an NumericProperty and defaults to 0.0.
path_to_wallpaper
The path to the image to set the color scheme. You can use this option if you want to use dynamic color on
platforms other than the Android platform.
Added in version 2.0.0.
path_to_wallpaper is an StringProperty and defaults to ‘’.
theme_style_switch_animation
Animate app colors when switching app color scheme (‘Dark/light’).
Added in version 1.1.0.
Declarative KV style
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDCard:
orientation: "vertical"
padding: 0, 0, 0 , "36dp"
size_hint: .5, .5
style: "elevated"
pos_hint: {"center_x": .5, "center_y": .5}
MDLabel:
text: "Theme style - {}".format(app.theme_cls.theme_style)
halign: "center"
valign: "center"
bold: True
font_style: "Display"
role: "small"
MDButton:
on_release: app.switch_theme_style()
pos_hint: {"center_x": .5}
MDButtonText:
text: "Set theme"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style_switch_animation = True
self.theme_cls.theme_style = "Dark"
(continues on next page)
2.2. Themes 11
KivyMD, Release 2.0.1.dev0
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="Display",
role="small",
),
MDButton(
MDButtonText(
text="Set theme",
),
on_release=self.switch_theme_style,
pos_hint={"center_x": 0.5},
),
id="card",
orientation="vertical",
(continues on next page)
12 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
def on_start(self):
def on_start(*args):
self.root.md_bg_color = self.theme_cls.backgroundColor
Clock.schedule_once(on_start)
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
2.2. Themes 13
KivyMD, Release 2.0.1.dev0
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Light" # "Dark"
return MDScreen(
MDButton(
MDButtonText(
text="Hello, World",
),
style="outlined",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
def on_start(self):
def on_start(*args):
self.root.md_bg_color = self.theme_cls.backgroundColor
Clock.schedule_once(on_start)
Example().run()
14 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDLabel:
text: "MDLabel"
halign: "center"
font_style: "nasalization"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
LabelBase.register(
name="nasalization",
fn_regular="nasalization.ttf",
)
self.theme_cls.font_styles["nasalization"] = {
"large": {
"line-height": 1.64,
"font-name": "nasalization",
"font-size": sp(57),
},
"medium": {
"line-height": 1.52,
"font-name": "nasalization",
"font-size": sp(45),
},
"small": {
"line-height": 1.44,
"font-name": "nasalization",
"font-size": sp(36),
},
}
return Builder.load_string(KV)
Example().run()
2.2. Themes 15
KivyMD, Release 2.0.1.dev0
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
LabelBase.register(
name="nasalization",
fn_regular="/Users/urijivanov/Projects/Dev/MyGithub/Articles/
˓→StarTest/data/font/nasalization-rg.ttf",
self.theme_cls.font_styles["nasalization"] = {
"large": {
"line-height": 1.64,
"font-name": "nasalization",
"font-size": sp(57),
},
"medium": {
"line-height": 1.52,
"font-name": "nasalization",
"font-size": sp(45),
},
"small": {
"line-height": 1.44,
"font-name": "nasalization",
"font-size": sp(36),
},
}
return (
MDScreen(
MDLabel(
text="JetBrainsMono",
halign="center",
font_style="nasalization",
)
)
)
Example().run()
16 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
font_styles is an DictProperty.
on_colors
A Helper function called when colors are changed.
Attr
on_colors defaults to None.
set_colors(*args) → None
Fired methods for setting a new color scheme.
update_theme_colors(*args) → None
Fired when the theme_style value changes.
on_dynamic_scheme_name(*args)
on_dynamic_scheme_contrast(*args)
on_path_to_wallpaper(*args)
switch_theme() → None
Switches the theme from light to dark.
sync_theme_styles(*args) → None
class kivymd.theming.ThemableBehavior(**kwargs)
theme_cls
Instance of ThemeManager class.
theme_cls is an ObjectProperty.
device_ios
True if device is iOS.
device_ios is an BooleanProperty.
theme_line_color
Line color scheme name.
Added in version 2.0.0.
Available options are: ‘Primary’, ‘Custom’.
theme_line_color is an OptionProperty and defaults to ‘Primary’.
theme_bg_color
Background color scheme name.
Added in version 2.0.0.
2.2. Themes 17
KivyMD, Release 2.0.1.dev0
18 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
theme_font_name
Font name scheme name.
Added in version 2.0.0.
Available options are: ‘Primary’, ‘Custom’.
theme_font_name is an OptionProperty and defaults to ‘Primary’.
theme_shadow_softness
Elevation softness scheme name.
Added in version 2.0.0.
Available options are: ‘Primary’, ‘Custom’.
theme_shadow_softness is an OptionProperty and defaults to ‘Primary’.
theme_focus_color
Focus color scheme name.
Added in version 2.0.0.
Available options are: ‘Primary’, ‘Custom’.
theme_focus_color is an OptionProperty and defaults to ‘Primary’.
theme_divider_color
Divider color scheme name.
Added in version 2.0.0.
Available options are: ‘Primary’, ‘Custom’.
theme_divider_color is an OptionProperty and defaults to ‘Primary’.
theme_text_color
Label color scheme name.
Available options are: ‘Primary’, ‘Secondary’, ‘Hint’, ‘Error’, ‘Custom’.
theme_text_color is an OptionProperty and defaults to ‘Primary’.
theme_icon_color
Label color scheme name.
Available options are: ‘Primary’, ‘Secondary’, ‘Hint’, ‘Error’, ‘Custom’.
theme_icon_color is an OptionProperty and defaults to ‘Primary’.
remove_widget(widget) → None
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 FP value in your application:
2.2. Themes 19
KivyMD, Release 2.0.1.dev0
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
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()
20 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
Note: Note that if you override the built-in on_start method, you will definitely need to call the super method:
class MainApp(MDApp):
def build(self):
[...]
def on_start(self):
[...]
2.2. Themes 21
KivyMD, Release 2.0.1.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.
Added 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.
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(path_to_directory: str) → None
Recursively loads KV files from the selected directory.
Added in version 1.0.0.
22 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
List of icons from materialdesignicons.com. These expanded material design icons are maintained by Austin Andrews
(Templarian on Github).
Version 7.4.47
To preview the icons and their names, you can use the following application:
Builder.load_string(
'''
#:import images_path kivymd.images_path
<IconItem>
MDListItemLeadingIcon:
icon: root.icon
MDListItemSupportingText:
text: root.text
<PreviousMDIcons>
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
orientation: 'vertical'
spacing: dp(10)
padding: dp(20)
MDBoxLayout:
adaptive_height: True
MDIconButton:
icon: 'magnify'
pos_hint: {'center_y': .5}
MDTextField:
id: search_field
hint_text: 'Search icon'
on_text: root.set_list_md_icons(self.text, True)
RecycleView:
id: rv
key_viewclass: 'viewclass'
(continues on next page)
2.2. Themes 23
KivyMD, Release 2.0.1.dev0
RecycleBoxLayout:
padding: dp(10), dp(10), 0, dp(10)
default_size: None, dp(48)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
'''
)
class IconItem(MDListItem):
icon = StringProperty()
text = StringProperty()
class PreviousMDIcons(MDScreen):
def set_list_md_icons(self, text="", search=False):
'''Builds a list of icons for the screen MDIcons.'''
def add_icon_item(name_icon):
self.ids.rv.data.append(
{
"viewclass": "IconItem",
"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()
24 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
MainApp().run()
API - kivymd.icon_definitions
kivymd.icon_definitions.md_icons
text
See also:
Material Design spec, The type system
API - kivymd.font_definitions
kivymd.font_definitions.fonts
kivymd.font_definitions.theme_font_styles
2.2. Themes 25
KivyMD, Release 2.0.1.dev0
26 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
2.3 Components
See also:
Material Design spec, Dynamic color
Dynamic color can create accessible UI color schemes based on content or user settings
Dynamic color experiences are built with M3 color schemes. Beginning with Android 12, users can generate individu-
alized schemes through wallpaper selection and other customization settings. With M3 as a foundation, user-generated
colors can coexist with app colors, putting a range of customizable visual experiences in the hands of users.
2.3. Components 27
KivyMD, Release 2.0.1.dev0
1. Baseline scheme
2. Colors extracted from a wallpaper
3. Colors extracted from content
KV = '''
<ColorCard>
orientation: "vertical"
MDLabel:
text: root.text
color: "grey"
adaptive_height: True
MDCard:
theme_bg_color: "Custom"
md_bg_color: root.bg_color
MDScreen:
md_bg_color: app.theme_cls.backgroundColor
MDIconButton:
on_release: app.open_menu(self)
pos_hint: {"top": .98}
x: "12dp"
icon: "menu"
MDRecycleView:
id: card_list
viewclass: "ColorCard"
bar_width: 0
size_hint_y: None
height: root.height - dp(68)
RecycleGridLayout:
cols: 3
spacing: "16dp"
padding: "16dp"
default_size: None, dp(56)
(continues on next page)
28 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
class ColorCard(BoxLayout):
text = StringProperty()
bg_color = ColorProperty()
class Example(MDApp):
menu: MDDropdownMenu = None
def build(self):
self.theme_cls.dynamic_color = True
return Builder.load_string(KV)
instance = rv.view_adapter.get_view(
index, datas, opts[index]["viewclass"]
)
return instance
def set_palette(self):
instance_from_menu = self.get_instance_from_menu("Set palette")
available_palettes = [
name_color.capitalize() for name_color in hex_colormap.keys()
(continues on next page)
2.3. Components 29
KivyMD, Release 2.0.1.dev0
menu_items = []
for name_palette in available_palettes:
menu_items.append(
{
"text": name_palette,
"on_release": lambda x=name_palette: self.switch_palette(x),
}
)
MDDropdownMenu(
caller=instance_from_menu,
items=menu_items,
).open()
def on_start(self):
Clock.schedule_once(self.generate_cards)
Example().run()
See also:
kivymd.theming.ThemeManager.path_to_wallpaper
import os
30 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
KV = '''
<ColorCard>
orientation: "vertical"
MDLabel:
text: root.text
color: "grey"
adaptive_height: True
MDCard:
theme_bg_color: "Custom"
md_bg_color: root.bg_color
MDScreen:
md_bg_color: app.theme_cls.backgroundColor
MDRecycleView:
id: card_list
viewclass: "ColorCard"
bar_width: 0
RecycleGridLayout:
cols: 3
spacing: "16dp"
padding: "16dp"
default_size: None, dp(56)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
'''
class ColorCard(MDBoxLayout):
text = StringProperty()
bg_color = ColorProperty()
class Example(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
Window.bind(on_dropfile=self.on_drop_file)
2.3. Components 31
KivyMD, Release 2.0.1.dev0
def build(self):
self.theme_cls.dynamic_color = True
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def on_start(self):
Clock.schedule_once(self.generate_cards)
Example().run()
API - kivymd.dynamic_color
class kivymd.dynamic_color.DynamicColor
Dynamic color class.
Added in version 2.0.0.
primaryColor
Primary color.
primaryColor is an ColorProperty and defaults to None.
primaryContainerColor
Primary container color.
primaryContainerColor is an ColorProperty and defaults to None.
32 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
onPrimaryColor
On primary color.
onPrimaryColor is an ColorProperty and defaults to None.
onPrimaryContainerColor
On primary container color.
onPrimaryContainerColor is an ColorProperty and defaults to None.
secondaryColor
Secondary color.
secondaryColor is an ColorProperty and defaults to None.
secondaryContainerColor
Secondary container color.
secondaryContainerColor is an ColorProperty and defaults to None.
onSecondaryColor
On secondary color.
onSecondaryColor is an ColorProperty and defaults to None.
onSecondaryContainerColor
On secondary container color.
onSecondaryContainerColor is an ColorProperty and defaults to None.
tertiaryColor
Tertiary color.
tertiaryColor is an ColorProperty and defaults to None.
tertiaryContainerColor
Tertiary container color.
tertiaryContainerColor is an ColorProperty and defaults to None.
onTertiaryColor
On tertiary color.
onTertiaryColor is an ColorProperty and defaults to None.
onTertiaryContainerColor
On tertiary container color.
onTertiaryContainerColor is an ColorProperty and defaults to None.
surfaceColor
Surface color.
surfaceColor is an ColorProperty and defaults to None.
surfaceDimColor
Surface dim color.
surfaceDimColor is an ColorProperty and defaults to None.
2.3. Components 33
KivyMD, Release 2.0.1.dev0
surfaceBrightColor
Surface bright color.
surfaceBrightColor is an ColorProperty and defaults to None.
surfaceContainerLowestColor
Surface container lowest color.
surfaceContainerLowestColor is an ColorProperty and defaults to None.
surfaceContainerLowColor
Surface container low color.
surfaceContainerLowColor is an ColorProperty and defaults to None.
surfaceContainerColor
Surface container color.
surfaceContainerColor is an ColorProperty and defaults to None.
surfaceContainerHighColor
Surface container high color.
surfaceContainerHighColor is an ColorProperty and defaults to None.
surfaceContainerHighestColor
Surface container highest color.
surfaceContainerHighestColor is an ColorProperty and defaults to None.
surfaceVariantColor
Surface variant color.
surfaceVariantColor is an ColorProperty and defaults to None.
surfaceTintColor
Surface tint color.
surfaceTintColor is an ColorProperty and defaults to None.
onSurfaceColor
On surface color.
onSurfaceColor is an ColorProperty and defaults to None.
onSurfaceLightColor
On surface light color.
onSurfaceLightColor is an ColorProperty and defaults to None.
onSurfaceVariantColor
On surface variant color.
onSurfaceVariantColor is an ColorProperty and defaults to None.
inverseSurfaceColor
Inverse surface color.
inverseSurfaceColor is an ColorProperty and defaults to None.
34 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
inverseOnSurfaceColor
Inverse on surface color.
inverseOnSurfaceColor is an ColorProperty and defaults to None.
inversePrimaryColor
Inverse primary color.
inversePrimaryColor is an ColorProperty and defaults to None.
backgroundColor
Background color.
backgroundColor is an ColorProperty and defaults to None.
onBackgroundColor
On background color.
onBackgroundColor is an ColorProperty and defaults to None.
errorColor
Error color.
errorColor is an ColorProperty and defaults to None.
errorContainerColor
Error container color.
errorContainerColor is an ColorProperty and defaults to None.
onErrorColor
On error color.
onErrorColor is an ColorProperty and defaults to None.
onErrorContainerColor
On error container color.
onErrorContainerColor is an ColorProperty and defaults to None.
outlineColor
Outline color.
outlineColor is an ColorProperty and defaults to None.
outlineVariantColor
Outline variant color.
outlineVariantColor is an ColorProperty and defaults to None.
shadowColor
Shadow color.
shadowColor is an ColorProperty and defaults to None.
scrimColor
Scrim color.
scrimColor is an ColorProperty and defaults to None.
2.3. Components 35
KivyMD, Release 2.0.1.dev0
disabledTextColor
Disabled text color.
disabledTextColor is an ColorProperty and defaults to None.
transparentColor
Transparent color.
transparentColor is an ColorProperty and defaults to [0, 0, 0, 0].
rippleColor
Ripple color.
rippleColor is an ColorProperty and defaults to ‘#BDBDBD’.
2.3.2 FloatLayout
FloatLayout class equivalent. Simplifies working with some widget properties. For example:
FloatLayout
FloatLayout:
canvas:
Color:
rgba: app.theme_cls.primaryColor
RoundedRectangle:
pos: self.pos
size: self.size
radius: [25, 0, 0, 0]
MDFloatLayout
MDFloatLayout:
radius: [25, 0, 0, 0]
md_bg_color: app.theme_cls.primaryColor
Warning: For a FloatLayout, the minimum_size attributes are always 0, so you cannot use adaptive_size
and related options.
36 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
API - kivymd.uix.floatlayout
2.3.3 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.primaryColor
Rectangle:
pos: self.pos
size: self.size
MDGridLayout
MDGridLayout:
adaptive_height: True
md_bg_color: app.theme_cls.primaryColor
• adaptive_height
• adaptive_width
• adaptive_size
2.3. Components 37
KivyMD, Release 2.0.1.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.gridlayout
2.3.4 RecycleView
38 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
RecycleView
RecycleView:
canvas:
Color:
rgba: app.theme_cls.primaryColor
Rectangle:
pos: self.pos
size: self.size
MDRecycleView
MDRecycleView:
md_bg_color: app.theme_cls.primaryColor
API - kivymd.uix.recycleview
2.3.5 ScrollView
ScrollView
ScrollView:
canvas:
Color:
rgba: app.theme_cls.primaryColor
Rectangle:
pos: self.pos
size: self.size
2.3. Components 39
KivyMD, Release 2.0.1.dev0
MDScrollView
MDScrollView:
md_bg_color: app.theme_cls.primaryColor
import os
import sys
MAIN_KV = '''
MDScreen:
md_bg_color: app.theme_cls.backgroundColor
MDScrollView:
do_scroll_x: False
MDBoxLayout:
id: main_scroll
orientation: "vertical"
adaptive_height: True
MDBoxLayout:
adaptive_height: True
MDLabel:
theme_font_size: "Custom"
text: "OS Info"
font_size: "55sp"
adaptive_height: True
padding: "10dp", "20dp", 0, 0
MDIconButton:
(continues on next page)
40 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
def on_start(self):
info = {
"Name": [
os.name,
(
"microsoft"
if os.name == "nt"
else ("linux" if os.uname()[0] != "Darwin" else "apple")
),
],
"Architecture": [os.uname().machine, "memory"],
"Hostname": [os.uname().nodename, "account"],
"Python Version": ["v" + sys.version, "language-python"],
"Kivy Version": ["v" + kv__version__, "alpha-k-circle-outline"],
"KivyMD Version": ["v" + __version__, "material-design"],
"MaterialYouColor Version": ["v" + mc__version__, "invert-colors"],
"Pillow Version": ["Unknown", "image"],
"Working Directory": [os.getcwd(), "folder"],
"Home Directory": [os.path.expanduser("~"), "folder-account"],
"Environment Variables": [os.environ, "code-json"],
}
try:
from PIL import __version__ as pil__version_
2.3. Components 41
KivyMD, Release 2.0.1.dev0
Example().run()
API - kivymd.uix.scrollview
maximum_velocity = 10000
stretch_intensity = 0.016
exponential_scalar
scroll_friction = 0.015
approx_normailzer = 200000.0
duration_normailzer = 10
scroll_view
scroll_scale
scale_axis = 'y'
last_touch_pos
is_top_or_bottom()
on_value(stencil, scroll_distance)
get_hw()
set_scale_origin()
absorb_impact()
get_component(pos)
42 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
convert_overscroll(touch)
reset_scale(*arg)
2.3.6 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.primaryColor
Rectangle:
pos: self.pos
size: self.size
2.3. Components 43
KivyMD, Release 2.0.1.dev0
MDStackLayout
MDStackLayout:
adaptive_height: True
md_bg_color: app.theme_cls.primaryColor
• 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
44 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
API - kivymd.uix.stacklayout
2.3.7 RelativeLayout
RelativeLayout class equivalent. Simplifies working with some widget properties. For example:
RelativeLayout
RelativeLayout:
canvas:
Color:
rgba: app.theme_cls.primaryColor
RoundedRectangle:
pos: (0, 0)
size: self.size
radius: [25, ]
MDRelativeLayout
MDRelativeLayout:
radius: [25, ]
md_bg_color: app.theme_cls.primaryColor
API - kivymd.uix.relativelayout
2.3. Components 45
KivyMD, Release 2.0.1.dev0
2.3.8 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):
(continues on next page)
46 Chapter 2. Contents
KivyMD, Release 2.0.1.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 47
KivyMD, Release 2.0.1.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(*args)
Called when the screen type changes.
on_size(*args) → None
Called when the application screen size changes.
set_screen() → None
Sets the screen according to the type of application screen size: mobile/tablet or desktop view.
2.3.9 Hero
Use the MDHeroFrom widget to animate a widget from one screen to the next.
48 Chapter 2. Contents
KivyMD, Release 2.0.1.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: "bg.jpg"
size_hint: None, None
size: hero_from.size
MDButton:
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen B"
MDButtonText:
text: "Move Hero To Screen B"
(continues on next page)
2.3. Components 49
KivyMD, Release 2.0.1.dev0
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}
MDButton:
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen A"
MDButtonText:
text: "Move Hero To Screen A"
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().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:
MDButton:
on_release:
root.current_heroes = ["hero"]
root.current = "screen 2"
MDButtonText:
(continues on next page)
50 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
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):
MDButton:
on_release:
root.current_heroes = []
root.current = "another screen"
MDButtonText:
text: "Go To 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: "bg.jpg"
size_hint: None, None
size: hero_from.size
MDButton:
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen B"
MDButtonText:
text: "Move Hero To Screen B"
MDScreen:
(continues on next page)
2.3. Components 51
KivyMD, Release 2.0.1.dev0
MDHeroTo:
id: hero_to
tag: "hero"
size_hint: None, None
size: "220dp", "220dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDButton:
pos_hint: {"center_x": .5}
y: "52dp"
on_release:
root.current_heroes = []
root.current = "screen C"
MDButtonText:
text: "Go To Screen C"
MDButton:
pos_hint: {"center_x": .5}
y: "8dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen A"
MDButtonText:
text: "Move Hero To Screen A"
MDScreen:
name: "screen C"
md_bg_color: "olive"
MDLabel:
text: "Screen C"
halign: "center"
MDButton:
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current = "screen B"
MDButtonText:
text: "Back To Screen B"
'''
class Example(MDApp):
def build(self):
(continues on next page)
52 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
Example().run()
Events
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"
MDButton:
(continues on next page)
2.3. Components 53
KivyMD, Release 2.0.1.dev0
MDButtonText:
text: "Move Hero To 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}
MDButton:
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["hero"]
root.current = "screen A"
MDButtonText:
text: "Move Hero To Screen A"
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
class MyHero(MDHeroFrom):
def on_transform_in(
self, instance_hero_widget: MDRelativeLayout, duration: float
):
'''
Fired when the hero flies from screen **A** to screen **B**.
Animation(
radius=[12, 24, 12, 24],
duration=duration,
(continues on next page)
54 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
def on_transform_out(
self, instance_hero_widget: MDRelativeLayout, duration: float
):
'''Fired 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)
Example().run()
KV = '''
<HeroItem>
size_hint_y: None
height: "200dp"
radius: "24dp"
MDSmartTile:
id: tile
size_hint: None, None
size: root.size
on_release: root.on_release()
MDSmartTileImage:
id: image
source: "bg.jpg"
radius: dp(24)
MDSmartTileOverlayContainer:
id: overlay
md_bg_color: 0, 0, 0, .5
adaptive_height: True
(continues on next page)
2.3. Components 55
KivyMD, Release 2.0.1.dev0
MDLabel:
text: root.tag
theme_text_color: "Custom"
text_color: "white"
adaptive_height: True
MDScreenManager:
md_bg_color: self.theme_cls.backgroundColor
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]
MDHeroTo:
id: hero_to
size_hint: 1, None
height: "220dp"
pos_hint: {"top": 1}
MDButton:
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = [hero_to.tag]
root.current = "screen A"
MDButtonText:
text: "Move Hero To Screen A"
'''
class HeroItem(MDHeroFrom):
text = StringProperty()
manager = ObjectProperty()
56 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
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 Example(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
for i in range(12):
hero_item = HeroItem(
text=f"Item {i + 1}", tag=f"Tag {i}", manager=self.root
)
if not i % 2:
hero_item.md_bg_color = "lightgrey"
self.root.ids.box.add_widget(hero_item)
Example().run()
2.3. Components 57
KivyMD, Release 2.0.1.dev0
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: "avatar.png"
size_hint: None, None
size: hero_kivymd.size
radius: self.height / 2
MDHeroFrom:
id: hero_kivy
tag: "kivy"
size_hint: None, None
size: "200dp", "200dp"
pos_hint: {"top": .98}
x: 324
FitImage:
source: "bg.jpg"
size_hint: None, None
size: hero_kivy.size
radius: self.height / 2
MDButton:
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["kivymd", "kivy"]
root.current = "screen B"
MDButtonText:
text: "Move Hero To Screen B"
MDScreen:
name: "screen B"
(continues on next page)
58 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
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}
MDButton:
pos_hint: {"center_x": .5}
y: "36dp"
on_release:
root.current_heroes = ["kivy", "kivymd"]
root.current = "screen A"
MDButtonText:
text: "Move Hero To Screen A"
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
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
Fired when the hero back from screen B to screen A.
tag
Tag ID for heroes.
tag is an StringProperty and defaults to ‘’.
2.3. Components 59
KivyMD, Release 2.0.1.dev0
on_transform_in(*args)
Fired when the hero flies from screen A to screen B.
on_transform_out(*args)
Fired 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.10 AnchorLayout
AnchorLayout
AnchorLayout:
canvas:
Color:
rgba: app.theme_cls.primaryColor
Rectangle:
pos: self.pos
size: self.size
MDAnchorLayout
MDAnchorLayout:
md_bg_color: app.theme_cls.primaryColor
API - kivymd.uix.anchorlayout
60 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
2.3.11 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.primaryColor
Rectangle:
pos: self.pos
size: self.size
MDRecycleGridLayout
MDRecycleGridLayout:
adaptive_height: True
md_bg_color: app.theme_cls.primaryColor
• 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 2.0.1.dev0
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.12 ScreenManager
Transition
62 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
API - kivymd.uix.screenmanager
2.3.13 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.primaryColor
RoundedRectangle:
pos: self.pos
size: self.size
radius: [self.height / 2,]
2.3. Components 63
KivyMD, Release 2.0.1.dev0
MDWidget
MDWidget:
size_hint: .5, None
height: self.width
radius: self.height / 2
md_bg_color: app.theme_cls.primaryColor
API - kivymd.uix.widget
2.3.14 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.primaryColor
Rectangle:
pos: self.pos
size: self.size
MDBoxLayout
MDBoxLayout:
adaptive_height: True
md_bg_color: app.theme_cls.primaryColor
64 Chapter 2. Contents
KivyMD, Release 2.0.1.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
height: self.minimum_width
adaptive_size
adaptive_size: True
Equivalent
API - kivymd.uix.boxlayout
2.3. Components 65
KivyMD, Release 2.0.1.dev0
2.3.15 Screen
Screen class equivalent. Simplifies working with some widget properties. For example:
Screen
Screen:
canvas:
Color:
rgba: app.theme_cls.primaryColor
RoundedRectangle:
pos: self.pos
size: self.size
radius: [25, 0, 0, 0]
MDScreen
MDScreen:
radius: [25, 0, 0, 0]
md_bg_color: self.theme_cls.primaryColor
API - kivymd.uix.screen
66 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
2.3.16 CircularLayout
MDCircularLayout
Usage
KV = '''
MDScreen:
MDCircularLayout:
id: container
pos_hint: {"center_x": .5, "center_y": .5}
row_spacing: min(self.size) * 0.1
'''
class Example(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}")
Example().run()
API - kivymd.uix.circularlayout
class kivymd.uix.circularlayout.MDCircularLayout(**kwargs)
Float layout class. See module documentation for more information.
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.
2.3. Components 67
KivyMD, Release 2.0.1.dev0
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(pos: tuple) → float
Returns the angle of given pos.
remove_widget(widget, **kwargs)
Remove a widget from the children of this widget.
Parameters
widget: Widget
Widget to remove from our children list.
do_layout(*largs, **kwargs)
This function is called when a layout is called by a trigger. If you are writing a new Layout subclass, don’t
call this function directly but use _trigger_layout() instead.
The function is by default called before the next frame, therefore the layout isn’t updated immediately.
Anything depending on the positions of e.g. children should be scheduled for the next frame.
Added in version 1.0.8.
68 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
2.3.17 Button
See also:
Material Design spec, Buttons
Buttons allow users to take actions, and make choices, with a single tap. When choosing the right
button for an action, consider the level of emphasis each button type provides.
1. Elevated button
2. Filled button
3. Filled tonal button
4. Outlined button
5. Text button
6. Icon button
7. Segmented button
2.3. Components 69
KivyMD, Release 2.0.1.dev0
Common buttons
Buttons help people take action, such as sending an email, sharing a document, or liking a comment.
1. Elevated button
2. Filled button
3. Filled tonal button
4. Outlined button
5. Text button
Elevated Filled Tonal Outlined Text
Elevated
Declarative KV style
KV = '''
MDScreen:
md_bg_color: app.theme_cls.surfaceColor
MDButton:
style: "elevated"
pos_hint: {"center_x": .5, "center_y": .5}
MDButtonIcon:
icon: "plus"
MDButtonText:
text: "Elevated"
'''
(continues on next page)
70 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
return (
MDScreen(
MDButton(
MDButtonIcon(
icon="plus",
),
MDButtonText(
text="Elevated",
),
style="elevated",
pos_hint={"center_x": 0.5, "center_y": 0.5},
),
md_bg_color=self.theme_cls.surfaceColor,
)
)
Example().run()
MDButton:
style: "elevated"
text: "Elevated"
2.3. Components 71
KivyMD, Release 2.0.1.dev0
Filled
MDButton:
style: "filled"
MDButtonText:
text: "Filled"
Tonal
MDButton:
style: "tonal"
MDButtonText:
text: "Tonal"
Outlined
MDButton:
style: "outlined"
MDButtonText:
text: "Outlined"
72 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
Text
MDButton:
style: "text"
MDButtonText:
text: "Text"
Customization of buttons
MDButton:
style: "tonal"
theme_width: "Custom"
height: "56dp"
size_hint_x: .5
MDButtonIcon:
x: text.x - (self.width + dp(10))
icon: "plus"
MDButtonText:
id: text
text: "Tonal"
pos_hint: {"center_x": .5, "center_y": .5}
MDButton:
style: "filled"
MDButtonIcon:
icon: "plus"
MDButtonText:
(continues on next page)
2.3. Components 73
KivyMD, Release 2.0.1.dev0
MDButton:
style: "elevated"
MDButtonText:
text: "Elevated"
theme_font_name: "Custom"
font_name: "path/to/font.ttf"
MDButton:
style: "elevated"
theme_shadow_color: "Custom"
shadow_color: "red"
MDButtonIcon:
icon: "plus"
theme_icon_color: "Custom"
icon_color: "green"
(continues on next page)
74 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
MDButtonText:
text: "Elevated"
theme_text_color: "Custom"
text_color: "red"
Icon buttons
Use icon buttons when a compact button is required, such as in a toolbar or image list. There are
two types of icon buttons: standard and contained.
See also:
Material Design spec, Icon buttons
2.3. Components 75
KivyMD, Release 2.0.1.dev0
StandardIcon
MDIconButton:
icon: "heart-outline"
style: "standard"
FilledIcon
MDIconButton:
icon: "heart-outline"
style: "filled"
TonalIcon
MDIconButton:
icon: "heart-outline"
style: "tonal"
OutlinedIcon
MDIconButton:
icon: "heart-outline"
style: "outlined"
MDIconButton:
icon: "heart-outline"
style: "tonal"
theme_font_size: "Custom"
font_size: "48sp"
radius: [self.height / 2, ]
size_hint: None, None
size: "84dp", "84dp"
76 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
MDIconButton:
icon: "heart-outline"
style: "tonal"
theme_bg_color: "Custom"
md_bg_color: "brown"
theme_icon_color: "Custom"
icon_color: "white"
2.3. Components 77
KivyMD, Release 2.0.1.dev0
FAB buttons
The FAB represents the most important action on a screen. It puts key actions within reach.
See also:
Material Design spec, FAB buttons
1. Standard FAB
2. Small FAB
3. Large FAB
There are three sizes of floating action buttons: FAB, small FAB, and large FAB:
Standard Small Large
Standard
MDFabButton:
icon: "pencil-outline"
style: "standard"
Small
MDFabButton:
icon: "pencil-outline"
style: "small"
78 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
Large
MDFabButton:
icon: "pencil-outline"
style: "large"
FABs can use other combinations of container and icon colors. The color mappings below provide the same legibility
and functionality as the default, so the color mapping you use depends on style alone.
1. Surface
2. Secondary
3. Tertiary
2.3. Components 79
KivyMD, Release 2.0.1.dev0
MDBoxLayout:
id: box
adaptive_size: True
spacing: "32dp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
return Builder.load_string(KV)
def on_start(self):
styles = {
"standard": "surface",
"small": "secondary",
"large": "tertiary",
}
for style in styles.keys():
self.root.ids.box.add_widget(
MDFabButton(
style=style, icon="pencil-outline", color_map=styles[style]
)
)
Example().run()
80 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
Extended FAB
Extended floating action buttons (extended FABs) help people take primary actions. They’re wider
than FABs to accommodate a text label and larger target area.
See also:
Material Design spec, FAB extended buttons
With icon
KV = '''
MDScreen:
md_bg_color: app.theme_cls.surfaceColor
on_touch_down:
if not btn.collide_point(*args[1].pos): \
btn.fab_state = "expand" \
if btn.fab_state == "collapse" else "collapse"
MDExtendedFabButton:
id: btn
pos_hint: {"center_x": .5, "center_y": .5}
MDExtendedFabButtonIcon:
icon: "pencil-outline"
MDExtendedFabButtonText:
text: "Compose"
'''
class Example(MDApp):
def build(self):
(continues on next page)
2.3. Components 81
KivyMD, Release 2.0.1.dev0
Example().run()
Without icon
MDExtendedFabButton:
fab_state: "expand"
MDExtendedFabButtonText:
text: "Compose"
API break
1.2.0 version
MDFloatingActionButton:
icon: "plus"
MDRoundFlatButton:
text: "Outlined"
MDRoundFlatIconButton:
text: "Outlined with icon"
icon: "plus"
MDFillRoundFlatButton
text: "Filled"
82 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
MDFillRoundFlatIconButton
text: "Filled with icon"
icon: "plus"
2.0.0 version
MDFabButton:
icon: "plus"
MDButton:
style: "outlined"
MDButtonText:
text: "Outlined"
MDButton:
style: "outlined"
MDButtonIcon:
icon: "plus"
MDButtonText:
text: "Outlined with icon"
MDButton:
style: "filled"
MDButtonText:
text: "Filled"
MDButton:
style: "filled"
MDButtonIcon:
icon: "plus"
MDButtonText:
text: "Filled"
2.3. Components 83
KivyMD, Release 2.0.1.dev0
API - kivymd.uix.button.button
class kivymd.uix.button.button.BaseFabButton
Implements the basic properties for the MDExtendedFabButton and MDFabButton classes.
Added in version 2.0.0.
elevation_levels
Elevation is measured as the distance between components along the z-axis in density-independent pixels
(dps).
Added in version 1.2.0.
elevation_levels is an DictProperty and defaults to {0: dp(0), 1: dp(4), 2: dp(8), 3: dp(12), 4:
dp(16), 5: dp(18)}.
color_map
Additional color mappings.
Available options are: ‘surface’, ‘secondary’, ‘tertiary’.
color_map is an OptionProperty and defaults to ‘secondary’.
icon_color_disabled
The icon color in (r, g, b, a) or string format of the list item when the widget item is disabled.
icon_color_disabled is a ColorProperty and defaults to None.
style
Button type.
Available options are: ‘standard’, ‘small’, ‘large’.
style is an OptionProperty and defaults to ‘standard’.
fab_state
The state of the button.
Available options are: ‘collapse’ or ‘expand’.
fab_state is an OptionProperty and defaults to “collapse”.
md_bg_color_disabled
The background color in (r, g, b, a) or string format of the list item when the list button is disabled.
md_bg_color_disabled is a ColorProperty and defaults to None.
radius
Canvas radius.
radius is an VariableListProperty and defaults to [dp(16), dp(16), dp(16), dp(16)].
class kivymd.uix.button.button.BaseButton(*args, **kwargs)
Base button class.
For more information, see in the DeclarativeBehavior and BackgroundColorBehavior and
RectangularRippleBehavior and ButtonBehavior and ThemableBehavior and StateLayerBehavior
classes documentation.
84 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
elevation_levels
Elevation is measured as the distance between components along the z-axis in density-independent pixels
(dps).
Added in version 1.2.0.
elevation_levels is an DictProperty and defaults to {0: dp(0), 1: dp(4), 2: dp(8), 3: dp(12), 4:
dp(16), 5: dp(18)}.
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.
shadow_radius
Button shadow radius.
shadow_radius is an VariableListProperty and defaults to [0, 0, 0, 0].
md_bg_color
Button background color in (r, g, b, a) or string format.
md_bg_color is a ColorProperty and defaults to None.
line_color
Outlined color.
line_color is a ColorProperty and defaults to None.
line_width
Line width for button border.
line_width is a NumericProperty and defaults to 1.
on_press(*args) → None
Fired when the button is pressed.
on_release(*args) → None
Fired when the button is released (i.e. the touch/click that pressed the button goes away).
class kivymd.uix.button.button.MDButton(*args, **kwargs)
Base class for all buttons.
Added in version 2.2.0.
For more information, see in the CommonElevationBehavior and BaseButton and RelativeLayout classes
documentation.
style
Button type.
Available options are: ‘filled’, ‘elevated’, ‘outlined’, ‘tonal’, ‘text’.
style is an OptionProperty and defaults to ‘elevated’.
radius
Button radius.
radius is an VariableListProperty and defaults to [dp(20), dp(20), dp(20), dp(20)].
adjust_pos(*args) → None
Adjusts the pos of the button according to the content.
2.3. Components 85
KivyMD, Release 2.0.1.dev0
adjust_width(*args) → None
Adjusts the width of the button according to the content.
add_widget(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.
Added 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.
Added in version 1.9.0.
set_properties_widget() → None
Fired on_release/on_press/on_enter/on_leave events.
class kivymd.uix.button.button.MDButtonText(*args, **kwargs)
The class implements the text for the MDButton class.
For more information, see in the MDLabel class documentation.
class kivymd.uix.button.button.MDButtonIcon(*args, **kwargs)
The class implements an icon for the MDButton class.
For more information, see in the MDIcon class documentation.
class kivymd.uix.button.button.MDIconButton(**kwargs)
Base class for icon buttons.
For more information, see in the RectangularRippleBehavior and ButtonBehavior and MDIcon classes
documentation.
style
Button type.
Added in version 2.0.0.
Available options are: ‘standard’, ‘filled’, ‘tonal’, ‘outlined’.
style is an OptionProperty and defaults to ‘standard’.
86 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
md_bg_color_disabled
The background color in (r, g, b, a) or string format of the list item when the list button is disabled.
md_bg_color_disabled is a ColorProperty and defaults to None.
on_line_color(instance, value) → None
Fired when the values of line_color change.
class kivymd.uix.button.button.MDFabButton(**kwargs)
Base class for FAB buttons.
For more information, see in the BaseFabButton and CommonElevationBehavior and
RectangularRippleBehavior and ButtonBehavior and MDIcon classes documentation.
on_press(*args) → None
Fired when the button is pressed.
on_release(*args) → None
Fired when the button is released (i.e. the touch/click that pressed the button goes away).
set_properties_widget() → None
Fired on_release/on_press/on_enter/on_leave events.
class kivymd.uix.button.button.MDExtendedFabButtonIcon(*args, **kwargs)
Implements an icon for the MDExtendedFabButton class.
Added in version 2.0.0.
class kivymd.uix.button.button.MDExtendedFabButtonText(*args, **kwargs)
Implements the text for the class MDExtendedFabButton class.
Added in version 2.0.0.
class kivymd.uix.button.button.MDExtendedFabButton(*args, **kwargs)
Base class for Extended FAB buttons.
Added in version 2.0.0.
For more information, see in the DeclarativeBehavior and ThemableBehavior and
MotionExtendedFabButtonBehavior and CommonElevationBehavior and StateLayerBehavior
and BaseFabButton and ButtonBehavior and RelativeLayout classes documentation.
Events
on_collapse
Fired when the button is collapsed.
on_expand
Fired when the button is expanded.
elevation_levels
Elevation is measured as the distance between components along the z-axis in density-independent pixels
(dps).
Added in version 1.2.0.
elevation_levels is an DictProperty and defaults to {0: dp(0), 1: dp(4), 2: dp(8), 3: dp(12), 4:
dp(16), 5: dp(18)}.
2.3. Components 87
KivyMD, Release 2.0.1.dev0
on_collapse(*args)
Fired when the button is collapsed.
on_expand(*args)
Fired when the button is expanded.
on_fab_state(instance, state: str) → None
Fired when the fab_state value changes.
on__x(instance, value) → None
2.3.18 NavigationDrawer
See also:
Material Design, Navigation drawer
88 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
• Use navigation drawers in expanded layouts and modal navigation drawers in compact and medium layouts
• Can be open or closed by default
• Two types: standard and modal
When using the class MDNavigationDrawer skeleton of your KV markup should look like this:
Usage
Root:
MDNavigationLayout:
MDScreenManager:
Screen_1:
Screen_2:
MDNavigationDrawer:
A simple example
Declarative KV styles
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
2.3. Components 89
KivyMD, Release 2.0.1.dev0
MDScreenManager:
MDScreen:
MDButton:
pos_hint: {"center_x": .5, "center_y": .5}
on_release: nav_drawer.set_state("toggle")
MDButtonText:
text: "Open Drawer"
MDNavigationDrawer:
id: nav_drawer
radius: 0, dp(16), dp(16), 0
MDNavigationDrawerMenu:
MDNavigationDrawerLabel:
text: "Mail"
MDNavigationDrawerItem:
MDNavigationDrawerItemLeadingIcon:
icon: "account"
MDNavigationDrawerItemText:
text: "Inbox"
MDNavigationDrawerItemTrailingText:
text: "24"
MDNavigationDrawerDivider:
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
90 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
class Example(MDApp):
def build(self):
return MDScreen(
MDNavigationLayout(
MDScreenManager(
MDScreen(
MDButton(
MDButtonText(
text="Open Drawer",
),
on_release=lambda x: self.root.get_ids().nav_drawer.set_
˓→state(
"toggle"
),
pos_hint={"center_x": 0.5, "center_y": 0.5},
),
),
),
MDNavigationDrawer(
MDNavigationDrawerMenu(
MDNavigationDrawerLabel(
text="Mail",
),
MDNavigationDrawerItem(
MDNavigationDrawerItemLeadingIcon(
icon="account",
),
MDNavigationDrawerItemText(
text="Inbox",
),
MDNavigationDrawerItemTrailingText(
text="24",
),
),
MDNavigationDrawerDivider(
),
),
id="nav_drawer",
radius=(0, dp(16), dp(16), 0),
(continues on next page)
2.3. Components 91
KivyMD, Release 2.0.1.dev0
Example().run()
Anatomy
92 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
Item anatomy
MDNavigationDrawerItem:
MDNavigationDrawerItemLeadingIcon:
icon: "account"
MDNavigationDrawerItemText:
text: "Inbox"
MDNavigationDrawerItemTrailingText:
text: "24"
Type drawer
Standard
MDNavigationDrawer:
drawer_type: "standard"
Modal
MDNavigationDrawer:
drawer_type: "modal"
MDNavigationDrawer:
anchor: "left"
2.3. Components 93
KivyMD, Release 2.0.1.dev0
MDNavigationDrawer:
anchor: "right"
94 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
API break
1.2.0 version
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
2.3. Components 95
KivyMD, Release 2.0.1.dev0
MDScreen:
MDNavigationLayout:
MDScreenManager:
MDScreen:
MDRaisedButton:
text: "Open Drawer"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: nav_drawer.set_state("toggle")
MDNavigationDrawer:
id: nav_drawer
radius: (0, dp(16), dp(16), 0)
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"
(continues on next page)
96 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
2.2.0 version
KV = '''
<DrawerItem>
active_indicator_color: "#e7e4c0"
MDNavigationDrawerItemLeadingIcon:
icon: root.icon
theme_icon_color: "Custom"
icon_color: "#4a4939"
MDNavigationDrawerItemText:
text: root.text
theme_text_color: "Custom"
text_color: "#4a4939"
<DrawerLabel>
adaptive_height: True
padding: "18dp", 0, 0, "12dp"
MDNavigationDrawerItemLeadingIcon:
icon: root.icon
theme_icon_color: "Custom"
icon_color: "#4a4939"
pos_hint: {"center_y": .5}
MDNavigationDrawerLabel:
text: root.text
theme_text_color: "Custom"
text_color: "#4a4939"
(continues on next page)
2.3. Components 97
KivyMD, Release 2.0.1.dev0
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDNavigationLayout:
MDScreenManager:
MDScreen:
MDButton:
pos_hint: {"center_x": .5, "center_y": .5}
on_release: nav_drawer.set_state("toggle")
MDButtonText:
text: "Open Drawer"
MDNavigationDrawer:
id: nav_drawer
radius: 0, dp(16), dp(16), 0
MDNavigationDrawerMenu:
MDNavigationDrawerHeader:
orientation: "vertical"
padding: 0, 0, 0, "12dp"
adaptive_height: True
MDLabel:
text: "Header title"
theme_text_color: "Custom"
theme_line_height: "Custom"
line_height: 0
text_color: "#4a4939"
adaptive_height: True
padding_x: "16dp"
font_style: "Display"
role: "small"
MDLabel:
text: "Header text"
padding_x: "18dp"
adaptive_height: True
font_style: "Title"
role: "large"
MDNavigationDrawerDivider:
(continues on next page)
98 Chapter 2. Contents
KivyMD, Release 2.0.1.dev0
DrawerItem:
icon: "gmail"
text: "Inbox"
trailing_text: "+99"
trailing_text_color: "#4a4939"
DrawerItem:
icon: "send"
text: "Outbox"
MDNavigationDrawerDivider:
MDNavigationDrawerLabel:
text: "Labels"
padding_y: "12dp"
DrawerLabel:
icon: "information-outline"
text: "Label"
DrawerLabel:
icon: "information-outline"
text: "Label"
'''
class DrawerLabel(MDBoxLayout):
icon = StringProperty()
text = StringProperty()
class DrawerItem(MDNavigationDrawerItem):
icon = StringProperty()
text = StringProperty()
trailing_text = StringProperty()
trailing_text_color = ColorProperty()
_trailing_text_obj = None
2.3. Components 99
KivyMD, Release 2.0.1.dev0
Example().run()
API - kivymd.uix.navigationdrawer.navigationdrawer
class kivymd.uix.navigationdrawer.navigationdrawer.BaseNavigationDrawerItem
Implement the base class for the menu list item.
Added in version 2.0.0.
selected
Is the item selected.
selected is a BooleanProperty and defaults to False.
class kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationLayout(*args, **kwargs)
For more information, see in the DeclarativeBehavior and FloatLayout classes documentation.
update_pos(instance_navigation_drawer, pos_x: float) → None
on_release(*args) → None
Fired when the item is released (i.e. the touch/click that pressed the item goes away).
class kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawerItemLeadingIcon(*args,
**kwargs)
Implements the leading icon for the menu list item.
For more information, see in the MDListItemLeadingIcon and BaseNavigationDrawerItem classes docu-
mentation.
Added in version 2.0.0.
class kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawerItemText(*args,
**kwargs)
Implements the text for the menu list item.
MDNavigationDrawer:
MDNavigationDrawerMenu:
spacing
Spacing between children, in pixels.
spacing is a NumericProperty and defaults to 0.
add_widget(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.
Added 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.
Added in version 1.9.0.
MDNavigationDrawer:
padding: "56dp"
swipe_distance
The distance of the swipe with which the movement of navigation drawer begins.
swipe_distance is a NumericProperty and defaults to 10.
swipe_edge_width
The size of the area in px inside which should start swipe to drag navigation drawer.
swipe_edge_width is a NumericProperty and defaults to 20.
scrim_alpha_transition
The name of the animation transition type to use for changing scrim_alpha.
scrim_alpha_transition is a StringProperty and defaults to ‘linear’.
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.
background_color
The drawer background color in (r, g, b, a) or string format.
Added in version 2.0.0.
background_color is a ColorProperty and defaults to None.
theme_elevation_level = 'Custom'
Drawer elevation level scheme name.
Added in version 2.0.0.
Available options are: ‘Primary’, ‘Custom’.
theme_elevation_level is an OptionProperty and defaults to ‘Custom’.
elevation_level = 1
Drawer elevation level (values from 0 to 5)
Added in version 2.2.0.
elevation_level is an BoundedNumericProperty and defaults to 2.
set_properties_widget() → None
Fired on_release/on_press/on_enter/on_leave events.
set_state(new_state='toggle', animation=True) → None
Change state of the side panel. New_state can be one of “toggle”, “open” or “close”.
update_status(*args) → None
on_touch_down(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(touch)
Receive a touch move event. The touch is in parent coordinates.
See on_touch_down() for more information.
on_touch_up(touch)
Receive a touch up event. The touch is in parent coordinates.
See on_touch_down() for more information.
on_radius(instance_navigation_drawer, radius_value: list) → None
Fired when the radius value changes.
on_drawer_type(instance_navigation_drawer, drawer_type: str) → None
Fired when the drawer_type value changes.
on_open(*args) → None
Fired when the navigation drawer is opened.
on_close(*args) → None
Fired when the navigation drawer is closed.
2.3.19 ExpansionPanel
Expansion panels contain creation flows and allow lightweight editing of an element.
Usage
MDExpansionPanel:
MDExpansionPanelHeader:
# Content of header.
[...]
MDExpansionPanelContent:
# Content of panel.
[...]
Anatomy
Example
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDExpansionPanel:
id: panel
pos_hint: {"center_x": .5, "center_y": .5}
MDExpansionPanelHeader:
MDListItem:
theme_bg_color: "Custom"
(continues on next page)
MDListItemSupportingText:
text: "Supporting text"
TrailingPressedIconButton:
id: chevron
icon: "chevron-right"
on_release: app.tap_expansion_chevron(panel, chevron)
MDExpansionPanelContent:
orientation: "vertical"
padding: "12dp", 0, "12dp", 0
MDLabel:
text: "Channel information"
adaptive_height: True
padding_x: "16dp"
padding_y: "12dp"
MDListItem:
MDListItemLeadingIcon:
icon: "email"
MDListItemHeadlineText:
text: "Email"
MDListItemSupportingText:
text: "[email protected]"
MDListItem:
MDListItemLeadingIcon:
icon: "instagram"
MDListItemHeadlineText:
text: "Instagram"
MDListItemSupportingText:
text: "Account"
MDListItemTertiaryText:
text: "www.instagram.com/KivyMD"
'''
class TrailingPressedIconButton(
ButtonBehavior, RotateBehavior, MDListItemTrailingIcon
):
...
(continues on next page)
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def tap_expansion_chevron(
self, panel: MDExpansionPanel, chevron: TrailingPressedIconButton
):
panel.open() if not panel.is_open else panel.close()
panel.set_chevron_down(
chevron
) if not panel.is_open else panel.set_chevron_up(chevron)
Example().run()
import asynckivy
from kivy.animation import Animation
from kivy.lang import Builder
from kivy.metrics import dp
from kivy.uix.behaviors import ButtonBehavior
KV = '''
<ExpansionPanelItem>
MDExpansionPanelHeader:
MDListItem:
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.surfaceContainerLowColor
ripple_effect: False
MDListItemSupportingText:
text: "Supporting text"
TrailingPressedIconButton:
id: chevron
icon: "chevron-right"
on_release: app.tap_expansion_chevron(root, chevron)
MDLabel:
text: "Channel information"
adaptive_height: True
padding_x: "16dp"
padding_y: "12dp"
MDListItem:
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.surfaceContainerLowestColor
MDListItemLeadingIcon:
icon: "email"
MDListItemHeadlineText:
text: "Email"
MDListItemSupportingText:
text: "[email protected]"
MDListItem:
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.surfaceContainerLowestColor
MDListItemLeadingIcon:
icon: "instagram"
MDListItemHeadlineText:
text: "Instagram"
MDListItemSupportingText:
text: "Account"
MDListItemTertiaryText:
text: "www.instagram.com/KivyMD"
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
ScrollView:
size_hint_x: .5
pos_hint: {"center_x": .5, "center_y": .5}
MDList:
id: container
'''
class ExpansionPanelItem(MDExpansionPanel):
...
class TrailingPressedIconButton(
ButtonBehavior, RotateBehavior, MDListItemTrailingIcon
):
...
class Example(MDApp):
def on_start(self):
async def set_panel_list():
for i in range(12):
await asynckivy.sleep(0)
self.root.ids.container.add_widget(ExpansionPanelItem())
asynckivy.start(set_panel_list())
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def tap_expansion_chevron(
self, panel: MDExpansionPanel, chevron: TrailingPressedIconButton
):
Animation(
padding=[0, dp(12), 0, dp(12)]
if not panel.is_open
else [0, 0, 0, 0],
d=0.2,
).start(panel)
panel.open() if not panel.is_open else panel.close()
panel.set_chevron_down(
chevron
) if not panel.is_open else panel.set_chevron_up(chevron)
Example().run()
API break
1.2.0 version
MDExpansionPanel(
icon="icon.png",
content=Content(), # content of panel
panel_cls=MDExpansionPanelThreeLine( # content of header
text="Text",
secondary_text="Secondary text",
tertiary_text="Tertiary text",
)
)
2.0.0 version
MDExpansionPanel:
MDExpansionPanelHeader:
# Content of header.
[...]
MDExpansionPanelContent:
# Content of panel.
[...]
API - kivymd.uix.expansionpanel.expansionpanel
on_close
Fired when a panel is closed.
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.
is_open
The panel is open or closed.
Added in version 2.0.0.
is_open is a BooleanProperty and defaults to False.
on_open(*args) → None
Fired when a panel is opened.
on_close(*args) → None
Fired when a panel is closed.
set_chevron_down(instance) → None
Sets the chevron down.
set_chevron_up(instance) → None
Sets the chevron up.
close(*args) → None
Method closes the panel.
Changed in version 2.0.0: Rename from close_panel to close method.
open(*args) → None
Method opens a panel.
Changed in version 2.0.0: Rename from open_panel to open method.
add_widget(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.
2.3.20 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 menu_open(self):
menu_items = [
{
"text": f"Item {i}",
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
MDDropdownMenu(
caller=self.root.ids.button, items=menu_items
).open()
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Test().run()
Anatomy
• leading_icon
• text
• trailing_icon
• trailing_text
. . . to create the necessary types of menu items:
menu_items = [
{
"text": "Strikethrough",
"leading_icon": "check",
"trailing_icon": "apple-keyboard-command",
"trailing_text": "+Shift+X",
}
]
menu_items = [
{
"text": "Strikethrough",
"trailing_icon": "apple-keyboard-command",
"trailing_text": "+Shift+X",
}
]
menu_items = [
{
(continues on next page)
menu_items = [
{
"text": "Strikethrough",
"trailing_text": "Shift+X",
}
]
menu_items = [
{
"text": "Strikethrough",
"leading_icon": "check",
"trailing_icon": "apple-keyboard-command",
}
]
menu_items = [
{
"text": "Strikethrough",
"leading_icon": "check",
}
]
menu_items = [
{
"text": "Strikethrough",
"leading_icon": "check",
"trailing_text": "Shift+X",
}
]
menu_items = [
{
"text": "Strikethrough",
}
]
You can use the following parameters to customize the menu items:
• text_color
• leading_icon_color
• trailing_icon_color
• trailing_text_color
menu_items = [
{
"text": "Strikethrough",
"leading_icon": "check",
"trailing_icon": "apple-keyboard-command",
"trailing_text": "+Shift+X",
"leading_icon_color": "orange",
"trailing_icon_color": "green",
(continues on next page)
Header
KV = '''
<MenuHeader>
spacing: "12dp"
padding: "4dp"
adaptive_height: True
MDIconButton:
icon: "gesture-tap-button"
pos_hint: {"center_y": .5}
MDLabel:
text: "Actions"
adaptive_size: True
pos_hint: {"center_y": .5}
MDScreen:
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.'''
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
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). This example uses drop down menus for both the righthand and lefthand menus.
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "MDTopAppBar"
left_action_items: [["menu", lambda x: app.callback(x)]]
right_action_items: [["dots-vertical", lambda x: app.callback(x)]]
MDLabel:
text: "Content"
halign: "center"
'''
class Test(MDApp):
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
menu_items = [
{
"text": f"Item {i}",
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(items=menu_items)
return Builder.load_string(KV)
Test().run()
Position
Bottom position
See also:
position
from kivy.lang import Builder
from kivy.metrics import dp
KV = '''
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 Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"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,
(continues on next page)
def build(self):
self.theme_cls.primary_palette = "Orange"
self.theme_cls.theme_style = "Dark"
return self.screen
Test().run()
Center position
KV = '''
MDScreen
md_bg_color: self.theme_cls.backgroundColor
MDDropDownItem:
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.open_drop_item_menu(self)
def build(self):
return Builder.load_string(KV)
Example().run()
API break
1.1.1 version
KV = '''
<RightContentCls>
disabled: True
adaptive_size: True
(continues on next page)
MDIconButton:
icon: root.icon
icon_size: "16sp"
md_bg_color_disabled: 0, 0, 0, 0
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 = [
{
(continues on next page)
def build(self):
return self.screen
Test().run()
1.2.0 version
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 = [
{
(continues on next page)
def build(self):
return self.screen
Test().run()
API - kivymd.uix.menu.menu
class kivymd.uix.menu.menu.BaseDropdownItem(**kwargs)
Base class for menu items.
Added in version 1.2.0.
For more information, see in the RectangularRippleBehavior and MDBoxLayout classes.
text
The text of the menu item.
text is a StringProperty and defaults to ‘’.
leading_icon
The leading icon of the menu item.
leading_icon is a StringProperty and defaults to ‘’.
trailing_icon
The trailing icon of the menu item.
trailing_icon is a StringProperty and defaults to ‘’.
trailing_text
The trailing text of the menu item.
trailing_text is a StringProperty and defaults to ‘’.
text_color
The color of the text in (r, g, b, a) or string format for the text of the menu item.
class kivymd.uix.menu.menu.MDDropdownLeadingIconTrailingTextItem(**kwargs)
Implements a menu item with text, leading icon and with trailing text.
Added in version 1.2.0.
For more information, see in the BaseDropdownItem class.
class kivymd.uix.menu.menu.MDDropdownLeadingTrailingIconTextItem(**kwargs)
Implements a menu item with text, with leading icon, with trailing icon and with trailing text.
Added in version 1.2.0.
For more information, see in the BaseDropdownItem class.
class kivymd.uix.menu.menu.MDDropdownMenu(**kwargs)
Dropdown menu class.
For more information, see in the MotionDropDownMenuBehavior and StencilBehavior and MDCard 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.
Added in version 0.104.2.
See Header for more information.
header_cls is a ObjectProperty and defaults to None.
items
List of dictionaries with properties for menu items.
items is a ListProperty and defaults to [].
width_mult
This number multiplied by the standard increment (‘56dp’ on mobile, ‘64dp’ on desktop), determines the
width of the menu items.
If the resulting number were to be too big for the application Window, the multiplier will be adjusted for
the biggest possible one.
Deprecated since version 1.2.0: Use width instead.
self.menu = MDDropdownMenu(
width=dp(240),
...,
)
max_height
The menu will grow no bigger than this number. Set to 0 for no limit.
max_height is a NumericProperty and defaults to 0.
border_margin
Margin between Window border and menu.
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",
...,
)
check_hor_growth() → None
Checks whether the width of the left/right menu borders exceeds the boundaries of the parent window.
get_target_pos() → [float, float]
set_target_height() → None
Set the target height of the menu depending on the size of each item.
set_menu_properties(*args) → None
Sets the size and position for the menu window.
set_menu_pos(*args) → None
adjust_position() → str
Return value ‘auto’ for the menu position if the menu position is out of screen.
open() → None
Animate the opening of a menu window.
on_items(instance, value: list) → None
The method sets the class that will be used to create the menu item.
on_header_cls(instance_dropdown_menu, instance_user_menu_header) → None
Called when a value is set to the header_cls parameter.
on_touch_down(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(touch)
Receive a touch move event. The touch is in parent coordinates.
See on_touch_down() for more information.
on_touch_up(touch)
Receive a touch up event. The touch is in parent coordinates.
See on_touch_down() for more information.
dismiss(*args) → None
Closes the menu.
2.3.21 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,
(continues on next page)
Warning: The preview mode is intended only for viewing images and will not display other types of files.
Example
import os
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.file_manager_open()
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"
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()
MDSnackbar(
MDSnackbarText(
text=path,
),
y=dp(24),
pos_hint={"center_x": 0.5},
size_hint_x=0.8,
).open()
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
on_dismiss:
Called when the MDFileManager is closed.
icon
Icon that will be used on the directory selection button.
Deprecated since version 1.1.0: Use icon_selection_button instead.
icon is an StringProperty and defaults to check.
icon_selection_button
Icon that will be used on the directory selection button.
Added in version 1.1.0.
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.
Added in version 1.1.0.
selection_button is a read-only ObjectProperty and defaults to None.
show_disks() → None
2.3.22 List
See also:
Material Design spec, Lists
• Use lists to help users find a specific item and act on it;
• Order list items in logical ways (like alphabetical or numerical);
• Three sizes: one-line, two-line, and three-line;
• Keep items short and easy to scan;
• Show icons, text, and actions in a consistent format;
Usage
MDListItem:
MDListItemLeadingIcon: # MDListItemLeadingAvatar
MDListItemHeadlineText:
MDListItemSupportingText:
MDListItemTertiaryText:
MDListItemTrailingIcon: # MDListItemTrailingCheckbox
Anatomy
Example:
Declarative KV styles
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDListItem:
pos_hint: {"center_x": .5, "center_y": .5}
size_hint_x: .8
MDListItemHeadlineText:
text: "Headline"
'''
class Example(MDApp):
(continues on next page)
Example().run()
class Example(MDApp):
def build(self):
return (
MDScreen(
MDListItem(
MDListItemHeadlineText(
text="Headline",
),
pos_hint={"center_x": .5, "center_y": .5},
size_hint_x=0.8,
),
md_bg_color=self.theme_cls.backgroundColor,
)
)
Example().run()
Declarative KV styles
MDListItem:
MDListItemHeadlineText:
text: "Headline"
MDListItemSupportingText:
text: "Supporting text"
Declarative KV styles
MDListItem:
MDListItemHeadlineText:
text: "Headline"
MDListItemSupportingText:
text: "Supporting text"
MDListItemTertiaryText:
text: "Tertiary text"
MDListItem(
MDListItemHeadlineText(
text="Headline",
),
MDListItemSupportingText(
text="Supporting text",
),
MDListItemTertiaryText(
text="Tertiary text",
),
)
Declarative KV styles
MDListItem:
MDListItemLeadingIcon:
icon: "account"
MDListItemHeadlineText:
text: "Headline"
MDListItemSupportingText:
text: "Supporting text"
MDListItemTertiaryText:
text: "Tertiary text"
MDListItem(
MDListItemLeadingIcon(
icon="account",
),
MDListItemHeadlineText(
text="Headline",
),
MDListItemSupportingText(
text="Supporting text",
),
MDListItemTertiaryText(
text="Tertiary text",
),
)
Declarative KV styles
MDListItem:
MDListItemLeadingIcon:
icon: "account"
MDListItemHeadlineText:
text: "Headline"
MDListItemSupportingText:
text: "Supporting text"
MDListItemTertiaryText:
text: "Tertiary text"
MDListItemTrailingIcon:
icon: "trash-can-outline"
MDListItem(
MDListItemLeadingIcon(
icon="account",
),
MDListItemHeadlineText(
text="Headline",
),
MDListItemSupportingText(
text="Supporting text",
),
MDListItemTertiaryText(
text="Tertiary text",
),
MDListItemTrailingIcon(
icon="trash-can-outline",
),
)
Declarative KV styles
MDListItem:
MDListItemLeadingIcon:
icon: "account"
MDListItemHeadlineText:
text: "Headline"
MDListItemSupportingText:
text: "Supporting text"
MDListItemTertiaryText:
text: "Tertiary text"
MDListItemTrailingCheckbox:
MDListItem(
MDListItemLeadingIcon(
icon="account",
),
MDListItemHeadlineText(
text="Headline",
),
MDListItemSupportingText(
text="Supporting text",
),
MDListItemTertiaryText(
text="Tertiary text",
),
MDListItemTrailingCheckbox(
),
)
API - kivymd.uix.list.list
icon_color_disabled
The icon color in (r, g, b, a) or string format of the list item when the list item is disabled.
icon_color_disabled is a ColorProperty and defaults to None.
class kivymd.uix.list.list.MDListItemHeadlineText(*args, **kwargs)
Implements a class for headline text of list item.
For more information, see in the BaseListItemText class documentation.
class kivymd.uix.list.list.MDListItemSupportingText(*args, **kwargs)
Implements a class for secondary text of list item.
For more information, see in the BaseListItemText class documentation.
class kivymd.uix.list.list.MDListItemTertiaryText(*args, **kwargs)
Implements a class for tertiary text of list item.
For more information, see in the BaseListItemText class documentation.
class kivymd.uix.list.list.MDListItemTrailingSupportingText(*args, **kwargs)
Implements a class for trailing text of list item.
For more information, see in the BaseListItemText class documentation.
class kivymd.uix.list.list.MDListItemLeadingIcon(*args, **kwargs)
Implements a class for leading icon class.
For more information, see in the BaseListItemIcon class documentation.
class kivymd.uix.list.list.MDListItemLeadingAvatar(**kwargs)
Implements a class for leading avatar class.
For more information, see in the ThemableBehavior and CircularRippleBehavior and ButtonBehavior
and FitImage classes documentation.
class kivymd.uix.list.list.MDListItemTrailingIcon(*args, **kwargs)
Implements a class for trailing icon class.
For more information, see in the BaseListItemIcon class documentation.
class kivymd.uix.list.list.MDListItemTrailingCheckbox(**kwargs)
Implements a class for trailing checkbox class.
For more information, see in the MDCheckbox class documentation.
class kivymd.uix.list.list.MDListItem(*args, **kwargs)
Implements a list item.
For more information, see in the BaseListItem and BoxLayout classes documentation.
add_widget(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.
Added 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.
Added in version 1.9.0.
2.3.23 Card
See also:
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
1. Elevated card
2. Filled card
3. Outlined card
Example
KV = '''
<MyCard>
padding: "4dp"
size_hint: None, None
size: "240dp", "100dp"
MDRelativeLayout:
MDIconButton:
icon: "dots-vertical"
pos_hint: {"top": 1, "right": 1}
MDLabel:
text: root.text
adaptive_size: True
color: "grey"
pos: "12dp", "12dp"
bold: True
MDScreen:
(continues on next page)
MDBoxLayout:
id: box
adaptive_size: True
spacing: "12dp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class MyCard(MDCard):
'''Implements a material card.'''
text = StringProperty()
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
for style in ("elevated", "filled", "outlined"):
self.root.ids.box.add_widget(
MyCard(style=style, text=style.capitalize())
)
Example().run()
class MyCard(MDCard):
'''Implements a material card.'''
class Example(MDApp):
def build(self):
return (
MDScreen(
MDBoxLayout(
id="box",
adaptive_size=True,
(continues on next page)
def on_start(self):
for style in ("elevated", "filled", "outlined"):
self.root.ids.box.add_widget(
MyCard(
MDRelativeLayout(
MDIconButton(
icon="dots-vertical",
pos_hint={"top": 1, "right": 1}
),
MDLabel(
text=style.capitalize(),
adaptive_size=True,
pos=("12dp", "12dp"),
),
),
style=style,
padding="4dp",
size_hint=(None, None),
size=("240dp", "100dp"),
ripple_behavior=True,
)
)
Example().run()
Elevated
MDCard
style: "elevated"
Filled
MDCard
style: "filled"
Outlined
MDCard
style: "outlined"
Customization of card
KV = '''
MDScreen:
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.backgroundColor
MDCard:
style: "elevated"
pos_hint: {"center_x": .5, "center_y": .5}
padding: "4dp"
size_hint: None, None
size: "240dp", "100dp"
# Sets custom properties.
theme_shadow_color: "Custom"
shadow_color: "green"
theme_bg_color: "Custom"
md_bg_color: "white"
md_bg_color_disabled: "grey"
theme_shadow_offset: "Custom"
shadow_offset: (1, -2)
theme_shadow_softness: "Custom"
shadow_softness: 1
theme_elevation_level: "Custom"
elevation_level: 2
MDIconButton:
icon: "dots-vertical"
pos_hint: {"top": 1, "right": 1}
MDLabel:
text: "Elevated"
adaptive_size: True
color: "grey"
pos: "12dp", "12dp"
bold: True
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
return Builder.load_string(KV)
Example().run()
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:
(continues on next page)
OneLineListItem:
id: content
text: root.text
_no_ripple_effect: True
class SwipeToDeleteItem(MDCardSwipe):
text = StringProperty()
Example
KV = '''
<SwipeToDeleteItem>:
size_hint_y: None
height: content.height
MDCardSwipeLayerBox:
padding: "8dp"
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:
MDScrollView:
(continues on next page)
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}")
)
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDScrollView(
MDList(
(continues on next page)
def on_start(self):
'''Creates a list of cards.'''
for i in range(20):
self.root.ids.scroll.ids.md_list.add_widget(
MDCardSwipe(
MDCardSwipeLayerBox(),
MDCardSwipeFrontBox(
OneLineListItem(
id="content",
text=f"One-line item {i}",
_no_ripple_effect=True,
)
),
size_hint_y=None,
height="48dp",
)
)
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" # "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)
API - kivymd.uix.card.card
open_progress
Percent of visible part of side panel. The percent is specified as a floating point number in the range 0-1.
0.0 if panel is closed and 1.0 if panel is opened.
open_progress is a NumericProperty and defaults to 0.0.
opening_transition
The name of the animation transition type to use when animating to the state ‘opened’.
opening_transition is a StringProperty and defaults to ‘out_cubic’.
closing_transition
The name of the animation transition type to use when animating to the state ‘closed’.
closing_transition is a StringProperty and defaults to ‘out_sine’.
closing_interval
Interval for closing the front layer.
Added in version 1.1.0.
closing_interval is a NumericProperty and defaults to 0.
anchor
Anchoring screen edge for card. Available options are: ‘left’, ‘right’.
anchor is a OptionProperty and defaults to left.
swipe_distance
The distance of the swipe with which the movement of navigation drawer begins.
swipe_distance is a NumericProperty and defaults to 50.
opening_time
The time taken for the card to slide to the state ‘open’.
opening_time is a NumericProperty and defaults to 0.2.
state
Detailed state. Sets before state. Bind to state instead of status. Available options are: ‘closed’,
‘opened’.
status is a OptionProperty and defaults to ‘closed’.
max_swipe_x
If, after the events of on_touch_up card position exceeds this value - will automatically execute the method
open_card, and if not - will automatically be close_card method.
max_swipe_x is a NumericProperty and defaults to 0.3.
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.
on_swipe_complete(*args)
Fired when a swipe of card is completed.
on_anchor(instance_swipe_to_delete_item, anchor_value: str) → None
Fired when the value of anchor changes.
on_open_progress(instance_swipe_to_delete_item, progress_value: float) → None
Fired when the value of open_progress changes.
on_touch_move(touch)
Receive a touch move event. The touch is in parent coordinates.
See on_touch_down() for more information.
on_touch_up(touch)
Receive a touch up event. The touch is in parent coordinates.
See on_touch_down() for more information.
on_touch_down(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.
open_card() → None
Animates the opening of the card.
close_card(*args) → None
Animates the closing of the card.
add_widget(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.
Added 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.
Added in version 1.9.0.
2.3.24 SegmentedButton
Segmented buttons help people select options, switch views, or sort elements.
Anatomy
Icons
Icons may be used as labels by themselves or alongside text. If an icon is used without label text, it must clearly
communicate the option it represents.
MDSegmentedButton:
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-python"
MDSegmentButtonLabel:
text: "Python"
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-javascript"
MDSegmentButtonLabel:
text: "Java-Script"
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-swift"
MDSegmentButtonLabel:
text: "Swift"
MDSegmentedButton:
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-python"
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-javascript"
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-swift"
MDSegmentedButton:
MDSegmentedButtonItem:
MDSegmentButtonLabel:
text: "Python"
MDSegmentedButtonItem:
MDSegmentButtonLabel:
text: "Java-Script"
MDSegmentedButtonItem:
MDSegmentButtonLabel:
text: "Swift"
Multiselect
MDSegmentedButton:
multiselect: True
Type
Density can be used in denser UIs where space is limited. Density is only applied to the height. Each step down in
density removes 4dp from the height.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
id: box
orientation: "vertical"
size_hint_x: .7
adaptive_height: True
spacing: "24dp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def on_start(self):
for segment_type in ["large", "normal", "medium", "small"]:
self.root.ids.box.add_widget(
MDBoxLayout(
MDLabel(
(continues on next page)
def build(self):
return Builder.load_string(KV)
Example().run()
A practical example
import os
import asynckivy
(continues on next page)
KV = '''
<UserCard>
adaptive_height: True
radius: 16
MDListItem:
radius: 16
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.secondaryContainerColor
MDListItemLeadingAvatar:
source: root.album
MDListItemHeadlineText:
text: root.name
MDListItemSupportingText:
text: root.path_to_file
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
orientation: "vertical"
padding: "12dp"
spacing: "12dp"
MDLabel:
adaptive_height: True
text: "Your downloads"
theme_font_style: "Custom"
font_style: "Display"
role: "small"
MDSegmentedButton:
size_hint_x: 1
MDSegmentedButtonItem:
on_active: app.generate_card()
MDSegmentButtonLabel:
text: "Songs"
active: True
MDSegmentedButtonItem:
on_active: app.generate_card()
MDSegmentButtonLabel:
text: "Albums"
MDSegmentButtonLabel:
text: "Podcasts"
RecycleView:
id: card_list
viewclass: "UserCard"
bar_width: 0
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"
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
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 break
1.2.0 version
MDSegmentedButton:
on_marked: func(*args)
MDSegmentedButtonItem:
icon: ...
text: ...
2.0.0 version
MDSegmentedButton:
MDSegmentedButtonItem:
on_active: func(*args)
MDSegmentButtonIcon:
icon: ...
MDSegmentButtonLabel:
text: ...
API - kivymd.uix.segmentedbutton.segmentedbutton
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.1.
selected_segments
The list of MDSegmentedButtonItem objects that are currently marked.
selected_segments is a ListProperty and defaults to [].
type
Density can be used in denser UIs where space is limited. Density is only applied to the height. Each step
down in density removes ‘4dp’ from the height.
Added in version 2.0.0.
Available options are: ‘large’, ‘normal’, ‘medium’, ‘small’.
type is an OptionProperty and defaults to ‘large’.
selected_icon_color
Color in (r, g, b, a) or string format of the icon of the marked segment.
Added in version 2.0.0.
selected_icon_color is a ColorProperty and defaults to None.
get_marked_items() → list
Returns a list of active item objects.
get_items() → list
Returns a list of item objects.
adjust_segment_radius(*args) → None
Rounds off the first and last elements.
mark_item(segment_item: MDSegmentedButtonItem) → None
Fired when a segment element is clicked (on_release event).
add_widget(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.
Added in version 1.0.5.
2.3.25 ProgressIndicator
See also:
Material Design spec, ProgressIndicator
• Use the same progress indicator for all instances of a process (like loading)
• Two types: linear and circular
• Never use them as decoration
• They capture attention through motion
Usage
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDLinearProgressIndicator:
size_hint_x: .5
value: 50
pos_hint: {'center_x': .5, 'center_y': .4}
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDCircularProgressIndicator:
size_hint: None, None
size: "48dp", "48dp"
pos_hint: {'center_x': .5, 'center_y': .5}
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
Determinate operations display the indicator increasing from 0 to 100% of the track, in sync with the process’s progress.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
class Example(MDApp):
def on_start(self):
self.root.ids.progress.start()
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
Indeterminate operations display the indicator continually growing and shrinking along the track until the process is
complete..
MDCircularProgressIndicator:
size_hint: None, None
size: "48dp", "48dp"
MDCircularProgressIndicator:
size_hint: None, None
size: "48dp", "48dp"
determinate: True
on_determinate_complete: print(args)
API break
1.1.1 version
MDProgressBar:
value: 50
color: app.theme_cls.accent_color
MDSpinner:
size_hint: None, None
size: dp(48), dp(48)
2.0.0 version
MDLinearProgressIndicator:
value: 50
indicator_color: app.theme_cls.errorColor
MDCircularProgressIndicator:
size_hint: None, None
size: dp(48), dp(48)
API - kivymd.uix.progressindicator.progressindicator
class kivymd.uix.progressindicator.progressindicator.MDLinearProgressIndicator(**kwargs)
Implementation of the linear progress indicator.
For more information, see in the DeclarativeBehavior and ThemableBehavior and ProgressBar classes
documentation.
radius
Progress line radius.
Added 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’.
indicator_color
Color of the active track.
Changed in version 2.0.0: Rename from color to indicator_color attribute.
indicator_color is an ColorProperty and defaults to None.
track_color
Progress bar back color in (r, g, b, a) or string format.
Added in version 1.0.0.
Changed in version 2.0.0: Rename from back_color to track_color attribute.
track_color is an ColorProperty and defaults to None.
running_determinate_transition
Running transition.
Changed in version 2.0.0: Rename from running_transition to running_determinate_transition attribute.
running_determinate_transition is an StringProperty and defaults to ‘out_quart’.
catching_determinate_transition
Catching transition.
Changed in version 2.0.0: Rename from catching_transition to catching_determinate_transition attribute.
catching_determinate_transition is an StringProperty and defaults to ‘out_quart’.
running_determinate_duration
Running duration.
Changed in version 2.0.0: Rename from running_duration to running_determinate_duration attribute.
running_determinate_duration is an NumericProperty and defaults to 2.5.
catching_determinate_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.
running_indeterminate_transition
Running transition.
running_indeterminate_transition is an StringProperty and defaults to ‘in_cubic’.
catching_indeterminate_transition
Catching transition.
catching_indeterminate_transition is an StringProperty and defaults to ‘out_quart’.
running_indeterminate_duration
Running duration.
running_indeterminate_duration is an NumericProperty and defaults to 0.5.
catching_indeterminate_duration
Catching duration.
catching_indeterminate_duration is an NumericProperty and defaults to 0.8.
check_size(*args) → None
start() → None
Start animation.
stop() → None
Stop animation.
running_away(*args) → None
catching_up(*args) → None
on_value(instance, value)
class kivymd.uix.progressindicator.progressindicator.MDCircularProgressIndicator(**kwargs)
Implementation of the circular progress indicator.
Changed in version 2.0.0: Rename MDSpinner to MDCircularProgressIndicator class.
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 indicator 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 indicator.
line_width is a NumericProperty and defaults to dp(2.25).
active
Use active to start or stop the indicator.
active is a BooleanProperty and defaults to True.
color
Indicator color in (r, g, b, a) or string format.
color is a ColorProperty and defaults to None.
palette
A set of colors. Changes with each completed indicator cycle.
palette is a ListProperty and defaults to [].
on__rotation_angle(*args)
2.3.26 FitImage
Example
Declarative KV styles
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
radius: "36dp"
pos_hint: {"center_x": .5, "center_y": .5}
size_hint: .4, .8
md_bg_color: self.theme_cls.onSurfaceVariantColor
FitImage:
source: "image.png"
size_hint_y: .35
pos_hint: {"top": 1}
radius: "36dp", "36dp", 0, 0
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def build(self):
return (
MDScreen(
MDBoxLayout(
FitImage(
source="image.png",
size_hint_y=0.35,
pos_hint={"top": 1},
radius=(dp(36), dp(36), 0, 0),
),
radius=dp(36),
md_bg_color=self.theme_cls.onSurfaceVariantColor,
pos_hint={"center_x": 0.5, "center_y": 0.5},
size_hint=(0.4, 0.8),
),
)
)
Example().run()
API - kivymd.uix.fitimage.fitimage
2.3.27 Badge
Badges show notifications, counts, or status information on navigation items and icons.
Example
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDIcon:
icon: "gmail"
pos_hint: {'center_x': .5, 'center_y': .5}
MDBadge:
text: "12"
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.badge.badge
2.3.28 Snackbar
See also:
Material Design spec, Snackbars
Snackbars provide brief messages about app processes at the bottom of the screen.
Usage
MDSnackbar(
MDSnackbarText(
text="Text",
),
y=dp(24),
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
1. Container
2. Supporting text
3. Action (optional)
4. Icon (optional close affordance)
Anatomy
Configurations
1. Single line
MDSnackbar(
MDSnackbarText(
text="Single-line snackbar",
),
y=dp(24),
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
MDSnackbar(
MDSnackbarSupportingText(
text="Single-line snackbar with action",
),
MDSnackbarButtonContainer(
MDSnackbarActionButton(
MDSnackbarActionButtonText(
text="Action button"
),
),
pos_hint={"center_y": 0.5}
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
MDSnackbar(
MDSnackbarSupportingText(
text="Single-line snackbar with action and close buttons",
),
MDSnackbarButtonContainer(
MDSnackbarActionButton(
MDSnackbarActionButtonText(
text="Action button"
),
),
MDSnackbarCloseButton(
icon="close",
),
pos_hint={"center_y": 0.5}
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
MDSnackbar(
MDSnackbarText(
text="Single-line snackbar",
),
MDSnackbarSupportingText(
text="with action and close buttons",
),
MDSnackbarButtonContainer(
(continues on next page)
MDSnackbar(
MDSnackbarText(
text="Single-line snackbar with action",
),
MDSnackbarSupportingText(
text="and close buttons at the bottom",
padding=[0, 0, 0, dp(56)],
),
MDSnackbarButtonContainer(
Widget(),
MDSnackbarActionButton(
MDSnackbarActionButtonText(
text="Action button"
),
),
MDSnackbarCloseButton(
icon="close",
),
),
y=dp(124),
(continues on next page)
API break
1.1.1 version
snackbar = Snackbar(
text="First string",
snackbar_x="10dp",
snackbar_y="24dp",
)
snackbar.size_hint_x = (
Window.width - (snackbar.snackbar_x * 2)
) / Window.width
snackbar.buttons = [
MDFlatButton(
text="Done",
theme_text_color="Custom",
text_color="#8E353C",
on_release=snackbar.dismiss,
),
]
snackbar.open()
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()
2.0.0 version
MDSnackbar(
MDSnackbarSupportingText(
text="Single-line snackbar with action",
),
MDSnackbarButtonContainer(
MDSnackbarActionButton(
MDSnackbarActionButtonText(
text="Action button"
),
),
pos_hint={"center_y": 0.5}
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
background_color=self.theme_cls.onPrimaryContainerColor,
).open()
API - kivymd.uix.snackbar.snackbar
class kivymd.uix.snackbar.snackbar.MDSnackbarCloseButton(**kwargs)
Snackbar closed button class.
For more information, see in the MDIconButton class documentation.
class kivymd.uix.snackbar.snackbar.MDSnackbarActionButtonText(*args, **kwargs)
The class implements the text for the MDSnackbarActionButton class.
Changed in version 2.2.0.
For more information, see in the MDButtonText class documentation.
class kivymd.uix.snackbar.snackbar.MDSnackbarActionButton(*args, **kwargs)
Snackbar action button class.
For more information, see in the MDButton class documentation.
class kivymd.uix.snackbar.snackbar.MDSnackbar(*args, **kwargs)
Snackbar class.
Changed in version 1.2.0: Rename BaseSnackbar to MDSnackbar class.
For more information, see in the MotionShackBehavior and MDCard and class documentation.
Events
on_open
Fired when a snackbar opened.
on_dismiss
Fired when a snackbar closes.
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 [dp(4), dp(4), dp(4), dp(4)]
background_color
The background color in (r, g, b, a) or string format of the snackbar.
background_color is a ColorProperty and defaults to None.
dismiss(*args) → None
Dismiss the snackbar.
open() → None
Show the snackbar.
add_widget(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.
Added 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.
Added in version 1.9.0.
on_open(*args) → None
Fired when a snackbar opened.
on_dismiss(*args) → None
Fired when a snackbar closed.
class kivymd.uix.snackbar.snackbar.MDSnackbarText(*args, **kwargs)
The class implements the text.
For more information, see in the MDLabel class documentation.
class kivymd.uix.snackbar.snackbar.MDSnackbarSupportingText(*args, **kwargs)
The class implements the supporting text.
For more information, see in the MDLabel class documentation.
2.3.29 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(instance_screen_manager: kivymd.uix.screenmanager.MDScreenManager) → None
(internal) Starts the transition. This is automatically called by the ScreenManager.
animated_hero_in() → None
Animates the flight of heroes from screen A to screen B.
animated_hero_out() → None
Animates the flight of heroes from screen B to screen A.
on_complete() → None
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(instance_screen_manager: kivymd.uix.screenmanager.MDScreenManager) → None
(internal) Starts the transition. This is automatically called by the ScreenManager.
on_progress(progression: float) → None
class kivymd.uix.transition.transition.MDSharedAxisTransition
Android default screen transition.
Added in version 2.0.0.
transition_axis
Axis of the transition. Available values “x”, “y”, and “z”.
on_complete()
Override method. See :attr:`kivy.uix.screenmanager.TransitionBase.on_complete’.
See also:
Material Design spec, Text fields
Usage
MDTextField:
mode: "filled"
MDTextFieldLeadingIcon:
icon: "magnify"
MDTextFieldHintText:
text: "Hint text"
MDTextFieldHelperText:
text: "Helper text"
mode: "persistent"
MDTextFieldMaxLengthText:
max_text_length: 10
Anatomy
Filled mode
MDTextField:
mode: "filled"
Outlined mode
MDTextField:
mode: "outlined"
Example
Declarative KV style
KV = '''
MDScreen:
md_bg_color: app.theme_cls.backgroundColor
MDTextField:
mode: "outlined"
size_hint_x: None
width: "240dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDTextFieldLeadingIcon:
icon: "account"
MDTextFieldHintText:
text: "Outlined"
MDTextFieldHelperText:
text: "Helper text"
mode: "persistent"
MDTextFieldTrailingIcon:
icon: "information"
MDTextFieldMaxLengthText:
max_text_length: 10
'''
Example().run()
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return MDScreen(
MDTextField(
MDTextFieldLeadingIcon(
icon="account",
),
MDTextFieldHintText(
text="Hint text",
),
MDTextFieldHelperText(
text="Helper text",
mode="persistent",
),
MDTextFieldTrailingIcon(
icon="information",
),
MDTextFieldMaxLengthText(
max_text_length=10,
),
mode="outlined",
size_hint_x=None,
width="240dp",
pos_hint={"center_x": 0.5, "center_y": 0.5},
),
md_bg_color=self.theme_cls.backgroundColor,
)
Example().run()
API break
1.2.0 version
MDTextField:
mode: "rectangle"
hint_text: "Hint text"
helper_text: "Helper text"
helper_text_mode: "persistent"
max_text_length: 10
icon_right: "information"
2.0.0 version
Note: The text field with the round type was removed in version 2.0.0.
MDTextField:
mode: "outlined"
MDTextFieldLeadingIcon:
icon: "phone"
MDTextFieldTrailingIcon:
icon: "information"
MDTextFieldHintText:
text: "Hint text"
MDTextFieldHelperText:
text: "Helper text"
mode: "persistent"
MDTextFieldMaxLengthText:
max_text_length: 10
API - kivymd.uix.textfield.textfield
class kivymd.uix.textfield.textfield.AutoFormatTelephoneNumber
Implements automatic formatting of the text entered in the text field according to the mask, for example ‘+38
(###) ### ## ##’.
Warning: This class has not yet been implemented and it is not recommended to use it yet.
isnumeric(value) → bool
do_backspace(*args) → None
Do backspace operation from the current cursor position.
field_filter(value, boolean) → None
format(value) → None
class kivymd.uix.textfield.textfield.Validator
Container class for various validation methods.
datetime_date
The last valid date as a <class ‘datetime.date’> object.
datetime_date is an ObjectProperty and defaults to None.
date_interval
The date interval that is valid for input. Can be entered as <class ‘datetime.date’> objects or a string format.
Both values or just one value can be entered.
In string format, must follow the current date_format. Example: Given date_format -> “mm/dd/yyyy”
Input examples -> “12/31/1900”, “12/31/2100” or “12/31/1900”, None.
date_interval is an ListProperty and defaults to [None, None].
date_format
Format of date strings that will be entered. Available options are: ‘dd/mm/yyyy’, ‘mm/dd/yyyy’,
‘yyyy/mm/dd’.
date_format is an OptionProperty and defaults to None.
is_email_valid(text: str) → bool
Checks the validity of the email.
is_time_valid(text: str) → bool
Checks the validity of the time.
is_date_valid(text: str) → bool
Checks the validity of the date.
on_date_interval(*args) → None
Default event handler for date_interval input.
class kivymd.uix.textfield.textfield.BaseTextFieldLabel(*args, **kwargs)
Base texture for MDTextField class (helper text, max length, hint text).
For more information, see in the MDLabel class documentation.
Added in version 2.0.0.
text_color_normal
Text color in (r, g, b, a) or string format when text field is out of focus.
Added in version 1.0.0.
Changed in version 2.0.0: The property was moved from class:~MDTextField class and renamed from
helper_text_color_normal to text_color_normal.
MDTextField:
mode: "filled"
MDTextFieldHintText:
text: "Hint text color normal"
text_color_normal: "brown"
MDTextField:
MDTextFieldHelperText:
text: "Helper text color focus"
text_color_focus: "brown"
mode
Helper text mode. Available options are: ‘on_error’, ‘persistent’, ‘on_focus’.
Changed in version 2.0.0: The property was moved from class:~MDTextField class and renamed from
helper_text_mode to mode.
On focus
MDTextField:
mode: "filled"
MDTextFieldHelperText:
text: "Helper text"
mode: "on_focus"
On error
MDTextField:
mode: "filled"
MDTextFieldHelperText:
text: "Helper text"
mode: "on_error"
MDTextFieldMaxLengthText:
max_text_length: 5
Persistent
MDTextField:
mode: "filled"
MDTextFieldHelperText:
text: "Helper text"
mode: "persistent"
max_text_length
Maximum allowed value of characters in a text field.
Changed in version 2.0.0: The property was moved from class:~MDTextField.
MDTextField:
mode: "filled"
MDTextFieldMaxLengthText:
max_text_length: 10
MDTextField:
mode: "filled"
MDTextFieldHintText:
text: "Hint text"
MDTextField:
mode: "filled"
MDTextFieldLeadingIcon:
icon: "phone"
(continues on next page)
MDTextFieldHintText:
text: "Leading icon color normal"
MDTextField:
mode: "filled"
MDTextFieldLeadingIcon:
icon: "phone"
theme_icon_color: "Custom"
icon_color_focus: "lightgreen"
MDTextFieldHintText:
text: "Leading icon color focus"
MDTextField:
mode: "filled"
MDTextFieldLeadingIcon:
icon: "phone"
MDTextFieldHintText:
text: "Field with leading icon"
MDTextField:
mode: "filled"
MDTextFieldTrailingIcon:
icon: "phone"
MDTextFieldHintText:
text: "Field with trailing icon"
See also:
Font style names
font_style is an StringProperty and defaults to ‘Body’.
role
Role of font style.
Added in version 2.0.0.
See also:
Font style roles
role is an StringProperty and defaults to ‘large’.
mode
Text field mode. Available options are: ‘outlined’, ‘filled’.
mode is an OptionProperty and defaults to ‘outlined’.
error_color
Error color in (r, g, b, a) or string format for required = True or when the text field is in error state.
error_color is an ColorProperty and defaults to None.
error
If True, then the text field goes into error mode.
error is an BooleanProperty and defaults to False.
text_color_normal
Text color in (r, g, b, a) or string format when text field is out of focus.
Added in version 1.0.0.
MDTextField:
theme_text_color: "Custom"
text_color_normal: "green"
text: "Text color normal"
MDTextField:
theme_text_color: "Custom"
text_color_focus: "green"
text: "Text color focus"
MDTextField:
mode: "filled"
theme_line_color: "Custom"
line_color_normal: "green"
MDTextFieldHelperText:
text: "Line color normal"
mode: "persistent"
MDTextField:
mode: "filled"
theme_line_color: "Custom"
(continues on next page)
MDTextFieldHelperText:
text: "Line color focus"
mode: "persistent"
MDTextField:
mode: "filled"
theme_bg_color: "Custom"
fill_color_normal: 0, 1, 0, .2
MDTextFieldHelperText:
text: "Fill color normal"
mode: "persistent"
MDTextField:
mode: "filled"
theme_bg_color: "Custom"
fill_color_focus: 0, 1, 0, .2
MDTextFieldHelperText:
text: "Fill color focus"
mode: "persistent"
MDTextField:
mode: "filled"
max_height: "200dp"
multiline: True
MDTextFieldHelperText:
text: "multiline=True"
mode: "persistent"
MDTextField:
mode: "filled"
validator: "email"
MDTextFieldHintText:
text: "Email"
MDTextFieldHelperText:
text: "[email protected]"
mode: "persistent"
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
orientation: "vertical"
spacing: "20dp"
adaptive_height: True
size_hint_x: .8
pos_hint: {"center_x": .5, "center_y": .5}
MDTextField:
validator: "date"
date_format: "dd/mm/yyyy"
MDTextFieldHintText:
text: "Date dd/mm/yyyy without limits"
MDTextFieldHelperText:
text: "Enter a valid dd/mm/yyyy date"
MDTextField:
validator: "date"
date_format: "mm/dd/yyyy"
MDTextFieldHintText:
text: "Date mm/dd/yyyy without limits"
MDTextFieldHelperText:
text: "Enter a valid mm/dd/yyyy date"
MDTextField:
validator: "date"
date_format: "yyyy/mm/dd"
MDTextFieldHintText:
text: "Date yyyy/mm/dd without limits"
MDTextFieldHelperText:
text: "Enter a valid yyyy/mm/dd date"
MDTextFieldHintText:
text: "Date dd/mm/yyyy in [01/01/1900, 01/01/2100] interval"
MDTextFieldHelperText:
text: "Enter a valid dd/mm/yyyy date"
MDTextField:
validator: "date"
date_format: "dd/mm/yyyy"
date_interval: "01/01/1900", None
MDTextFieldHintText:
text: "Date dd/mm/yyyy in [01/01/1900, None] interval"
MDTextFieldHelperText:
text: "Enter a valid dd/mm/yyyy date"
MDTextField:
validator: "date"
date_format: "dd/mm/yyyy"
date_interval: None, "01/01/2100"
MDTextFieldHintText:
text: "Date dd/mm/yyyy in [None, 01/01/2100] interval"
MDTextFieldHelperText:
text: "Enter a valid dd/mm/yyyy date"
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
2.3.31 DropdownItem
Usage
KV = '''
MDScreen
md_bg_color: self.theme_cls.backgroundColor
MDDropDownItem:
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.open_menu(self)
MDDropDownItemText:
id: drop_text
text: "Item"
'''
class Example(MDApp):
def open_menu(self, item):
menu_items = [
{
"text": f"{i}",
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
MDDropdownMenu(caller=item, items=menu_items).open()
def build(self):
return Builder.load_string(KV)
Example().run()
See also:
Work with the class MDDropdownMenu see here
API break
1.2.0 version
MDDropDownItem:
text: 'Item'
on_release: print(*args)
2.0.0 version
MDDropDownItem:
on_release: print(*args)
MDDropDownItemText:
text: "Item text"
API - kivymd.uix.dropdownitem.dropdownitem
2.3.32 Appbar
See also:
Material Design spec, App bars: top
Material Design spec, App bars: bottom
TopAppBar
1. Center-aligned
2. Small
3. Medium
4. Large
Note: KivyMD does not provide a Center-aligned type panel. But you can easily create this pit panel yourself (read
the documentation below).
Usage
MDTopAppBar:
type: "small"
MDTopAppBarLeadingButtonContainer:
MDActionTopAppBarButton:
icon: "menu"
MDTopAppBarTitle:
text: "AppBar Center-aligned"
pos_hint: {"center_x": .5}
MDTopAppBarTrailingButtonContainer:
MDActionTopAppBarButton:
icon: "account-circle-outline"
Anatomy
Configurations
1. Center-aligned
MDScreen:
md_bg_color: self.theme_cls.secondaryContainerColor
MDTopAppBar:
type: "small"
size_hint_x: .8
pos_hint: {"center_x": .5, "center_y": .5}
MDTopAppBarLeadingButtonContainer:
MDActionTopAppBarButton:
icon: "menu"
MDTopAppBarTitle:
text: "AppBar small"
pos_hint: {"center_x": .5}
MDTopAppBarTrailingButtonContainer:
(continues on next page)
MDActionTopAppBarButton:
icon: "account-circle-outline"
2. Small
MDScreen:
md_bg_color: self.theme_cls.secondaryContainerColor
MDTopAppBar:
type: "small"
size_hint_x: .8
pos_hint: {"center_x": .5, "center_y": .5}
MDTopAppBarLeadingButtonContainer:
MDActionTopAppBarButton:
icon: "arrow-left"
MDTopAppBarTitle:
text: "AppBar small"
MDTopAppBarTrailingButtonContainer:
MDActionTopAppBarButton:
icon: "attachment"
MDActionTopAppBarButton:
icon: "calendar"
MDActionTopAppBarButton:
icon: "dots-vertical"
3. Medium
MDTopAppBar:
type: "medium"
4. Large
MDTopAppBar:
type: "large"
BottomAppBar
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDBottomAppBar:
MDFabBottomAppBarButton:
icon: "plus"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
MDScreen:
MDBottomAppBar:
action_items:
[
MDActionBottomAppBarButton(icon="gmail"),
MDActionBottomAppBarButton(icon="label-outline"),
MDActionBottomAppBarButton(icon="bookmark"),
]
KV = '''
#:import MDActionBottomAppBarButton kivymd.uix.appbar.MDActionBottomAppBarButton
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDBottomAppBar:
id: bottom_appbar
action_items:
[
MDActionBottomAppBarButton(icon="gmail"),
MDActionBottomAppBarButton(icon="bookmark"),
]
MDFabBottomAppBarButton:
icon: "plus"
on_release: app.change_actions_items()
(continues on next page)
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
import asynckivy
KV = '''
#:import MDFabBottomAppBarButton kivymd.uix.appbar.MDFabBottomAppBarButton
<UserCard>
orientation: "vertical"
adaptive_height: True
md_bg_color: "#373A22" if self.selected else "#1F1E15"
radius: 16
padding: 0, 0, 0, "16dp"
MDListItem:
theme_bg_color: "Custom"
(continues on next page)
MDListItemLeadingAvatar:
source: root.avatar
# radius: self.height / 2
MDListItemHeadlineText:
text: root.name
theme_text_color: "Custom"
text_color: "#8A8D79"
MDListItemSupportingText:
text: root.time
theme_text_color: "Custom"
text_color: "#8A8D79"
MDLabel:
text: root.text
adaptive_height: True
theme_text_color: "Custom"
text_color: "#8A8D79"
padding_x: "16dp"
shorten: True
shorten_from: "right"
Widget:
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
(continues on next page)
MDFabBottomAppBarButton:
id: fab_button
icon: "plus"
theme_bg_color: "Custom"
md_bg_color: "#373A22"
theme_icon_color: "Custom"
icon_color: "#ffffff"
'''
index = None
selected = BooleanProperty(False)
selectable = BooleanProperty(True)
class SelectableRecycleGridLayout(
FocusBehavior, LayoutSelectionBehavior, RecycleBoxLayout
):
pass
class BottomAppBarButton(MDActionBottomAppBarButton):
theme_icon_color = "Custom"
icon_color = "#8A8D79"
class Example(MDApp):
(continues on next page)
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(),
"selected": False,
"callback": self.on_tap_card,
}
)
self.on_tap_card()
fake = Faker()
Clock.schedule_once(lambda x: asynckivy.start(generate_card()))
Example().run()
API break
1.2.0 version
MDTopAppBar:
type_height: "large"
headline_text: "Headline"
left_action_items: [["arrow-left", lambda x: x]]
right_action_items:
[ ["attachment", lambda x: x], ["calendar", lambda x: x],
˓→ ["dots-vertical", lambda x: x], ]
anchor_title: "left"
2.0.0 version
MDTopAppBar:
type: "large"
MDTopAppBarLeadingButtonContainer:
MDActionTopAppBarButton:
icon: "arrow-left"
MDTopAppBarTitle:
text: "AppBar small"
MDTopAppBarTrailingButtonContainer:
MDActionTopAppBarButton:
icon: "attachment"
MDActionTopAppBarButton:
icon: "calendar"
MDActionTopAppBarButton:
icon: "dots-vertical"
API - kivymd.uix.appbar.appbar
class kivymd.uix.appbar.appbar.MDFabBottomAppBarButton(**kwargs)
Implements a floating action button (FAB) for a bar with type ‘bottom’.
For more information, see in the MDFabButton and RotateBehavior and ScaleBehavior and classes docu-
mentation.
class kivymd.uix.appbar.appbar.MDActionTopAppBarButton(**kwargs)
Implements action buttons on the bar.
For more information, see in the MDIconButton class documentation.
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.
class kivymd.uix.appbar.appbar.MDActionBottomAppBarButton(**kwargs)
Implements action buttons for a :class:’~kivymd.uix.appbar.appbar.MDBottomAppBar’ class.
Added in version 1.2.0.
For more information, see in the MDActionTopAppBarButton class documentation.
class kivymd.uix.appbar.appbar.MDTopAppBarTitle(*args, **kwargs)
Implements the panel title.
Added in version 2.0.0.
For more information, see in the MDLabel class documentation.
on_text(instance, value) → None
Fired when the text value changes.
on_pos_hint(instance, value) → None
Fired when the pos_hint value changes.
class kivymd.uix.appbar.appbar.MDTopAppBarLeadingButtonContainer(*args, **kwargs)
Implements a container for the leading action buttons.
Added in version 2.0.0.
For more information, see in the DeclarativeBehavior and BoxLayout classes documentation.
class kivymd.uix.appbar.appbar.MDTopAppBarTrailingButtonContainer(*args, **kwargs)
Implements a container for the trailing action buttons.
Added in version 2.0.0.
For more information, see in the DeclarativeBehavior and BoxLayout classes documentation.
class kivymd.uix.appbar.appbar.MDTopAppBar(*args, **kwargs)
Top app bar class.
For more information, see in the DeclarativeBehavior and ThemableBehavior and
CommonElevationBehavior and BackgroundColorBehavior and BoxLayout and WindowController
classes documentation.
Events
on_action_button
Method for the button used for the MDBottomAppBar class.
set_bars_color
If True the background color of the bar status will be set automatically according to the current color of the
bar.
Added in version 1.0.0.
See set_bars_colors for more information.
set_bars_color is an BooleanProperty and defaults to False.
type
Bar height type.
Added in version 1.0.0.
Available options are: ‘medium’, ‘large’, ‘small’.
type_height is an OptionProperty and defaults to ‘small’.
on_type(instance, value) → None
2.3.33 Dialog
See also:
Material Design spec, Dialogs
Anatomy
Example
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_alert_dialog()
MDButtonText:
text: "Show dialog"
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
def show_alert_dialog(self):
MDDialog(
# ----------------------------Icon-----------------------------
MDDialogIcon(
icon="refresh",
),
# -----------------------Headline text-------------------------
MDDialogHeadlineText(
text="Reset settings?",
),
# -----------------------Supporting text-----------------------
MDDialogSupportingText(
text="This will reset your app preferences back to their "
"default settings. The following accounts will also "
"be signed out:",
),
# -----------------------Custom content------------------------
MDDialogContentContainer(
MDDivider(),
MDListItem(
MDListItemLeadingIcon(
icon="gmail",
),
MDListItemSupportingText(
text="[email protected]",
),
theme_bg_color="Custom",
md_bg_color=self.theme_cls.transparentColor,
),
MDListItem(
MDListItemLeadingIcon(
icon="gmail",
(continues on next page)
Example().run()
API break
1.2.0 version
class Example(MDApp):
def build(self):
return Widget()
def on_start(self):
(continues on next page)
Example().run()
class Example(MDApp):
def build(self):
return Widget()
def on_start(self):
(continues on next page)
Example().run()
KV = '''
<Item>
(continues on next page)
ImageLeftWidget:
source: root.source
'''
class Item(OneLineAvatarListItem):
divider = None
source = StringProperty()
class Example(MDApp):
def build(self):
Builder.load_string(KV)
return Widget()
def on_start(self):
MDDialog(
title="Set backup account",
type="simple",
items=[
Item(text="[email protected]", source=f"{images_path}/logo/kivymd-icon-
˓→128.png"),
Item(text="[email protected]", source="data/logo/kivy-icon-128.png"),
],
).open()
Example().run()
2.2.0 version
class Example(MDApp):
def build(self):
return MDWidget(md_bg_color=self.theme_cls.backgroundColor)
def on_start(self):
MDDialog(
MDDialogHeadlineText(
text="Discard draft?",
halign="left",
),
MDDialogButtonContainer(
Widget(),
MDButton(
MDButtonText(text="Cancel"),
style="text",
),
MDButton(
MDButtonText(text="Discard"),
style="text",
),
spacing="8dp",
),
).open()
Example().run()
class Example(MDApp):
def build(self):
return MDWidget(md_bg_color=self.theme_cls.backgroundColor)
def on_start(self):
MDDialog(
MDDialogHeadlineText(
text="Discard draft?",
halign="left",
),
MDDialogSupportingText(
text="This will reset your device to its default factory settings.",
halign="left",
),
MDDialogButtonContainer(
Widget(),
MDButton(
MDButtonText(text="Cancel"),
style="text",
),
MDButton(
MDButtonText(text="Discard"),
style="text",
),
(continues on next page)
Example().run()
class Example(MDApp):
def build(self):
return MDWidget(md_bg_color=self.theme_cls.backgroundColor)
def on_start(self):
MDDialog(
MDDialogHeadlineText(
text="Set backup account",
halign="left",
(continues on next page)
Example().run()
API - kivymd.uix.dialog.dialog
open() → None
Show the dialog.
on_pre_open(*args) → None
Fired when a dialog pre opened.
on_open(*args) → None
Fired when a dialog opened.
on_dismiss(*args) → None
Fired when a dialog dismiss.
on_pre_dismiss(*args) → None
Fired when a dialog pre-dismiss.
on_touch_down(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.
dismiss(*args) → None
Closes the dialog.
class kivymd.uix.dialog.dialog.MDDialogIcon(*args, **kwargs)
The class implements an icon.
For more information, see in the MDIcon class documentation.
class kivymd.uix.dialog.dialog.MDDialogHeadlineText(*args, **kwargs)
The class implements the headline text.
For more information, see in the MDLabel class documentation.
class kivymd.uix.dialog.dialog.MDDialogSupportingText(*args, **kwargs)
The class implements the supporting text.
For more information, see in the MDLabel class documentation.
2.3.34 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}
'''
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}
Check:
pos_hint: {'center_x': .6, '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:
group: root.group
MDLabel:
text: root.text
adaptive_height: True
padding_x: "12dp"
pos_hint: {"center_y": .5}
MDBoxLayout:
orientation: "vertical"
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
padding: "12dp", "36dp", 0, 0
spacing: "12dp"
CheckItem:
text: "Recieve emails"
group: "root"
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
padding: "24dp", 0, 0, 0
spacing: "12dp"
CheckItem:
text: "Daily"
group: "child"
CheckItem:
text: "Weekly"
group: "child"
CheckItem:
text: "Monthly"
(continues on next page)
MDWidget:
'''
class CheckItem(MDBoxLayout):
text = StringProperty()
group = StringProperty()
class Example(MDApp):
def build(self):
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 StateLayerBehavior and CircularRippleBehavior and ScaleBehavior
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.
Added in version 1.0.0.
MDCheckbox:
color_active: "red"
MDCheckbox:
color_inactive: "blue"
selected_color
Color in (r, g, b, a) or string format when the checkbox is in the active state.
Deprecated since version 1.0.0: Use color_active instead.
selected_color is a ColorProperty and defaults to None.
unselected_color
Color in (r, g, b, a) or string format when the checkbox is in the inactive state.
Deprecated since version 1.0.0: Use color_inactive instead.
unselected_color is a ColorProperty and defaults to None.
update_icon(*args) → None
Fired when the values of checkbox_icon_normal and checkbox_icon_down and radio_icon_normal
and group change.
set_root_active() → None
set_child_active(active: bool)
on_state(*args) → None
Fired when the values of state change.
on_active(*args) → None
Fired when the values of active change.
on_touch_down(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 StateLayerBehavior and MDFloatLayout classes documentation.
md_bg_color_disabled
The background color in (r, g, b, a) or string format of the switch when the switch is disabled.
md_bg_color_disabled is a ColorProperty and defaults to None.
ripple_effect
Allows or does not allow the ripple effect when activating/deactivating the switch.
Added in version 2.0.0.
ripple_effect is a BooleanProperty and defaults to True.
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).
Added 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
line_color_disabled
The color of the outline in the disabled state
Added in version 2.0.0.
line_color_disabled is an ColorProperty and defaults to None.
set_icon(instance_switch, icon_value: str) → None
Fired when the values of icon_active and icon_inactive change.
on_line_color(instance, value) → None
Fired when the values of line_color change.
on_active(instance_switch, active_value: bool) → None
Fired when the values of active change.
on_thumb_down() → None
Fired at the on_touch_down event of the Thumb object. Indicates the state of the switch “on/off” by an
animation of increasing the size of the thumb.
2.3.35 TimePicker
See also:
Material Design spec, Date picker
MDTimePickerDialVertical
Time pickers allow people to enter a specific time value. They’re displayed in dialogs and can be used to select hours,
minutes, or periods of time.
They can be used for a wide range of scenarios. Common use cases include:
• Setting an alarm
• Scheduling a meeting
Time pickers are not ideal for nuanced or granular time selection, such as milliseconds for a stopwatch application.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_time_picker()
MDButtonText:
text: "Open time picker"
'''
(continues on next page)
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def show_time_picker(self):
time_picker = MDTimePickerDialVertical()
time_picker.open()
Example().run()
MDTimePickerDialHorizontal
The clock dial interface adapts to a device’s orientation. In landscape mode, the stacked input and selection options are
positioned side-by-side.
def show_time_picker(self):
MDTimePickerDialHorizontal().open()
Note: You must control the orientation of the time picker yourself.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release:
app.open_time_picker_horizontal("1", "10") if self.theme_cls.
˓→device_orientation == "landscape" else app.open_time_picker_vertical("1
˓→", "10")
MDButtonText:
text: "Open time picker"
'''
class Example(MDApp):
ORIENTATION = Literal["portrait", "landscape"]
time_picker_horizontal: MDTimePickerDialHorizontal = ObjectProperty(
allownone=True
)
time_picker_vertical: MDTimePickerDialHorizontal = ObjectProperty(
allownone=True
)
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.bind(device_orientation=self.check_orientation)
return Builder.load_string(KV)
def check_orientation(
self, instance: ThemeManager, orientation: ORIENTATION
):
if orientation == "portrait" and self.time_picker_horizontal:
self.time_picker_horizontal.dismiss()
hour = str(self.time_picker_horizontal.time.hour)
minute = str(self.time_picker_horizontal.time.minute)
Clock.schedule_once(
lambda x: self.open_time_picker_vertical(hour, minute),
0.1,
)
elif orientation == "landscape" and self.time_picker_vertical:
self.time_picker_vertical.dismiss()
hour = str(self.time_picker_vertical.time.hour)
minute = str(self.time_picker_vertical.time.minute)
Clock.schedule_once(
lambda x: self.open_time_picker_horizontal(hour, minute),
0.1,
)
Example().run()
MDTimePickerInput
Time input pickers allow people to specify a time using keyboard numbers. This input option should be accessible
from any other mobile time picker interface by tapping the keyboard icon.
def show_time_picker(self):
MDTimePickerInput().open()
Events
on_edit event
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_time_picker_vertical()
MDButtonText:
text: "Open time picker"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
on_hour_select event
def on_hour_select(
self, time_picker_vertical: MDTimePickerDialVertical, mode: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"On '{mode}' select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
on_minute_select event
def on_minute_select(
self, time_picker_vertical: MDTimePickerDialVertical, mode: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"On '{mode}' select",
),
(continues on next page)
on_am_pm event
def on_am_pm(
self, time_picker_vertical: MDTimePickerDialVertical, am_pm: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"'{am_pm.upper()}' select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
on_selector_hour event
def on_selector_hour(
self, time_picker_vertical: MDTimePickerDialVertical, hour: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"The value of the hour is `{hour}` select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
(continues on next page)
on_selector_minute event
def on_selector_minute(
self, time_picker_vertical: MDTimePickerDialVertical, minute: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"The value of the hour is `{minute}` select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
on_cancel event
def on_cancel(
self, time_picker_vertical: MDTimePickerDialVertical
):
time_picker_vertical.dismiss()
on_ok event
def on_ok(
self, time_picker_vertical: MDTimePickerDialVertical
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"Time is `{time_picker_vertical.time}`",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
on_time_input event
def on_time_input(
self,
time_picker_vertical: MDTimePickerInput,
type_time: str,
value: str,
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"The {type_time} value is set to {value}",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
API break
1.2.0 version
time_picker_dialog = MDTimePicker()
time_picker_dialog.open()
2.0.0 version
# time_picker_dialog = MDTimePickerDialVertical()
# time_picker_dialog = MDTimePickerDialHorizontal()
time_picker_dialog = MDTimePickerInput()
time_picker_dialog.open()
API - kivymd.uix.pickers.timepicker.timepicker
class kivymd.uix.pickers.timepicker.timepicker.MDBaseTimePicker(**kwargs)
Implements the base class of the time picker.
Added in version 2.0.0.
For more information, see in the ThemableBehavior and MotionTimePickerBehavior and BoxLayout and
classes documentation.
Events
on_cancel
Fired when the ‘Cancel’ button is pressed.
on_ok
Fired when the ‘Ok’ button is pressed.
on_dismiss
Fired when a date picker closes.
on_edit
Fired when you click on the date editing icon.
on_hour_select
Fired when the hour input field container is clicked.
on_minute_select
Fired when the minute input field container is clicked.
on_am_pm
Fired when the AP/PM switching elements are pressed.
on_selector_hour
Fired when switching the hour value in the clock face container.
on_selector_minute
Fired when switching the minute value in the clock face container.
hour
Current hour.
hour is an StringProperty and defaults to ‘12’.
minute
Current minute.
minute is an StringProperty and defaults to 0.
am_pm
Current AM/PM mode.
am_pm is an OptionProperty and defaults to ‘am’.
animation_duration
Duration of the animations.
animation_duration is an NumericProperty and defaults to 0.2.
animation_transition
Transition type of the animations.
animation_transition is an StringProperty and defaults to ‘out_quad’.
time
Returns the current time object.
time is an ObjectProperty and defaults to None.
headline_text
Headline text.
headline_text is an StringProperty and defaults to ‘Select time’.
text_button_ok
The text of the confirmation button.
text_button_ok is a StringProperty and defaults to ‘Ok’.
text_button_cancel
The text of the cancel button.
text_button_cancel is a StringProperty and defaults to ‘Cancel’.
radius
Container radius.
radius is an VariableListProperty and defaults to [dp(16), dp(16), dp(16), dp(16)].
is_open
Is the date picker dialog open.
is_open is a BooleanProperty and defaults to False.
scrim_color
Color for scrim in (r, g, b, a) or string format.
scrim_color is a ColorProperty and defaults to [0, 0, 0, 0.5].
set_time(time_obj: datetime.time) → None
Manually set time dialog with the specified time.
open() → None
Show the dialog time picker.
on_touch_down(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.
dismiss(*args) → None
Dismiss the dialog time picker.
on_dismiss(*args) → None
Fired when a time picker closes.
on_cancel(*args) → None
Fired when the ‘Cancel’ button is pressed.
on_ok(*args) → None
Fired when the ‘Ok’ button is pressed.
on_hour_select(*args) → None
Fired when the hour input field container is clicked.
on_minute_select(*args) → None
Fired when the minute input field container is clicked.
on_am_pm(*args) → None
Fired when the AP/PM switching elements are pressed.
on_edit(*args) → None
Fired when you click on the time editing icon.
on_selector_hour(*args) → None
Fired when switching the hour value in the clock face container.
on_selector_minute(*args) → None
Fired when switching the minute value in the clock face container.
on_time_input(*args) → None
Fired when switching the minute value in the clock face container.
class kivymd.uix.pickers.timepicker.timepicker.MDTimePickerInput(**kwargs)
Implements input time picker.
Added in version 2.0.0.
For more information, see in the CommonElevationBehavior and MDBaseTimePicker classes documentation.
class kivymd.uix.pickers.timepicker.timepicker.MDTimePickerDialVertical(**kwargs)
Implements vertical time picker.
Added in version 2.0.0.
For more information, see in the CommonElevationBehavior and MDBaseTimePicker classes documentation.
class kivymd.uix.pickers.timepicker.timepicker.MDTimePickerDialHorizontal(**kwargs)
Implements horizontal time picker.
Added in version 2.0.0.
For more information, see in the CommonElevationBehavior and MDBaseTimePicker classes documentation.
2.3.36 DatePicker
See also:
Material Design spec, Date picker
MDDockedDatePicker
Docked datepickers allow the selection of a specific date and year. The docked datepicker displays a date input field
by default, and a dropdown calendar appears when the user taps on the input field. Either form of date entry can be
interacted with.
Docked date pickers are ideal for navigating dates in both the near future or past and the distant future or past, as they
provide multiple ways to select dates.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTextField:
id: field
mode: "outlined"
pos_hint: {'center_x': .5, 'center_y': .85}
size_hint_x: .5
on_focus: app.show_date_picker(self.focus)
MDTextFieldHintText:
text: "Docked date picker"
MDTextFieldHelperText:
text: "MM/DD/YYYY"
mode: "persistent"
MDTextFieldTrailingIcon:
icon: "calendar"
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
date_dialog = MDDockedDatePicker()
# You have to control the position of the date picker dialog yourself.
date_dialog.pos = [
self.root.ids.field.center_x - date_dialog.width / 2,
self.root.ids.field.y - (date_dialog.height + dp(32)),
]
date_dialog.open()
Example().run()
MDModalDatePicker
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_date_picker()
MDButtonText:
text: "Open modal date picker dialog"
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
MDModalInputDatePicker
Modal date inputs allow the manual entry of dates using the numbers on a keyboard. Users can input a date or a range
of dates in a dialog.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_date_picker()
MDButtonText:
text: "Open modal date picker dialog"
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
def show_date_picker(self):
date_dialog = MDModalInputDatePicker()
date_dialog.open()
Example().run()
To display only the selected date range, use the min_date and max_date parameters:
To select the date range, use the mode parameter with the value “range”:
Events
on_edit event
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButtonText:
text: "Open modal date picker dialog"
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
date_dialog = MDModalInputDatePicker()
date_dialog.bind(on_edit=on_edit)
date_dialog.open()
Example().run()
on_select_day event
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
(continues on next page)
MDButtonText:
text: "Open modal date picker dialog"
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
on_select_month event
on_select_year event
on_cancel event
on_ok event
import datetime
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_modal_date_picker()
MDButtonText:
text: "Open modal date picker dialog"
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
API break
1.2.0 version
date_dialog = MDDatePicker()
date_dialog.open()
2.0.0 version
# date_dialog = MDModalDatePicker()
# date_dialog = MDModalInputDatePicker()
date_dialog = MDDockedDatePicker()
date_dialog.open()
API - kivymd.uix.pickers.datepicker.datepicker
month
The number of month to be opened by default. If not specified, the current number will be used.
month is an NumericProperty and defaults to 0.
year
The year of month to be opened by default. If not specified, the current number will be used.
year is an NumericProperty and defaults to 0.
min_year
The year of month to be opened by default. If not specified, the current number will be used.
min_year is an NumericProperty and defaults to 1914.
max_year
The year of month to be opened by default. If not specified, the current number will be used.
max_year is an NumericProperty and defaults to 2121.
mode
Dialog type. Available options are: ‘picker’, ‘range’.
mode is an OptionProperty and defaults to picker.
min_date
The minimum value of the date range for the ‘mode’ parameter. Must be an object <class ‘datetime.date’>.
min_date is an ObjectProperty and defaults to None.
max_date
The minimum value of the date range for the ‘mode’ parameter. Must be an object <class ‘datetime.date’>.
max_date is an ObjectProperty and defaults to None.
radius
Container radius.
radius is an VariableListProperty and defaults to [dp(16), dp(16), dp(16), dp(16)].
scrim_color
Color for scrim in (r, g, b, a) or string format.
scrim_color is a ColorProperty and defaults to [0, 0, 0, 0.5].
supporting_text
Supporting text.
supporting_text is a StringProperty and defaults to ‘Select date’.
text_button_ok
The text of the confirmation button.
text_button_ok is a StringProperty and defaults to ‘Ok’.
text_button_cancel
The text of the cancel button.
text_button_cancel is a StringProperty and defaults to ‘Cancel’.
mark_today
Highlights the current day.
mark_today is a BooleanProperty and defaults to True.
is_open
Is the date picker dialog open.
is_open is a BooleanProperty and defaults to False.
sel_year
sel_month
sel_day
calendar_layout
get_date(*args) → list
Returns a list of dates in the format [datetime.date(yyyy, mm, dd), . . . ]. The list has two dates if you use a
date interval.
set_text_full_date() → str
Returns a string like “Tue, Feb 2”.
compare_date_range() → None
set_selected_widget(widget) → None
restore_calendar_layout_properties() → None
set_calendar_layout_properties(method) → None
dismiss(*args) → None
Dismiss the dialog date picker.
open() → None
Show the dialog date picker.
on_touch_down(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_select_day(*args) → None
Fired when a day is selected.
on_select_month(*args) → None
Fired when a month is selected.
on_select_year(*args) → None
Fired when a year is selected.
on_cancel(*args) → None
Fired when the ‘Cancel’ button is pressed.
on_ok(*args) → None
Fired when the ‘Ok’ button is pressed.
on_edit(*args) → None
Fired when you click on the date editing icon.
on_dismiss(*args) → None
Fired when a date picker closes.
class kivymd.uix.pickers.datepicker.datepicker.MDDockedDatePicker(**kwargs)
Implements docked date picker.
Added in version 2.0.0.
For more information, see in the CommonElevationBehavior and MDBaseDatePicker classes documentation.
open() → None
Show the dialog date picker.
generate_list_widgets_years() → None
open_menu_year_selection(*args) → None
date_format
Format of date strings that will be entered. Available options are: ‘dd/mm/yyyy’, ‘mm/dd/yyyy’,
‘yyyy/mm/dd’.
date_format is an OptionProperty and defaults to None.
default_input_date
If true, the current date will be set in the input field.
default_input_date is a BooleanProperty and defaults to True.
error_text
Error text when the date entered by the user is not valid.
error_text is a StringProperty and defaults to ‘Invalid date format’.
supporting_input_text
Auxiliary text when entering the date manually.
supporting_input_text is a StringProperty and defaults to ‘Enter date’.
generate_list_widgets_days() → None
update_calendar(*args) → None
get_date(*args) → list
Returns a list of dates in the format [datetime.date(yyyy, mm, dd), . . . ]. The list has two dates if you use a
date interval.
get_current_date_from_format() → str
Returns the date according to the set format in date_format.
open() → None
Show the dialog date picker.
2.3.37 Divider
Dividers are thin lines that group content in lists or other containers.
HorizontalDivider
Dividers are one way to visually group components and create hierarchy. They can also be used to imply nested
parent/child relationships.
KV = '''
(continues on next page)
MDDivider:
size_hint_x: .5
pos_hint: {'center_x': .5, 'center_y': .5}
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
VerticalDivider
A vertical divider can be used to arrange content on a larger screen, such as separating paragraph text from video or
imagery media.
MDDivider:
size_hint_y: .5
orientation: "vertical"
API break
1.2.0 version
MDSeparator:
[...]
2.0.0 version
MDDivider:
[...]
API - kivymd.uix.divider.divider
class kivymd.uix.divider.divider.MDDivider(**kwargs)
A divider line.
Added in version 2.0.0.
For more information, see in the BoxLayout class documentation.
color
Divider color in (r, g, b, a) or string format.
color is a ColorProperty and defaults to None.
divider_width
Divider width.
divider_width is an NumericProperty and defaults to dp(1).
on_orientation(*args) → None
Fired when the values of orientation change.
2.3.38 ImageList
See also:
Material Design spec, Image lists
Usage
MDSmartTile:
[...]
MDSmartTileImage:
[...]
MDSmartTileOverlayContainer:
[...]
# Content
[...]
Anatomy
Example
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDSmartTile:
pos_hint: {"center_x": .5, "center_y": .5}
size_hint: None, None
size: "320dp", "320dp"
overlap: False
MDSmartTileImage:
source: "bg.jpg"
radius: [dp(24), dp(24), 0, 0]
MDSmartTileOverlayContainer:
md_bg_color: 0, 0, 0, .5
adaptive_height: True
padding: "8dp"
spacing: "8dp"
radius: [0, 0, dp(24), dp(24)]
MDIconButton:
(continues on next page)
MDLabel:
text: "Ibanez GRG121DX-BKF"
theme_text_color: "Custom"
text_color: "white"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
API break
1.2.0 version
MDSmartTile:
[...]
# Content.
MDIconButton:
[...]
MDLabel:
[...]
2.0.0 version
MDSmartTile:
[...]
MDSmartTileImage:
[...]
MDSmartTileOverlayContainer:
[...]
# Content.
[...]
API - kivymd.uix.imagelist.imagelist
class kivymd.uix.imagelist.imagelist.MDSmartTileImage(**kwargs)
Implements the tile image.
Changed in version 2.0.0: The SmartTileImage class has been renamed to MDSmartTileImage.
For more information, see in the RectangularRippleBehavior and ButtonBehavior and FitImage classes
documentation.
class kivymd.uix.imagelist.imagelist.MDSmartTileOverlayContainer(*args, **kwargs)
Implements a container for custom widgets to be added to the tile.
Changed in version 2.0.0: The SmartTileOverlayBox class has been renamed to MDSmartTileOverlayContainer.
For more information, see in the BoxLayout class documentation.
class kivymd.uix.imagelist.imagelist.MDSmartTile(**kwargs)
A tile for more complex needs.
For more information, see in the MDRelativeLayout class documentation.
Includes an image, a container to place overlays and a box that can act as a header or a footer, as described in the
Material Design specs.
Events
on_press
Fired when the button is pressed.
on_release
Fired when the button is released (i.e. the touch/click that pressed the button goes away).
overlay_mode
Determines weather the information box acts as a header or footer to the image. Available are options:
‘footer’, ‘header’.
Changed in version 2.0.0: The box_position attribute has been renamed to overlay_mode.
2.3.39 Swiper
Usage
MDSwiper:
MDSwiperItem:
MDSwiperItem:
MDSwiperItem:
Example
kv = '''
<MySwiper@MDSwiperItem>
FitImage:
source: "bg.jpg"
radius: [dp(20),]
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDSwiper:
size_hint_y: None
height: root.height - dp(40)
y: root.height - self.height - dp(20)
MySwiper:
MySwiper:
MySwiper:
MySwiper:
MySwiper:
'''
class Main(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
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")
API - kivymd.uix.swiper.swiper
swipe_transition
The type of animation used for swiping.
swipe_transition is an StringProperty and defaults to out_quad.
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(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.
Added 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.
Added in version 1.9.0.
remove_widget(widget)
Remove a widget from the children of this widget.
Parameters
widget: Widget
Widget to remove from our children list.
set_current(index)
Switch to given MDSwiperItem index.
get_current_index()
Returns the current MDSwiperItem index.
get_current_item()
Returns the current MDSwiperItem instance.
get_items()
Returns the list of MDSwiperItem children.
on_swipe()
on_pre_swipe()
on_overswipe_right()
on_overswipe_left()
on_swipe_left()
on_swipe_right()
swipe_left()
swipe_right()
on_scroll_start(touch, check_children=True)
on_touch_down(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(touch)
Receive a touch up event. The touch is in parent coordinates.
See on_touch_down() for more information.
2.3.40 RefreshLayout
Example
Builder.load_string('''
<ItemForList>
text: root.text
IconLeftSampleWidget:
icon: root.icon
<Example@MDFloatLayout>
MDBoxLayout:
orientation: 'vertical'
MDTopAppBar:
title: app.title
md_bg_color: app.theme_cls.primary_color
background_palette: 'Primary'
elevation: 4
left_action_items: [['menu', lambda x: x]]
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())
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
refresh_done() → None
2.3.41 Tooltip
See also:
Material Design spec, Tooltips
KV = '''
<YourTooltipClass>
MDTooltipPlain:
text:
"Grant value is calculated using the closing stock price \\n" \
"from the day before the grant date. Amounts do not \\n" \
"reflect tax witholdings."
<TooltipMDIconButton>
MDButtonText:
text: root.text
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
TooltipMDIconButton:
text: "Tooltip button"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class YourTooltipClass(MDTooltip):
'''Implements your tooltip base class.'''
text = StringProperty()
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
KV = '''
<YourTooltipClass>
MDTooltipRich:
id: tooltip
auto_dismiss: False
MDTooltipRichSubhead:
text: "Add others"
MDTooltipRichSupportingText:
text:
"Grant value is calculated using the closing stock price \\n" \
"from the day before the grant date. Amounts do not \\n" \
"reflect tax witholdings."
MDTooltipRichActionButton:
on_press: tooltip.dismiss()
MDButtonText:
text: "Learn more"
<TooltipMDIconButton>
MDButtonText:
text: root.text
(continues on next page)
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
TooltipMDIconButton:
text: "Tooltip button"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class YourTooltipClass(MDTooltip):
'''Implements your tooltip base class.'''
text = StringProperty()
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.tooltip.tooltip
class kivymd.uix.tooltip.tooltip.MDTooltip(**kwargs)
Tooltip class.
For more information, see in the TouchBehavior class documentation.
Events
on_open:
Fired when the tooltip opens.
on_dismiss:
Fired when the tooltip is closed.
tooltip_display_delay
Tooltip display delay.
auto_dismiss
This property determines if the view is automatically dismissed when the cursor goes outside of the tooltip
body.
auto_dismiss is a BooleanProperty and defaults to True.
on_leave() → None
Fired when the mouse goes outside the widget border.
dismiss() → None
Hides the tooltip.
2.3.42 Chip
See also:
Material Design 3 spec, Chips
Chips can show multiple interactive elements together in the same area, such as a list of selectable
movie times, or a series of email contacts. There are four types of chips: assist, filter, input, and
suggestion.
Usage
MDChip:
MDChipLeadingAvatar: # MDChipLeadingIcon
MDChipText:
MDChipTrailingIcon:
Anatomy
Example
Declarative KV style
KV = '''
MDScreen:
MDChip:
pos_hint: {"center_x": .5, "center_y": .5}
MDChipText:
text: "MDChip"
'''
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(
MDChip(
MDChipText(
(continues on next page)
Example().run()
• Assist
• Filter
• Input
• Suggestion
Assist
Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from
the home screen. Assist chips function as though the user asked an assistant to complete the action. They should appear
dynamically and contextually in a UI.
An alternative to assist chips are buttons, which should appear persistently and consistently.
Example of assist
KV = '''
<CommonLabel@MDLabel>
adaptive_size: True
theme_text_color: "Custom"
text_color: "#e6e9df"
<CommonAssistChip@MDChip>
# Custom attribute.
text: ""
icon: ""
# Chip attribute.
type: "assist"
md_bg_color: "#2a3127"
line_color: "grey"
elevation: 1
shadow_softness: 2
MDChipLeadingIcon:
icon: root.icon
theme_text_color: "Custom"
text_color: "#68896c"
MDScreen:
FitImage:
source: "bg.png"
MDBoxLayout:
orientation: "vertical"
adaptive_size: True
pos_hint: {"center_y": .6, "center_x": .5}
CommonLabel:
text: "in 10 mins"
bold: True
pos_hint: {"center_x": .5}
CommonLabel:
text: "Therapy with Thea"
font_style: "H3"
padding_y: "12dp"
CommonLabel:
text: "Video call"
font_style: "H5"
pos_hint: {"center_x": .5}
MDBoxLayout:
adaptive_size: True
pos_hint: {"center_x": .5}
spacing: "12dp"
padding: 0, "24dp", 0, 0
CommonAssistChip:
text: "Home office"
icon: "map-marker"
CommonAssistChip:
text: "Chat"
icon: "message"
MDWidget:
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Teal"
(continues on next page)
Example().run()
Filter
Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or check-
boxes.
Tapping on a filter chip activates it and appends a leading checkmark icon to the starting edge of the chip label.
Example of filtering
import asynckivy
Builder.load_string(
'''
<CustomOneLineIconListItem>
MDListItemLeadingIcon:
icon: root.icon
MDListItemHeadlineText:
text: root.text
<PreviewIconsScreen>
MDBoxLayout:
orientation: "vertical"
spacing: "14dp"
padding: "20dp"
MDTextField:
id: search_field
mode: "outlined"
on_text: root.set_list_md_icons(self.text, True)
MDTextFieldLeadingIcon:
icon: "magnify"
MDTextFieldHintText:
text: "Search icon"
MDBoxLayout:
id: chip_box
spacing: "12dp"
adaptive_height: True
RecycleView:
id: rv
viewclass: "CustomOneLineIconListItem"
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(MDListItem):
icon = StringProperty()
text = StringProperty()
class PreviewIconsScreen(MDScreen):
filter = ListProperty() # list of tags for filtering icons
def set_filter_chips(self):
'''Asynchronously creates and adds chips to the container.'''
asynckivy.start(set_filter_chips())
if active:
self.filter.append(tag)
else:
self.filter.remove(tag)
def add_icon_item(name_icon):
self.ids.rv.data.append(
{
"icon": name_icon,
"text": name_icon,
}
)
self.ids.rv.data = []
for name_icon in md_icons.keys():
for tag in self.filter:
if tag.lower() in name_icon:
if search:
if text in name_icon:
add_icon_item(name_icon)
else:
add_icon_item(name_icon)
class Example(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = PreviewIconsScreen()
Example().run()
import asynckivy
Builder.load_string(
'''
<ChipScreen>
MDBoxLayout:
orientation: "vertical"
spacing: "14dp"
padding: "20dp"
MDLabel:
adaptive_height: True
text: "Select Type"
MDStackLayout:
id: chip_box
spacing: "12dp"
adaptive_height: True
MDWidget:
MDButton:
pos: "20dp", "20dp"
on_release: root.unchecks_chips()
MDButtonText:
text: "Uncheck chips"
'''
)
class ChipScreen(MDScreen):
async def create_chips(self):
'''Asynchronously creates and adds chips to the container.'''
(continues on next page)
class Example(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = ChipScreen()
Example().run()
Alternatively, a single chip can be selected. This offers an alternative to toggle buttons, radio buttons, or single select
menus:
from kivy.lang import Builder
import asynckivy
Builder.load_string(
'''
<ChipScreen>
(continues on next page)
MDBoxLayout:
orientation: "vertical"
spacing: "14dp"
padding: "20dp"
MDLabel:
adaptive_height: True
text: "Select Type"
MDStackLayout:
id: chip_box
spacing: "12dp"
adaptive_height: True
MDWidget:
'''
)
class ChipScreen(MDScreen):
async def create_chips(self):
'''Asynchronously creates and adds chips to the container.'''
)
chip.bind(active=self.uncheck_chip)
self.ids.chip_box.add_widget(chip)
if active:
for chip in self.ids.chip_box.children:
if current_chip is not chip:
if chip.active:
chip.active = False
class Example(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = ChipScreen()
Example().run()
Input
Input chips represent discrete pieces of information entered by a user, such as Gmail contacts or filter options within a
search field.
They enable user input and verify that input by converting text into chips.
Example of input
KV = '''
MDScreen:
MDChipLeadingAvatar:
source: "data/logo/kivy-icon-128.png"
MDChipText:
text: "MDChip"
MDChipTrailingIcon:
icon: "close"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
Suggestion
Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions, such as possible re-
sponses or search filters.
Example of suggestion
KV = '''
MDScreen:
MDChip:
pos_hint: {"center_x": .5, "center_y": .5}
type: "suggestion"
line_color: "grey"
MDChipText:
text: "MDChip"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
API break
1.2.0 version
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()
2.0.0 version
KV = '''
MDScreen:
MDChip:
pos_hint: {"center_x": .5, "center_y": .5}
line_color: "grey"
(continues on next page)
MDChipText:
text: "MDChip"
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.chip.chip
class kivymd.uix.chip.chip.MDChipLeadingAvatar(**kwargs)
Implements the leading avatar for the chip.
For more information, see in the CircularRippleBehavior and ScaleBehavior and ButtonBehavior and
MDIcon classes documentation.
class kivymd.uix.chip.chip.MDChipLeadingIcon(**kwargs)
Implements the leading icon for the chip.
For more information, see in the CircularRippleBehavior and ScaleBehavior and ButtonBehavior and
MDIcon classes documentation.
class kivymd.uix.chip.chip.MDChipTrailingIcon(**kwargs)
Implements the trailing icon for the chip.
For more information, see in the CircularRippleBehavior and ScaleBehavior and ButtonBehavior and
MDIcon classes documentation.
class kivymd.uix.chip.chip.MDChipText(*args, **kwargs)
Implements the label for the chip.
For more information, see in the MDLabel classes documentation.
text_color_disabled
The text color in (r, g, b, a) or string format of the chip when the chip is disabled.
Added in version 2.0.0.
text_color_disabled is a ColorProperty and defaults to None.
class kivymd.uix.chip.chip.MDChip(*args, **kwargs)
Chip class.
For more information, see in the MDBoxLayout and RectangularRippleBehavior and ButtonBehavior and
CommonElevationBehavior and TouchBehavior classes documentation.
radius
Chip radius.
radius is an VariableListProperty and defaults to [dp(8), dp(8), dp(8), dp(8)].
type
Type of chip.
Added in version 2.0.0.
Available options are: ‘assist’, ‘filter’, ‘input’, ‘suggestion’.
type is an OptionProperty and defaults to ‘suggestion’.
active
Whether the check is marked or not.
Added in version 1.0.0.
active is an BooleanProperty and defaults to False.
selected_color
The background color of the chip in the marked state in (r, g, b, a) or string format.
Added in version 2.0.0.
selected_color is an ColorProperty and defaults to None.
line_color_disabled
The color of the outline in the disabled state
Added in version 2.0.0.
line_color_disabled is an ColorProperty and defaults to None.
on_long_touch(*args) → None
Fired when the widget is pressed for a long time.
on_line_color(instance, value) → None
Fired when the values of line_color change.
on_type(instance, value: str) → None
Fired when the values of type change.
on_active(instance_check, active_value: bool) → None
Called when the values of active change.
complete_anim_ripple(*args) → None
Called at the end of the ripple animation.
remove_marked_icon_from_chip() → None
add_marked_icon_to_chip() → None
Adds and animates a check icon to the chip.
set_chip_bg_color(color: list | str) → None
Animates the background color of the chip.
on_press(*args) → None
Fired when the button is pressed.
on_release(*args) → None
Fired when the button is released (i.e. the touch/click that pressed the button goes away).
add_widget(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.
Added 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.
Added in version 1.9.0.
2.3.43 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
Root:
MDNavigationLayout:
MDScreenManager:
[...]
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.
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.
MDBottomSheet:
MDBottomSheetDragHandle:
MDBottomSheetDragHandleTitle:
text: "MDBottomSheet"
adaptive_height: True
pos_hint: {"center_y": .5}
MDBottomSheetDragHandleButton:
icon: "close"
import asynckivy
KV = '''
#:import MapSource kivy_garden.mapview.MapSource
#:import asynckivy asynckivy
<TypeMapElement>
(continues on next page)
MDIconButton:
id: icon
icon: root.icon
theme_bg_color: "Custom"
md_bg_color: "#EDF1F9" if not root.selected else app.theme_cls.primaryColor
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:
text: root.title
pos_hint: {"center_x": .5}
halign: "center"
adaptive_height: True
MDScreen:
MDNavigationLayout:
MDScreenManager:
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
sheet_type: "standard"
size_hint_y: None
height: "150dp"
on_open: asynckivy.start(app.generate_content())
MDBottomSheetDragHandle:
drag_handle_color: "grey"
MDBottomSheetDragHandleTitle:
text: "Select type map"
pos_hint: {"center_y": .5}
MDBottomSheetDragHandleButton:
icon: "close"
(continues on next page)
BoxLayout:
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 break
1.2.0 version
Root:
MDBottomSheet:
# Optional.
MDBottomSheetDragHandle:
# Optional.
MDBottomSheetDragHandleTitle:
# Optional.
MDBottomSheetDragHandleButton:
MDBottomSheetContent:
[...]
2.0.0 version
Root:
MDNavigationLayout:
MDScreenManager:
# Your screen.
MDScreen:
MDBottomSheet:
# Optional.
MDBottomSheetDragHandle:
# Optional.
MDBottomSheetDragHandleTitle:
(continues on next page)
# Optional.
MDBottomSheetDragHandleButton:
icon: "close"
# Your content.
BoxLayout:
API - kivymd.uix.bottomsheet.bottomsheet
class kivymd.uix.bottomsheet.bottomsheet.MDBottomSheetDragHandleButton(**kwargs)
Implements a close button (or other functionality) for the MDBottomSheetDragHandle container.
For more information, see in the MDIconButton class documentation.
Added in version 1.2.0.
class kivymd.uix.bottomsheet.bottomsheet.MDBottomSheetDragHandleTitle(*args, **kwargs)
Implements a header for the MDBottomSheetDragHandle container.
For more information, see in the MDLabel class documentation.
Added in version 1.2.0.
class kivymd.uix.bottomsheet.bottomsheet.MDBottomSheetDragHandle(**kwargs)
Implements a container that can place the header of the bottom sheet and the close button. Also implements the
event of dragging the bottom sheet on the parent screen.
For more information, see in the BoxLayout class documentation.
Added in version 1.2.0.
drag_handle_color
Color of drag handle element in (r, g, b, a) or string format.
MDBottomSheet:
MDBottomSheetDragHandle:
drag_handle_color: "white"
on_touch_move(touch)
Receive a touch move event. The touch is in parent coordinates.
See on_touch_down() for more information.
2.3.44 Slider
See also:
Material Design spec, Sliders
• Sliders should present the full range of choices that are available
• Two types: continuous and discrete
• The slider should immediately reflect any input made by a user
1. Continuous slider
2. Discrete slider
Usage
MDSlider(
MDSliderHandle(
),
MDSliderValueLabel(
),
step=10,
value=50,
)
MDSlider:
step: 10
value: 50
MDSliderHandle:
MDSliderValueLabel:
Anatomy
API - kivymd.uix.slider.slider
value_container_show_anim_duration
Duration of the animation opening of the label value.
Added in version 2.0.0.
value_container_show_anim_duration is an NumericProperty and defaults to 0.2.
value_container_hide_anim_duration
Duration of closing the animation of the label value.
Added in version 2.0.0.
value_container_hide_anim_duration is an NumericProperty and defaults to 0.2.
value_container_show_anim_transition
The type of the opening animation of the label value.
Added in version 2.0.0.
value_container_show_anim_transition is an StringProperty and defaults to ‘out_circ’.
value_container_hide_anim_transition
The type of the closing animation of the label value.
Added in version 2.0.0.
value_container_hide_anim_transition is an StringProperty and defaults to ‘out_circ’.
handle_anim_transition
Handle animation type.
Added in version 2.0.0.
handle_anim_transition is an StringProperty and defaults to ‘out_circ’.
handle_anim_duration
Handle animation duration.
Added in version 2.0.0.
handle_anim_duration is an NumericProperty and defaults to 0.2.
add_widget(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.
Added 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.
Added in version 1.9.0.
size
Handle size.
size is an ListProperty and defaults to [dp(20), dp(20)].
state_layer_size
Handle state layer size.
state_layer_size is an ListProperty and defaults to [dp(40), dp(40)].
state_layer_color
Handle state layer color.
state_layer_color is an ColorProperty and defaults to None.
on_enter() → None
Fired when mouse enter the bbox of the widget. Animates the display of the slider handle layer.
on_leave() → None
Fired when the mouse goes outside the widget border. Animates the hiding of the slider handle layer.
class kivymd.uix.slider.slider.MDSliderValueLabel(*args, **kwargs)
Implements the value label.
For more information, see in the MDLabel class documentation.
Added in version 2.0.0.
size
Container size for the label value.
handle_anim_transition is an ListProperty and defaults to [dp(36), dp(36)].
2.3.45 SliverAppbar
MDSliverAppbar is a Material Design widget in KivyMD which gives scrollable or collapsible MD-
TopAppBar
Usage
MDScreen:
MDSliverAppbar:
MDTopAppBar:
[...]
MDSliverAppbarHeader:
# Custom content.
[...]
# Custom list.
MDSliverAppbarContent:
Anatomy
Example
KV = '''
<GuitarItem>
theme_bg_color: "Custom"
md_bg_color: "2d4a50"
MDListItemLeadingAvatar
source: "avatar.png"
MDListItemHeadlineText:
(continues on next page)
MDListItemSupportingText:
text: "GRG121DX-BKF"
MDListItemTertiaryText:
text: "$445,99"
MDListItemTrailingIcon:
icon: "guitar-electric"
MDScreen:
MDSliverAppbar:
background_color: "2d4a50"
hide_appbar: True
MDTopAppBar:
type: "medium"
MDTopAppBarLeadingButtonContainer:
MDActionTopAppBarButton:
icon: "arrow-left"
MDTopAppBarTitle:
text: "Sliver toolbar"
MDTopAppBarTrailingButtonContainer:
MDActionTopAppBarButton:
icon: "attachment"
MDActionTopAppBarButton:
icon: "calendar"
MDActionTopAppBarButton:
icon: "dots-vertical"
MDSliverAppbarHeader:
FitImage:
source: "bg.jpg"
MDSliverAppbarContent:
id: content
orientation: "vertical"
padding: "12dp"
theme_bg_color: "Custom"
md_bg_color: "2d4a50"
'''
(continues on next page)
class GuitarItem(MDListItem):
...
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def on_start(self):
for x in range(10):
self.root.ids.content.add_widget(GuitarItem())
Example().run()
API break
1.2.0 version
Root:
MDSliverAppbar:
[...]
MDSliverAppbarHeader:
[...]
MDSliverAppbarContent:
[...]
class SliverToolbar(MDTopAppBar):
[...]
2.0.0 version
Root:
MDSliverAppbar:
[...]
MDTopAppBar:
[...]
(continues on next page)
MDSliverAppbarHeader:
[...]
MDSliverAppbarContent:
[...]
API - kivymd.uix.sliverappbar.sliverappbar
MDSliverAppbar:
max_height: "200dp"
MDSliverAppbar:
hide_appbar: False
MDSliverAppbar:
hide_appbar: True
MDSliverAppbar:
radius: 20
MDSliverAppbar:
max_opacity: .5
on__appbar(instance, value)
2.3.46 NavigationRail
Example
Declarative KV style
KV = '''
<CommonNavigationRailItem>
MDNavigationRailItemLabel:
text: root.text
MDBoxLayout:
MDNavigationRail:
type: "selected"
MDNavigationRailMenuButton:
icon: "menu"
MDNavigationRailFabButton:
icon: "home"
CommonNavigationRailItem:
icon: "folder-outline"
text: "Files"
CommonNavigationRailItem:
icon: "bookmark-outline"
text: "Bookmark"
CommonNavigationRailItem:
icon: "library-outline"
text: "Library"
MDScreen:
md_bg_color: self.theme_cls.secondaryContainerColor
'''
class CommonNavigationRailItem(MDNavigationRailItem):
text = StringProperty()
icon = StringProperty()
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
class CommonNavigationRailItem(MDNavigationRailItem):
text = StringProperty()
icon = StringProperty()
class Example(MDApp):
def build(self):
return MDBoxLayout(
MDNavigationRail(
MDNavigationRailMenuButton(
icon="menu",
),
MDNavigationRailFabButton(
icon="home",
),
CommonNavigationRailItem(
icon="bookmark-outline",
text="Files",
),
CommonNavigationRailItem(
icon="folder-outline",
text="Bookmark",
),
CommonNavigationRailItem(
icon="library-outline",
text="Library",
),
type="selected",
),
(continues on next page)
Example().run()
Anatomy
MDNavigationRail:
# Optional.
MDNavigationRailMenuButton:
icon: "menu"
# Optional.
MDNavigationRailFabButton:
icon: "home"
MDNavigationRailItem
MDNavigationRailItemIcon:
icon: icon
MDNavigationRailItemLabel:
text: text
[...]
Anatomy item
MDNavigationRailItem
MDNavigationRailItemIcon:
icon: icon
MDNavigationRailItemLabel:
text: text
Configurations
Rail types
1. Selected
2. Unselected
3. Labeled
Selected
MDNavigationRail:
type: "selected" # default
Unselected
MDNavigationRail:
type: "unselected"
Labeled
MDNavigationRail:
type: "labeled"
Rail anchored
1. Top
2. Center
3. Bottom
Top
MDNavigationRail:
anchor: "top"
Center
MDNavigationRail:
anchor: "center" # default
Bottom
MDNavigationRail:
anchor: "bottom"
API break
1.2.0 version
MDNavigationRail:
MDNavigationRailMenuButton:
icon: "menu"
MDNavigationRailFabButton:
icon: "home"
MDNavigationRailItem:
icon: icon
text: text
[...]
2.2.0 version
MDNavigationRail:
MDNavigationRailMenuButton:
icon: "menu"
MDNavigationRailFabButton:
icon: "home"
MDNavigationRailItem
MDNavigationRailItemLabel:
text: text
[...]
API - kivymd.uix.navigationrail.navigationrail
class kivymd.uix.navigationrail.navigationrail.MDNavigationRailFabButton(**kwargs)
Implements a floating action button (FAB).
For more information, see in the MDFabButton class documentation.
md_bg_color_disabled
The background color in (r, g, b, a) or string format of the switch when the widget is disabled.
md_bg_color_disabled is a ColorProperty and defaults to None.
class kivymd.uix.navigationrail.navigationrail.MDNavigationRailMenuButton(**kwargs)
Implements a menu button.
For more information, see in the MDIconButton class documentation.
md_bg_color_disabled
The background color in (r, g, b, a) or string format of the switch when the widget is disabled.
md_bg_color_disabled is a ColorProperty and defaults to None.
class kivymd.uix.navigationrail.navigationrail.MDNavigationRailItemIcon(*args, **kwargs)
Implements an icon for the MDNavigationRailItem class.
For more information, see in the RectangularRippleBehavior and MDIcon classes documentation.
Changed in version 2.0.0.
active_indicator_color
Background color of the active indicator in (r, g, b, a) or string format.
active_indicator_color is an ColorProperty and defaults to None.
anim_complete(*args)
Fired when the “fade_out” animation complete.
lay_canvas_instructions() → None
Adds graphic instructions to the canvas to implement ripple animation.
class kivymd.uix.navigationrail.navigationrail.MDNavigationRailItemLabel(*args, **kwargs)
Implements an label for the MDNavigationRailItem class.
For more information, see in the ScaleBehavior and MDLabel classes documentation.
Changed in version 2.0.0.
scale_value_y
Y-axis value.
scale_value_y is an NumericProperty and defaults to 0.
on__active(instance, value) → None
Fired when the _active value changes.
class kivymd.uix.navigationrail.navigationrail.MDNavigationRailItem(*args, **kwargs)
Implements a menu item with an icon and text.
For more information, see in the DeclarativeBehavior and ButtonBehavior and ThemableBehavior and
FocusBehavior BoxLayout classes documentation.
active
Is the element active.
active is an BooleanProperty and defaults to False.
radius
Item radius.
Changed in version 2.0.0.
radius is an VariableListProperty and defaults to [0, 0, 0, 0].
on_active(instance, value) → None
Fired when the active value changes.
on_enter(*args) → None
Fired when mouse enter the bbox of the widget.
on_leave(*args) → None
Fired when the mouse goes outside the widget border.
add_widget(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.
Added 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.
Added in version 1.9.0.
menu_button: MDNavigationRailFabButton
on_size(*args) → None
Fired when the application screen size changes.
get_items() → list
Returns a list of MDNavigationRailItem objects.
set_active_item(item: MDNavigationRailItem) → None
Sets the active menu list item.
add_widget(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.
Added 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.
Added in version 1.9.0.
2.3.47 Tabs
See also:
Material Design spec, Tabs
Tabs organize content across different screens, data sets, and other interactions.
1. Primary tabs
2. Secondary tabs
Primary tabs should be used when just one set of tabs are needed.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsPrimary:
id: tabs
pos_hint: {"center_x": .5, "center_y": .5}
MDDivider:
'''
class Example(MDApp):
def on_start(self):
for tab_icon, tab_name in {
"airplane": "Flights",
"treasure-chest": "Trips",
"compass-outline": "Explore",
}.items():
if tab_icon == "treasure-chest":
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
MDTabsBadge(
text="99",
),
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
)
)
else:
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
icon=tab_icon,
),
(continues on next page)
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
Secondary tabs are necessary when a screen requires more than one level of tabs. These tabs use a simpler style of
indicator, but their function is identical to primary tabs.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsSecondary:
id: tabs
pos_hint: {"center_x": .5, "center_y": .5}
MDDivider:
'''
class Example(MDApp):
def on_start(self):
for tab_icon, tab_name in {
"airplane": "Flights",
"treasure-chest": "Trips",
"compass-outline": "Explore",
}.items():
if tab_icon == "treasure-chest":
self.root.ids.tabs.add_widget(
MDTabsItemSecondary(
MDTabsItemIcon(
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
MDTabsBadge(
text="5",
),
)
)
else:
self.root.ids.tabs.add_widget(
MDTabsItemSecondary(
MDTabsItemIcon(
icon=tab_icon,
),
(continues on next page)
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
Related content
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDDivider:
MDTabsCarousel:
id: related_content_container
size_hint_y: None
height: dp(320)
'''
class Example(MDApp):
def on_start(self):
for tab_icon, tab_name in {
"airplane": "Flights",
"treasure-chest": "Trips",
"compass-outline": "Explore",
}.items():
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
)
)
self.root.ids.related_content_container.add_widget(
MDLabel(
text=tab_name,
halign="center",
)
)
self.root.ids.tabs.switch_tab(icon="airplane")
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
Behaviors
Scrollable tabs
When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger
number of tabs. They are best used for browsing on touch interfaces.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsPrimary:
id: tabs
pos_hint: {"center_x": .5, "center_y": .5}
size_hint_x: .6
allow_stretch: False
label_only: True
MDDivider:
'''
class Example(MDApp):
def on_start(self):
for tab_name in [
"Moscow",
"Saint Petersburg",
"Novosibirsk",
"Yekaterinburg",
"Kazan",
"Nizhny Novgorod",
"Chelyabinsk",
]:
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemText(
text=tab_name,
),
)
)
self.root.ids.tabs.switch_tab(text="Moscow")
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
Fixed tabs
Fixed tabs display all tabs in a set simultaneously. They are best for switching between related content quickly, such as
between transportation methods in a map. To navigate between fixed tabs, tap an individual tab, or swipe left or right
in the content area.
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsPrimary:
id: tabs
pos_hint: {"center_x": .5, "center_y": .5}
size_hint_x: .6
allow_stretch: True
label_only: True
MDDivider:
'''
class Example(MDApp):
def on_start(self):
for tab_name in [
"Moscow", "Saint Petersburg", "Novosibirsk"
]:
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemText(
text=tab_name,
),
)
)
self.root.ids.tabs.switch_tab(text="Moscow")
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
Tap a tab
To navigate between tabs, users can swipe left or right within the content area.
Switching tab
You can switch tabs by icon name, by tab name, and by tab objects:
instance_tabs.switch_tab(icon="airplane")
instance_tabs.switch_tab(text="Airplane")
instance_tabs.switch_tab(
instance=instance_tabs_item # MDTabsItem
)
API break
1.2.0 version
KV = '''
MDBoxLayout:
(continues on next page)
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):
return Builder.load_string(KV)
def on_start(self):
for name_tab in self.icons:
self.root.ids.tabs.add_widget(
Tab(title=name_tab, icon=name_tab)
)
Example().run()
2.0.0 version
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsPrimary:
(continues on next page)
MDDivider:
MDTabsCarousel:
id: related_content
size_hint_y: None
height: root.height - tabs.ids.tab_scroll.height
'''
class Example(MDApp):
def on_start(self):
for name_tab in list(md_icons.keys())[15:30]:
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
icon=name_tab,
),
MDTabsItemText(
text=name_tab,
),
)
)
self.root.ids.related_content.add_widget(
MDIcon(
icon=name_tab,
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
self.root.ids.tabs.switch_tab(icon="airplane")
def build(self):
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.tab.tab
lock_swiping
If True - disable switching tabs by swipe.
lock_swiping is an BooleanProperty and defaults to False.
on_touch_move(touch) → str | bool | None
Receive a touch move event. The touch is in parent coordinates.
See on_touch_down() for more information.
class kivymd.uix.tab.tab.MDTabsItemText(*args, **kwargs)
Implements an label for the MDTabsItem class.
For more information, see in the MDLabel class documentation.
Added in version 2.0.0.
class kivymd.uix.tab.tab.MDTabsItemIcon(*args, **kwargs)
Implements an icon for the MDTabsItem class.
For more information, see in the MDIcon class documentation.
Added in version 2.0.0.
class kivymd.uix.tab.tab.MDTabsItem(*args, **kwargs)
Implements a item with an icon and text for MDTabsPrimary class.
Added in version 2.0.0.
For more information, see in the MDTabsItemBase and BoxLayout classes documentation.
add_widget(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.
Added 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.
Added in version 1.9.0.
indicator_duration
The duration of the animation of the indicator movement when switching tabs.
Added in version 2.0.0.
indicator_duration is an NumericProperty and defaults to 0.5.
indicator_transition
The transition name of animation of the indicator movement when switching tabs.
Added in version 2.0.0.
indicator_transition is an StringProperty and defaults to `’out_expo’.
last_scroll_x
Is the carousel reference of the next tab/slide. When you go from ‘Tab A’ to ‘Tab B’, ‘Tab B’ will be the
target tab/slide of the carousel.
last_scroll_x is an AliasProperty.
target
It is the carousel reference of the next tab / slide. When you go from ‘Tab A’ to ‘Tab B’, ‘Tab B’ will be the
target tab / slide of the carousel.
target is an ObjectProperty and default to None.
indicator
It is the SmoothRoundedRectangle instruction reference of the tab indicator.
indicator is an AliasProperty.
get_last_scroll_x()
get_rect_instruction()
2.3.48 Label
• MDLabel
• MDIcon
MDLabel
Example
Declarative KV style
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDLabel:
text: "MDLabel"
halign: "center"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
class Test(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return (
MDScreen(
MDLabel(
text="MDLabel",
halign="center",
),
md_bg_color=self.theme_cls.backgroundColor,
)
)
Test().run()
To use a custom color for MDLabel, use a theme ‘Custom’. After that, you can specify the desired color in the
text_color parameter:
MDLabel:
text: "Custom color"
halign: "center"
theme_text_color: "Custom"
text_color: "red"
MDLabel provides standard font styles for labels. To do this, specify the name of the desired style in the font_style
and role parameters:
MDLabel:
text: "Display, role - 'large'"
font_style: "Display"
MDLabel:
text: "Display, role - 'small'"
font_style: "Display"
role: "small"
See also:
Material Design spec, Typography
All styles
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDRecycleView:
id: rv
key_viewclass: 'viewclass'
key_size: 'height'
RecycleBoxLayout:
padding: dp(10)
spacing: dp(10)
default_size: None, dp(48)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: "vertical"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
Declarative KV style
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDLabel:
adaptive_size: True
pos_hint: {"center_x": .5, "center_y": .5}
text: "Do a double click on me"
allow_selection: True
padding: "4dp", "4dp"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
class Example(MDApp):
def on_start(self):
def on_start(dt):
self.root.md_bg_color = self.theme_cls.backgroundColor
Clock.schedule_once(on_start)
def build(self):
self.theme_cls.theme_style = "Dark"
return (
MDScreen(
MDLabel(
adaptive_size=True,
(continues on next page)
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,
padding=("4dp", "4dp"),
)
)
)
def on_start(self):
self.root.ids.label.bind(on_copy=self.on_copy)
Example().run()
KV = '''
MDBoxLayout:
orientation: "vertical"
spacing: "12dp"
padding: "24dp"
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
id: box
orientation: "vertical"
(continues on next page)
MDTextField:
max_height: "200dp"
mode: "filled"
multiline: True
Widget:
'''
data = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Sed blandit libero volutpat sed cras ornare arcu. Nisl vel pretium "
"lectus quam id leo in. Tincidunt arcu non sodales neque sodales ut etiam.",
"Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. "
"Nisl rhoncus mattis rhoncus urna neque. Orci nulla pellentesque "
"dignissim enim. Ac auctor augue mauris augue neque gravida in fermentum. "
"Lacus suspendisse faucibus interdum posuere."
]
def toast(text):
MDSnackbar(
MDSnackbarText(
text=text,
),
y=dp(24),
pos_hint={"center_x": 0.5},
size_hint_x=0.3,
).open()
class CopyLabel(MDLabel):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.allow_selection = True
self.adaptive_height = True
class Example(MDApp):
context_menu = None
def build(self):
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)
self.root.ids.box.add_widget(copy_label)
(continues on next page)
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"
MDIcon:
icon: "gmail"
MDBadge:
text: "10+"
You can use custom fonts to display icons. Such as for example Material Symbols. You can find the necessary fonts in
the materialsymbols-python repository
KV = '''
(continues on next page)
MDIcon:
icon: "music_video"
theme_font_name: "Custom"
font_name: "MaterialSymbols"
pos_hint: {"center_x": .5, "center_y": .58}
MDButton:
pos_hint: {"center_x": .5, "center_y": .47}
MDButtonIcon:
icon: "music_video"
theme_font_name: "Custom"
font_name: "MaterialSymbols"
MDButtonText:
text: "Elevated"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
LabelBase.register(
name="MaterialSymbols",
fn_regular="Material_Symbols_Outlined-20-200-1_200.ttf",
)
self.theme_cls.font_styles["MaterialSymbols"] = {
"large": {
"line-height": 1.64,
"font-name": "MaterialSymbols",
"font-size": sp(57),
},
"medium": {
"line-height": 1.52,
"font-name": "MaterialSymbols",
"font-size": sp(45),
},
"small": {
"line-height": 1.44,
"font-name": "MaterialSymbols",
"font-size": sp(36),
},
}
return Builder.load_string(KV)
API - kivymd.uix.label.label
text
Text of the label.
text is an StringProperty and defaults to ‘’.
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.
Added 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.
Added 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.
Added 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.
Added in version 1.2.0.
color_deselection is an ColorProperty and defaults to None.
is_selected
Is the label text highlighted.
Added in version 1.2.0.
is_selected is an BooleanProperty and defaults to False.
radius
Label radius.
radius is an VariableListProperty and defaults to [0, 0, 0, 0].
do_selection() → None
cancel_selection() → None
on_copy(*args) → None
Fired when double-tapping on the label.
Added in version 1.2.0.
on_selection(*args) → None
Fired when double-tapping on the label.
Added in version 1.2.0.
on_cancel_selection(*args) → None
Fired when the highlighting is removed from the label text.
Added in version 1.2.0.
on_allow_selection(instance_label, selection: bool) → None
Fired when the allow_selection value changes.
on_text_color(instance_label, color: list | str) → None
Fired when the text_color value changes.
on_md_bg_color(instance_label, color: list | str) → None
Fired when the md_bg_color value changes.
on_size(instance_label, size: list) → None
Fired when the parent window of the application is resized.
update_canvas_bg_pos(instance_label, pos: list) → None
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.
Added 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.
Added in version 1.9.0.
See also:
Material Design 3 spec, Navigation bar
Usage
<Root>
MDNavigationBar:
MDNavigationItem:
MDNavigationItemIcon:
MDNavigationItemLabel:
[...]
Anatomy
Example
Declarative KV style
class BaseMDNavigationItem(MDNavigationItem):
icon = StringProperty()
text = StringProperty()
class BaseScreen(MDScreen):
image_size = StringProperty()
KV = '''
<BaseMDNavigationItem>
MDNavigationItemIcon:
icon: root.icon
MDNavigationItemLabel:
text: root.text
<BaseScreen>
FitImage:
source: f"https://picsum.photos/{root.image_size}/{root.image_size}"
size_hint: .9, .9
pos_hint: {"center_x": .5, "center_y": .5}
radius: dp(24)
MDBoxLayout:
orientation: "vertical"
md_bg_color: self.theme_cls.backgroundColor
MDScreenManager:
id: screen_manager
BaseScreen:
name: "Screen 1"
image_size: "1024"
BaseScreen:
name: "Screen 2"
image_size: "800"
BaseScreen:
name: "Screen 3"
image_size: "600"
MDNavigationBar:
on_switch_tabs: app.on_switch_tabs(*args)
BaseMDNavigationItem
icon: "gmail"
text: "Screen 1"
active: True
BaseMDNavigationItem
icon: "linkedin"
text: "Screen 3"
'''
class Example(MDApp):
def on_switch_tabs(
self,
bar: MDNavigationBar,
item: MDNavigationItem,
item_icon: str,
item_text: str,
):
self.root.ids.screen_manager.current = item_text
def build(self):
return Builder.load_string(KV)
Example().run()
class BaseMDNavigationItem(MDNavigationItem):
icon = StringProperty()
text = StringProperty()
class BaseScreen(MDScreen):
image_size = StringProperty()
class Example(MDApp):
def on_switch_tabs(
self,
bar: MDNavigationBar,
item: MDNavigationItem,
item_icon: str,
item_text: str,
):
self.root.get_ids().screen_manager.current = item_text
def build(self):
return MDBoxLayout(
MDScreenManager(
BaseScreen(
name="Screen 1",
image_size="1024",
),
BaseScreen(
name="Screen 2",
image_size="800",
),
BaseScreen(
name="Screen 3",
image_size="600",
),
id="screen_manager",
),
MDNavigationBar(
BaseMDNavigationItem(
icon="gmail",
text="Screen 1",
active=True,
),
BaseMDNavigationItem(
icon="twitter",
(continues on next page)
Example().run()
API break
1.2.0 version
class Example(MDApp):
def build(self):
return Builder.load_string(
'''
MDScreen:
MDBottomNavigation:
MDBottomNavigationItem:
name: 'screen 1'
text: 'Mail'
icon: 'gmail'
badge_icon: "numeric-10"
MDLabel:
text: 'Screen 1'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 2'
text: 'Twitter'
icon: 'twitter'
MDLabel:
text: 'Screen 2'
(continues on next page)
Example().run()
2.0.0 version
MDNavigationBar in version 2.0.0 no longer provides a screen manager for content placement. You have to implement
it yourself. This is due to the fact that when using MDNavigationBar and MDTabs widgets at the same time, there were
conflicts between their screen managers.
from kivy.lang import Builder
from kivy.properties import StringProperty
class BaseMDNavigationItem(MDNavigationItem):
icon = StringProperty()
text = StringProperty()
class BaseScreen(MDScreen):
...
KV = '''
<BaseMDNavigationItem>
MDNavigationItemIcon:
icon: root.icon
MDNavigationItemLabel:
text: root.text
<BaseScreen>
MDLabel:
text: root.name
halign: "center"
MDBoxLayout:
orientation: "vertical"
md_bg_color: self.theme_cls.backgroundColor
BaseScreen:
name: "Screen 1"
BaseScreen:
name: "Screen 2"
MDNavigationBar:
on_switch_tabs: app.on_switch_tabs(*args)
BaseMDNavigationItem
icon: "gmail"
text: "Screen 1"
active: True
BaseMDNavigationItem
icon: "twitter"
text: "Screen 2"
'''
class Example(MDApp):
def on_switch_tabs(
self,
bar: MDNavigationBar,
item: MDNavigationItem,
item_icon: str,
item_text: str,
):
self.root.ids.screen_manager.current = item_text
def build(self):
return Builder.load_string(KV)
Example().run()
API - kivymd.uix.navigationbar.navigationbar
text_color_normal
Item icon color in (r, g, b, a) or string format.
text_color_normal is a ColorProperty and defaults to None.
class kivymd.uix.navigationbar.navigationbar.MDNavigationItemIcon(*args, **kwargs)
Implements a icon for the MDNavigationItem class.
Added in version 2.0.0.
For more information, see in the MDIcon class documentation.
icon_color_active
Item icon color in (r, g, b, a) or string format.
icon_color_active is a ColorProperty and defaults to None.
icon_color_normal
Item icon color in (r, g, b, a) or string format.
icon_color_normal is a ColorProperty and defaults to None.
class kivymd.uix.navigationbar.navigationbar.MDNavigationItem(*args, **kwargs)
Bottom item class.
For more information, see in the DeclarativeBehavior and RectangularRippleBehavior and
AnchorLayout and ButtonBehavior classes documentation.
Changed in version 2.0.0: Rename class from MDBottomNavigationItem to MDNavigationItem.
active
Indicates if the bar item is active or inactive.
active is a BooleanProperty and defaults to False.
indicator_color
The background color in (r, g, b, a) or string format of the highlighted item.
Added in version 1.0.0.
Changed in version 2.0.0: Rename property from selected_color_background to indicator_color.
indicator_color is an ColorProperty and defaults to None.
indicator_transition
Animation type of the active element indicator.
indicator_transition is an StringProperty and defaults to ‘in_out_sine’.
indicator_duration
Duration of animation of the active element indicator.
indicator_duration is an NumericProperty and defaults to 0.1.
on_active(instance, value) → None
Fired when the values of active change.
on_release() → None
Fired when clicking on a panel item.
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 Motion
API - kivymd.uix.behaviors.motion_behavior
class kivymd.uix.behaviors.motion_behavior.MotionBase
Base class for widget display movement behavior.
show_transition
The type of transition of the widget opening.
show_transition is a StringProperty and defaults to ‘linear’.
show_duration
Duration of widget display transition.
show_duration is a NumericProperty and defaults to 0.2.
hide_transition
The type of transition of the widget closing.
hide_transition is a StringProperty and defaults to ‘linear’.
hide_duration
Duration of widget closing transition.
hide_duration is a NumericProperty and defaults to 0.2.
class kivymd.uix.behaviors.motion_behavior.MotionDropDownMenuBehavior(**kwargs)
Base class for the dropdown menu movement behavior.
For more information, see in the MotionBase class documentation.
show_transition
The type of transition of the widget opening.
show_transition is a StringProperty and defaults to ‘out_back’.
show_duration
Duration of widget display transition.
show_duration is a NumericProperty and defaults to 0.2.
hide_transition
The type of transition of the widget closing.
hide_transition is a StringProperty and defaults to ‘out_cubic’.
set_opacity() → None
set_scale() → None
on_dismiss() → None
on_open(*args)
on__opacity(instance, value)
on__scale_x(instance, value)
on__scale_y(instance, value)
class kivymd.uix.behaviors.motion_behavior.MotionExtendedFabButtonBehavior
Base class for extended Fab button movement behavior.
For more information, see in the MotionBase class documentation.
show_transition
The type of transition of the widget opening.
show_transition is a StringProperty and defaults to ‘out_circ’.
shift_transition
Text label transition.
shift_transition is a StringProperty and defaults to ‘out_sine’.
show_duration
Duration of widget display transition.
show_duration is a NumericProperty and defaults to 0.3.
hide_transition
The type of transition of the widget closing.
hide_transition is a StringProperty and defaults to ‘linear’.
hide_duration
Duration of widget closing transition.
hide_duration is a NumericProperty and defaults to 0.2.
collapse(*args) → None
Collapses the button.
expand(*args) → None
Expands the button.
set_opacity_text_button(value: int) → None
class kivymd.uix.behaviors.motion_behavior.MotionDialogBehavior
Base class for dialog movement behavior.
For more information, see in the ScaleBehavior MotionBase classes documentation.
show_transition
The type of transition of the widget opening.
show_transition is a StringProperty and defaults to ‘out_expo’.
show_button_container_transition
The type of transition of the widget opening.
show_button_container_transition is a StringProperty and defaults to ‘out_circ’.
hide_transition
The type of transition of the widget opening.
show_transition is a StringProperty and defaults to ‘hide_transition’.
show_duration
Duration of widget display transition.
show_duration is a NumericProperty and defaults to 0.2.
on_dismiss(*args)
Fired when a dialog closed.
on_open(*args)
Fired when a dialog opened.
class kivymd.uix.behaviors.motion_behavior.MotionTimePickerBehavior
Base class for time picker movement behavior.
For more information, see in the MotionPickerBehavior class documentation.
class kivymd.uix.behaviors.motion_behavior.MotionDatePickerBehavior
Base class for date picker movement behavior.
For more information, see in the MotionPickerBehavior class documentation.
class kivymd.uix.behaviors.motion_behavior.MotionShackBehavior
The base class for the behavior of the movement of snack bars.
For more information, see in the MotionBase class documentation.
on_dismiss(*args)
Fired when a snackbar closed.
on_open(*args)
Fired when a snackbar opened.
2.5.2 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() → None
Grow effect animation.
shake() → None
Shake effect animation.
wobble() → None
Wobble effect animation.
twist() → None
Twist effect animation.
shrink() → None
Shrink effect animation.
on_touch_up(*args)
2.5.3 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 RotateButton(Button):
rotate_value_angle = NumericProperty(0)
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()
Warning: Do not use RotateBehavior class with classes that inherited` from CommonElevationBehavior class.
CommonElevationBehavior classes by default contains attributes for rotate widget.
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.4 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:
x: self.scale_value_x
y: self.scale_value_y
z: self.scale_value_x
origin: self.center
canvas.after:
PopMatrix
'''
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()
Warning: Do not use ScaleBehavior class with classes that inherited` from CommonElevationBehavior class.
CommonElevationBehavior classes by default contains attributes for scale widget.
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.
Added 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.5 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:
(continues on next page)
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)
Test().run()
class Test(MDApp):
def build(self):
(continues on next page)
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.MDToggleButtonBehavior(**kwargs)
This mixin class provides togglebutton behavior. Please see the togglebutton behaviors module docu-
mentation for more information.
Added 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.6 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 RelativeLayout, 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 = '''
MDScreen
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
id: box
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: .8, .8
md_bg_color: self.theme_cls.secondaryContainerColor
'''
self.md_bg_color = "white"
self.md_bg_color = self.theme_cls.secondaryContainerColor
class Example(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
Example().run()
API - kivymd.uix.behaviors.hover_behavior
Events
on_enter
Fired when mouse enters the bbox of the widget and the widget is visible.
on_leave
Fired 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(*args)
on_enter()
Fired when mouse enter the bbox of the widget.
on_leave()
Fired when the mouse goes outside the widget border.
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 ‘’.
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
line_color: 0, 0, 1, 1
radius: [24, ]
background_origin
2.5.8 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 = '''
<ElevationWidget>
size_hint: None, None
size: "250dp", "50dp"
MDScreen:
class ElevationWidget(
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 ElevationWidget(
RectangularRippleBehavior,
CommonElevationBehavior,
ButtonBehavior,
BackgroundColorBehavior,
):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.md_bg_color = "red"
self.size_hint = (None, None)
self.size = ("250dp", "50dp")
class Example(MDApp):
def build(self):
return (
MDScreen(
ElevationWidget(
pos_hint={"center_x": .5, "center_y": .6},
elevation=4,
shadow_softness=4,
shadow_offset=(0, -6),
),
ElevationWidget(
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
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},
(continues on next page)
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: dp(18)
'''
class ElevatedWidget(
CommonElevationBehavior,
RectangularRippleBehavior,
(continues on next page)
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
class ElevatedWidget(
CommonElevationBehavior,
RectangularRippleBehavior,
ButtonBehavior,
MDWidget,
):
_elev = 0 # previous elevation value
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_level
Elevation level (values from 0 to 5)
Added in version 1.2.0.
elevation_level is an BoundedNumericProperty and defaults to 0.
elevation_levels
Elevation is measured as the distance between components along the z-axis in density-independent pixels
(dps).
Added in version 1.2.0.
elevation_levels is an DictProperty and defaults to {0: dp(0), 1: dp(8), 2: dp(23), 3: dp(16), 4:
dp(20), 5: dp(24)}.
elevation
Elevation of the widget.
elevation is an BoundedNumericProperty and defaults to 0.
shadow_radius
Radius of the corners of the shadow.
Added 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: dp(12), dp(46), dp(12), dp(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 = '''
<ElevationWidget>
size_hint: None, None
size: "250dp", "50dp"
MDScreen:
ElevationWidget:
pos_hint: {"center_x": .5, "center_y": .6}
elevation: 6
shadow_softness: 6
ElevationWidget:
pos_hint: {"center_x": .5, "center_y": .4}
elevation: 6
shadow_softness: 12
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
KV = '''
<ElevationWidget>
size_hint: None, None
size: "100dp", "100dp"
MDScreen:
ElevationWidget:
pos_hint: {"center_x": .5, "center_y": .5}
elevation: 6
shadow_radius: dp(6)
shadow_softness: 12
shadow_offset: -12, -12
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
ElevationWidget:
shadow_offset: 12, -12
ElevationWidget:
shadow_offset: 12, 12
ElevationWidget:
shadow_offset: -12, 12
ElevationWidget:
shadow_color: 0, 0, 1, .8
See also:
Material Design spec, State layers
API - kivymd.uix.behaviors.state_layer_behavior
icon_button_filled_opacity_value_disabled_icon
icon_button_tonal_opacity_value_disabled_container
icon_button_tonal_opacity_value_disabled_icon
icon_button_outlined_opacity_value_disabled_container
icon_button_outlined_opacity_value_disabled_line
icon_button_outlined_opacity_value_disabled_icon
icon_button_standard_opacity_value_disabled_icon
fab_button_opacity_value_disabled_container
fab_button_opacity_value_disabled_icon
button_filled_opacity_value_disabled_container
button_filled_opacity_value_disabled_icon
button_filled_opacity_value_disabled_text
button_tonal_opacity_value_disabled_container
button_tonal_opacity_value_disabled_icon
button_tonal_opacity_value_disabled_text
button_outlined_opacity_value_disabled_container
button_outlined_opacity_value_disabled_line
button_outlined_opacity_value_disabled_icon
button_outlined_opacity_value_disabled_text
button_elevated_opacity_value_disabled_container
button_elevated_opacity_value_disabled_icon
button_elevated_opacity_value_disabled_text
button_text_opacity_value_disabled_icon
button_text_opacity_value_disabled_text
label_opacity_value_disabled_text
card_filled_opacity_value_disabled_state_container
card_outlined_opacity_value_disabled_state_container
card_opacity_value_disabled_state_elevated_container
segmented_button_opacity_value_disabled_container
segmented_button_opacity_value_disabled_container_active
segmented_button_opacity_value_disabled_line
segmented_button_opacity_value_disabled_icon
segmented_button_opacity_value_disabled_text
chip_opacity_value_disabled_container
chip_opacity_value_disabled_text
chip_opacity_value_disabled_icon
switch_opacity_value_disabled_line
switch_opacity_value_disabled_container
switch_thumb_opacity_value_disabled_container
switch_opacity_value_disabled_icon
checkbox_opacity_value_disabled_container
list_opacity_value_disabled_container
list_opacity_value_disabled_leading_avatar
text_field_filled_opacity_value_disabled_state_container
text_field_outlined_opacity_value_disabled_state_container
text_field_opacity_value_disabled_max_length_label
text_field_opacity_value_disabled_helper_text_label
text_field_opacity_value_disabled_hint_text_label
text_field_opacity_value_disabled_leading_icon
text_field_opacity_value_disabled_trailing_icon
text_field_opacity_value_disabled_line
set_properties_widget() → None
Fired on_release/on_press/on_enter/on_leave events.
on_disabled(instance, value) → None
Fired when the disabled value changes.
on_enter() → None
Fired when mouse enter the bbox of the widget.
on_leave() → None
Fired when the mouse goes outside the widget border.
2.5.10 Declarative
Imperative style
class Example(MDApp):
def build(self):
screen = MDScreen()
bottom_navigation = MDNavigationBar()
datas = [
{"text": "Mail", "icon": "gmail"},
{"text": "GitHub", "icon": "git"},
{"text": "LinkedIN", "icon": "linkedin"},
]
for data in datas:
text = data["text"]
navigation_item = MDNavigationItem(
MDNavigationItemIcon(
icon=data["icon"],
),
MDNavigationItemLabel(
text=text,
),
)
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 Example(MDApp):
def build(self):
return Builder.load_string(
'''
MDScreen:
MDNavigationBar:
MDNavigationItem:
MDNavigationItemIcon:
icon: "gmail"
MDNavigationItemLabel:
text: "Mail"
MDNavigationItem:
MDNavigationItemIcon:
icon: "git"
MDNavigationItemLabel:
text: "GitHub"
MDNavigationItem:
MDNavigationItemIcon:
icon: "linkedin"
MDNavigationItemLabel:
text: "LinkedIN"
'''
)
Example().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 MDNavigationBar(
MDNavigationItem(
MDNavigationItemIcon(
icon="gmail",
),
MDNavigationItemLabel(
text="Mail",
),
),
MDNavigationItem(
MDNavigationItemIcon(
icon="twitter",
),
MDNavigationItemLabel(
text="Twitter",
),
),
MDNavigationItem(
MDNavigationItemIcon(
icon="linkedin",
),
MDNavigationItemLabel(
text="LinkedIN",
),
),
)
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:
from kivymd.app import MDApp
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.button import MDButton, MDButtonText
from kivymd.uix.floatlayout import MDFloatLayout
class Example(MDApp):
def build(self):
return (
MDBoxLayout(
MDFloatLayout(
MDButton(
MDButtonText(
text="Button 1",
),
id="button_1",
pos_hint={"center_x": 0.5, "center_y": 0.5},
),
id="box_container_1",
),
MDBoxLayout(
MDFloatLayout(
MDButton(
MDButtonText(
(continues on next page)
def on_start(self):
# {
# 'button_1': <kivymd.uix.button.button.MDButton object at 0x11d93c9e0>,
# 'button_2': <kivymd.uix.button.button.MDButton object at 0x11da128f0>,
# 'float_container': <kivymd.uix.floatlayout.MDFloatLayout object at␣
˓→0x11da228f0>,
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
2.5.11 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 = '''
(continues on next page)
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]
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() → None
finish_ripple() → None
fade_out(*args) → None
anim_complete(*args) → None
Fired when the “fade_out” animation complete.
on_touch_down(touch)
call_ripple_animation_methods(touch) → None
on_touch_move(touch, *args)
on_touch_up(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() → None
Adds graphic instructions to the canvas to implement ripple animation.
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() → None
2.5.12 Touch
Usage
KV = '''
<TouchBehaviorButton>
style: "elevated"
MDButtonText:
text: root.text
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
TouchBehaviorButton:
(continues on next page)
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().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(widget, touch, *args)
2.5.13 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
Carousel:
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.
Added in version 1.0.0.
2.5.14 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
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: [email protected]
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(dt)
Before actually updating my velocity, meddle with self.friction to make it appropriate to where I’m
at, currently.
on_value(*args)
Prevent moving beyond my bounds, and update self.scroll
start(val, t=None)
Start movement with self.friction = self.base_friction
update(val, t=None)
Reduce the impact of whatever change has been made to me, in proportion with my current friction.
stop(val, t=None)
Work out whether I’ve been flung.
2.7 Changelog
2.7.1 Unreleased
2.7.2 1.1.1
2.7.3 1.0.2
2.7.4 1.0.1
2.7.5 1.0.0
• Added new transition package - a set of classes for implementing transitions between application screens;
• Now all modules from the uix directory are packages;
• Type hints have been added to the source code of the KivyMD library;
• Added divider_color attribute to BaseListItem class;
• Added load_all_kv_files method to MDApp class;
• Added Templates package - base classes for controlling the scale, rotation of the widget, etc.;
• Added kivymd/tools/patterns package - scripts for creating projects with design patterns;
• FitImage widget move from kivymd.utils to kivymd.uix.fitimage;
• Added background_color_header, background_color_cell, background_color_selected_cell, added methods for
adding/removing rows to a common table to MDDataTable widget;
• Added method for update rows to MDDataTable class;
• Delete kivymd/utils/hot_reload_viewer.py;
• Added kivymd/tools/hotreload package;
• Added top value to position parameter of MDDropdownMenu class;
• Added get_current_tab method to MDTabs class;
• Added the feature to automatically create a virtual environment when creating a project using the
kivymd.tools.patterns.create_project tool;
• Added the feature to use the left_icon for MDTextField text fields;
• The design and behavior of the MDChip widget is close to the material design spec;
• Added the feature to set the thickness of the MDProgressBar class;
• Added localization support when creating a project using the create_project tool;
• Added support Material Design v3;
• Added support badge icon to MDIcon class;
• Added the feature to use a radius for the BaseListItem class;
• MDFloatingActionButton class configured according to M3 style;
• Ripple animation for round buttons customized to material design standards;
• Fix Warning, too much iteration done before the next frame for button classes;
• Added FadingEdgeEffect class
• Added MDSliverAppBar widget;
• Added the feature to use custom icons and font name for the MDBottomNavigation class;
• Rename MDToolbar to MDTopAppBar class;
• The overflow behavior from the ActionBar class of the Kivy framework has been added to the MDTopAppBar
class;
• Add shift_right and shift_right attributes to MDTooltip class;
• Fixed the size of the MDIconButton icon when changing icon_size on mobile devices;
• Add new MDSegmentedControl widget;
• Add on_release/on_press events to MDSmartTile class;
2.7.6 0.104.2
2.7.7 0.104.1
• Added the feature to use ripple and focus behavior in MDCard class
• MDDialogs class redesigned to meet material design requirements
• Added MDDataTable class
2.7.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.7.9 0.103.0
2.7.10 0.102.1
2.7.11 0.102.0
2.7.12 0.101.8
2.7.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.7.14 0.101.6
2.7.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.7.16 0.101.4
2.7.17 0.101.3
2.7.18 0.101.2
2.7.19 0.101.1
2.7.20 0.101.0
2.7.21 0.100.2
• [Black](https://github.com/psf/black) formatting.
2.7.22 0.100.1
2.7.23 0.100.0
2.7.24 0.99.99.01
• Fixed MDNavigationDrawer.use_logo.
2.7.25 0.99.99
2.7.26 0.99.98
2.7.27 0.99.97
2.7.28 0.99.96
2.7.29 0.99.95
2.7.30 0.99.94
2.7.31 0.99.93
2.7.32 0.99.92
2.8 About
2.8.1 License
Refer to LICENSE.
MIT License
Copyright (c) 2024 Andrés Rodríguez and other contributors - KivyMD library up to␣
˓→version 0.1.2
Copyright (c) 2024 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.9 KivyMD
2.9.1
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.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.9.3 Submodules
Animation
class AnimBox(BoxLayout):
obj_pos = ListProperty([0, 0])
UI = '''
<AnimBox>:
transition:"in_out_bounce"
size_hint_y:None
height:dp(100)
obj_pos:[dp(40), self.pos[-1] + dp(40)]
canvas:
Color:
rgba:app.theme_cls.primaryContainerColor
Rectangle:
size:[self.size[0], dp(5)]
pos:self.pos[0], self.pos[-1] + dp(50)
Color:
rgba:app.theme_cls.primaryColor
Rectangle:
size:[dp(30)] * 2
pos:root.obj_pos
MDLabel:
adaptive_height:True
text:root.transition
padding:[dp(10), 0]
halign:"center"
MDGridLayout:
orientation:"lr-tb"
cols:1
md_bg_color:app.theme_cls.backgroundColor
spacing:dp(10)
'''
class MotionApp(MDApp):
def build(self):
return Builder.load_string(UI)
def on_start(self):
for transition in [
_inverse = True
def run_animation(self, dt):
x = (self.root.children[0].width - dp(30)) if self._inverse else 0
for widget in self.root.children:
Animation(
obj_pos=[x, widget.obj_pos[-1]], t=widget.transition, d=3
).start(widget)
self._inverse = not self._inverse
Clock.schedule_once(self.run_animation, 3.1)
MotionApp().run()
API - kivymd.animation
kivymd.animation.float_epsilon = 8.34465e-07
kivymd.animation.cbrt
class kivymd.animation.CubicBezier(*args)
Ported from Android source code
p0 = 0
p1 = 0
p2 = 0
p3 = 0
evaluate_cubic(p1, p2, t)
clamp_range(r)
close_to(x, y)
t(value: float)
class kivymd.animation.MDAnimationTransition
KivyMD’s equivalent of kivy’s AnimationTransition
easing_standard
easing_decelerated
easing_accelerated
easing_linear
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'
Effects
API - kivymd.effects
Submodules
kivymd.effects.stiffscroll
API - kivymd.effects.stiffscroll
Submodules
kivymd.toast
API - kivymd.toast
Submodules
AndroidToast
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint:{"center_x": .5, "center_y": .5}
on_press: app.show_toast()
MDButtonText:
text: "Make toast"
'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
def show_toast(self):
toast("Hello World", True, 80, 200, 0)
Example().run()
API - kivymd.toast.androidtoast
• length_long – duration of the toast, if True the toast will last 2.3s but if it is False the toast
will last 3.9s;
• gravity – refers to the toast position, if it is 80 the toast will be shown below, if it is 40 the
toast will be displayed above;
• y – refers to the vertical position of the toast;
• x – refers to the horizontal position of the toast;
Important: if only the text value is specified and the value of the gravity, y, x parameters is not specified, their
values will be 0 which means that the toast will be shown in the center.
kivymd.tools
API - kivymd.tools
Submodules
kivymd.tools.argument_parser
API - kivymd.tools.argument_parser
error(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()
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(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.
property appname
Return the name of the 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()
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()
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()
Return the root file path.
abstract build_app(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()
Called when all the application dependencies must be unloaded. Usually happen before a reload
load_app_dependencies()
Load all the application dependencies. This is called before rebuild.
rebuild(*args, **kwargs)
set_error(exc, tb=None)
bind_key(key, callback)
Bind a key (keycode) to a callback (cannot be unbind).
enable_autoreload()
Enable autoreload manually. It is activated automatically if “DEBUG” exists in environ. It requires the
watchdog module.
prepare_foreground_lock()
Try forcing app to front permanently to avoid windows pop ups and notifications etc.app.
Requires fake full screen and borderless.
set_widget(wid)
Clear the root container, and set the new approot widget to wid.
apply_state(state)
Whatever the current state is, reapply the current state.
install_idle(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(*args)
Rearm the idle timer.
patch_builder()
on_idle(*args)
Event fired when the application enter the idle mode.
on_wakeup(*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)
(continues on next page)
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.
Added 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 \
(continues on next page)
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(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_version_py(version, is_release, test: bool = False)
Change version in kivymd/_version.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
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.appbar
API - kivymd.uix.appbar
Submodules
kivymd.uix.badge
API - kivymd.uix.badge
Submodules
Behaviors
API - kivymd.uix.behaviors
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.dialog
API - kivymd.uix.dialog
Submodules
kivymd.uix.divider
API - kivymd.uix.divider
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.navigationbar
API - kivymd.uix.navigationbar
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.datepicker
API - kivymd.uix.pickers.datepicker
Submodules
kivymd.uix.pickers.timepicker
API - kivymd.uix.pickers.timepicker
Submodules
kivymd.uix.progressindicator
API - kivymd.uix.progressindicator
Submodules
kivymd.uix.refreshlayout
API - kivymd.uix.refreshlayout
Submodules
kivymd.uix.segmentedbutton
API - kivymd.uix.segmentedbutton
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.swiper
API - kivymd.uix.swiper
Submodules
kivymd.uix.tab
API - kivymd.uix.tab
Submodules
kivymd.uix.textfield
API - kivymd.uix.textfield
Submodules
kivymd.uix.tooltip
API - kivymd.uix.tooltip
Submodules
kivymd.uix.transition
API - kivymd.uix.transition
Submodules
kivymd.utils
API - kivymd.utils
Submodules
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)
Fps monitor class.
For more information, see in the Label class documentation.
updated_interval
FPS refresh rate.
updated_interval is an NumericProperty and defaults to 0.5.
anchor
Monitor position. Available option are: ‘top’, ‘bottom’.
anchor is an OptionProperty and defaults to ‘top’.
start() → None
Monitor starting.
update_fps(*args) → None
kivymd.utils.set_bars_colors
API - kivymd.utils.set_bars_colors
KV = '''
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "MDTopAppBar"
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
495
KivyMD, Release 2.0.1.dev0
k kivymd.uix.appbar.appbar, 220
kivymd, 463 kivymd.uix.badge, 486
kivymd.animation, 463 kivymd.uix.badge.badge, 187
kivymd.app, 19 kivymd.uix.behaviors, 486
kivymd.dynamic_color, 27 kivymd.uix.behaviors.backgroundcolor_behavior,
kivymd.effects, 466 416
kivymd.effects.stiffscroll, 466 kivymd.uix.behaviors.declarative_behavior,
kivymd.effects.stiffscroll.stiffscroll, 449 434
kivymd.factory_registers, 466 kivymd.uix.behaviors.elevation, 418
kivymd.font_definitions, 25 kivymd.uix.behaviors.focus_behavior, 448
kivymd.icon_definitions, 22 kivymd.uix.behaviors.hover_behavior, 414
kivymd.material_resources, 466 kivymd.uix.behaviors.magic_behavior, 405
kivymd.theming, 7 kivymd.uix.behaviors.motion_behavior, 402
kivymd.toast, 466 kivymd.uix.behaviors.ripple_behavior, 440
kivymd.toast.androidtoast, 467 kivymd.uix.behaviors.rotate_behavior, 407
kivymd.tools, 468 kivymd.uix.behaviors.scale_behavior, 409
kivymd.tools.argument_parser, 468 kivymd.uix.behaviors.state_layer_behavior,
kivymd.tools.hotreload, 469 432
kivymd.tools.hotreload.app, 469 kivymd.uix.behaviors.stencil_behavior, 446
kivymd.tools.packaging, 473 kivymd.uix.behaviors.toggle_behavior, 411
kivymd.tools.packaging.pyinstaller, 473 kivymd.uix.behaviors.touch_behavior, 444
kivymd.tools.packaging.pyinstaller.hook-kivymd,kivymd.uix.bottomsheet, 486
474 kivymd.uix.bottomsheet.bottomsheet, 326
kivymd.tools.patterns, 475 kivymd.uix.boxlayout, 64
kivymd.tools.patterns.add_view, 475 kivymd.uix.button, 486
kivymd.tools.patterns.create_project, 476 kivymd.uix.button.button, 69
kivymd.tools.patterns.MVC, 481 kivymd.uix.card, 486
kivymd.tools.patterns.MVC.libs, 482 kivymd.uix.card.card, 152
kivymd.tools.patterns.MVC.libs.translation, kivymd.uix.chip, 487
482 kivymd.uix.chip.chip, 308
kivymd.tools.patterns.MVC.Model, 481 kivymd.uix.circularlayout, 67
kivymd.uix.controllers, 487
kivymd.tools.patterns.MVC.Model.database_firebase,
481 kivymd.uix.controllers.windowcontroller, 401
kivymd.uix.dialog, 487
kivymd.tools.patterns.MVC.Model.database_restdb,
481 kivymd.uix.dialog.dialog, 236
kivymd.tools.release, 483 kivymd.uix.divider, 487
kivymd.tools.release.git_commands, 483 kivymd.uix.divider.divider, 285
kivymd.tools.release.make_release, 483 kivymd.uix.dropdownitem, 487
kivymd.tools.release.update_icons, 484 kivymd.uix.dropdownitem.dropdownitem, 217
kivymd.uix, 485 kivymd.uix.expansionpanel, 487
kivymd.uix.anchorlayout, 60 kivymd.uix.expansionpanel.expansionpanel, 106
kivymd.uix.appbar, 486 kivymd.uix.filemanager, 487
497
KivyMD, Release 2.0.1.dev0
A add_widget() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheet
absorb_impact() (kivymd.uix.scrollview.StretchOverScrollStencil method), 333
method), 42 add_widget() (kivymd.uix.bottomsheet.bottomsheet.MDBottomSheetDragH
action_items (kivymd.uix.appbar.appbar.MDBottomAppBar method), 333
attribute), 233 add_widget() (kivymd.uix.button.button.MDButton
active (kivymd.uix.chip.chip.MDChip attribute), 325 method), 86
add_widget() (kivymd.uix.button.button.MDExtendedFabButton
active (kivymd.uix.navigationbar.navigationbar.MDNavigationItem
attribute), 399 method), 87
add_widget()
active (kivymd.uix.navigationrail.navigationrail.MDNavigationRailItem (kivymd.uix.card.card.MDCardSwipe
attribute), 357 method), 165
add_widget() (kivymd.uix.chip.chip.MDChip method),
active (kivymd.uix.progressindicator.progressindicator.MDCircularProgressIndicator
attribute), 183 326
active (kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButtonItem(kivymd.uix.dialog.dialog.MDDialog
add_widget()
attribute), 174 method), 247
add_widget()
active (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox (kivymd.uix.dropdownitem.dropdownitem.MDDropDownIte
attribute), 254 method), 219
add_widget()
active (kivymd.uix.selectioncontrol.selectioncontrol.MDSwitch (kivymd.uix.expansionpanel.expansionpanel.MDExpansionP
attribute), 256 method), 113
active_indicator_color add_widget() (kivymd.uix.imagelist.imagelist.MDSmartTile
method), 293
(kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawerItem
attribute), 101 add_widget() (kivymd.uix.label.label.MDIcon method),
active_indicator_color 390
add_widget() (kivymd.uix.list.list.MDListItem method),
(kivymd.uix.navigationrail.navigationrail.MDNavigationRailItemIcon
attribute), 356 151
adaptive_height (kivymd.uix.MDAdaptiveWidget at- add_widget() (kivymd.uix.navigationbar.navigationbar.MDNavigationItem
tribute), 485 method), 399
adaptive_size (kivymd.uix.MDAdaptiveWidget at- add_widget() (kivymd.uix.navigationdrawer.navigationdrawer.MDNaviga
tribute), 485 method), 101
adaptive_width (kivymd.uix.MDAdaptiveWidget add_widget() (kivymd.uix.navigationdrawer.navigationdrawer.MDNaviga
attribute), 485 method), 102
add_doc_to_collection() add_widget() (kivymd.uix.navigationdrawer.navigationdrawer.MDNaviga
(kivymd.tools.patterns.MVC.Model.database_restdb.DataBasemethod), 100
method), 482 add_widget() (kivymd.uix.navigationrail.navigationrail.MDNavigationRa
add_marked_icon_to_chip() method), 358
(kivymd.uix.chip.chip.MDChip method), add_widget() (kivymd.uix.navigationrail.navigationrail.MDNavigationRa
325 method), 357
add_widget() (kivymd.uix.screenmanager.MDScreenManager
add_scrim() (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationLayout
method), 100 method), 63
add_widget() (kivymd.uix.appbar.appbar.MDBottomAppBar add_widget() (kivymd.uix.segmentedbutton.segmentedbutton.MDSegment
method), 235 method), 176
add_widget() (kivymd.uix.appbar.appbar.MDTopAppBar add_widget() (kivymd.uix.segmentedbutton.segmentedbutton.MDSegment
method), 233 method), 174
499
KivyMD, Release 2.0.1.dev0
500 Index
KivyMD, Release 2.0.1.dev0
Index 501
KivyMD, Release 2.0.1.dev0
502 Index
KivyMD, Release 2.0.1.dev0
Index 503
KivyMD, Release 2.0.1.dev0
504 Index
KivyMD, Release 2.0.1.dev0
F format() (kivymd.uix.textfield.textfield.AutoFormatTelephoneNumber
method), 204
fab_button (kivymd.uix.navigationrail.navigationrail.MDNavigationRail
attribute), 358 format_help() (kivymd.tools.argument_parser.ArgumentParserWithHelp
fab_button_opacity_value_disabled_container method), 469
FpsMonitor
(kivymd.uix.behaviors.state_layer_behavior.StateLayerBehavior(class in kivymd.utils.fpsmonitor), 491
attribute), 432 funbind() (kivymd.tools.patterns.MVC.libs.translation.Translation
fab_button_opacity_value_disabled_icon method), 482
(kivymd.uix.behaviors.state_layer_behavior.StateLayerBehavior
attribute), 432 G
fab_state (kivymd.uix.button.button.BaseFabButton at- generate_list_widgets_days()
tribute), 84 (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker
fade_out() (kivymd.uix.behaviors.ripple_behavior.CommonRipple method), 283
method), 443 generate_list_widgets_days()
fbind() (kivymd.tools.patterns.MVC.libs.translation.Translation (kivymd.uix.pickers.datepicker.datepicker.MDModalInputDatePick
method), 482 method), 285
field_filter() (kivymd.uix.textfield.textfield.AutoFormatTelephoneNumber
generate_list_widgets_years()
method), 204 (kivymd.uix.pickers.datepicker.datepicker.MDModalDatePicker
fill_color_focus (kivymd.uix.textfield.textfield.MDTextField method), 284
attribute), 212 generate_menu_month_year_selection()
fill_color_normal (kivymd.uix.textfield.textfield.MDTextField (kivymd.uix.pickers.datepicker.datepicker.MDDockedDatePicker
attribute), 212 method), 284
find_first_cubic_root() get_access_string()
(kivymd.animation.CubicBezier method), (kivymd.uix.filemanager.filemanager.MDFileManager
465 method), 142
finish_ripple() (kivymd.uix.behaviors.ripple_behavior.CommonRipple(kivymd.uix.circularlayout.MDCircularLayout
get_angle()
method), 443 method), 68
fit_mode (kivymd.uix.fitimage.fitimage.FitImage at- get_component() (kivymd.uix.scrollview.StretchOverScrollStencil
tribute), 186 method), 42
FitImage (class in kivymd.uix.fitimage.fitimage), 186 get_connect() (in module
float_epsilon (in module kivymd.animation), 465 kivymd.tools.patterns.MVC.Model.database_firebase),
focus_behavior (kivymd.uix.behaviors.focus_behavior.FocusBehavior 481
attribute), 449 get_connect() (in module
focus_color (kivymd.uix.behaviors.focus_behavior.FocusBehavior kivymd.tools.patterns.MVC.Model.database_restdb),
attribute), 449 482
FocusBehavior (class in get_content() (kivymd.uix.filemanager.filemanager.MDFileManager
kivymd.uix.behaviors.focus_behavior), 449 method), 142
font_color_down (kivymd.uix.behaviors.toggle_behavior.MDToggleButtonBehavior
get_current_date_from_format()
attribute), 414 (kivymd.uix.pickers.datepicker.datepicker.MDModalInputDatePick
method), 285
font_color_normal (kivymd.uix.behaviors.toggle_behavior.MDToggleButtonBehavior
attribute), 414 get_current_index()
font_path (in module (kivymd.uix.swiper.swiper.MDSwiper method),
kivymd.tools.release.update_icons), 484 298
font_style (kivymd.uix.label.label.MDLabel attribute), get_current_item() (kivymd.uix.swiper.swiper.MDSwiper
388 method), 298
font_style (kivymd.uix.textfield.textfield.MDTextField get_current_related_content()
attribute), 209 (kivymd.uix.tab.tab.MDTabsPrimary method),
font_styles (kivymd.theming.ThemeManager at- 373
tribute), 14 get_current_tab() (kivymd.uix.tab.tab.MDTabsPrimary
font_version (in module method), 373
kivymd.tools.release.update_icons), 484 get_data_from_collection()
fonts (in module kivymd.font_definitions), 25 (kivymd.tools.patterns.MVC.Model.database_firebase.DataBase
fonts_path (in module kivymd), 463 method), 481
FOREGROUND_LOCK (kivymd.tools.hotreload.app.MDApp get_data_from_collection()
attribute), 471 (kivymd.tools.patterns.MVC.Model.database_restdb.DataBase
Index 505
KivyMD, Release 2.0.1.dev0
506 Index
KivyMD, Release 2.0.1.dev0
Index 507
KivyMD, Release 2.0.1.dev0
508 Index
KivyMD, Release 2.0.1.dev0
kivymd.tools.release.git_commands kivymd.uix.button
module, 483 module, 486
kivymd.tools.release.make_release kivymd.uix.button.button
module, 483 module, 69
kivymd.tools.release.update_icons kivymd.uix.card
module, 484 module, 486
kivymd.uix kivymd.uix.card.card
module, 485 module, 152
kivymd.uix.anchorlayout kivymd.uix.chip
module, 60 module, 487
kivymd.uix.appbar kivymd.uix.chip.chip
module, 486 module, 308
kivymd.uix.appbar.appbar kivymd.uix.circularlayout
module, 220 module, 67
kivymd.uix.badge kivymd.uix.controllers
module, 486 module, 487
kivymd.uix.badge.badge kivymd.uix.controllers.windowcontroller
module, 187 module, 401
kivymd.uix.behaviors kivymd.uix.dialog
module, 486 module, 487
kivymd.uix.behaviors.backgroundcolor_behavior kivymd.uix.dialog.dialog
module, 416 module, 236
kivymd.uix.behaviors.declarative_behavior kivymd.uix.divider
module, 434 module, 487
kivymd.uix.behaviors.elevation kivymd.uix.divider.divider
module, 418 module, 285
kivymd.uix.behaviors.focus_behavior kivymd.uix.dropdownitem
module, 448 module, 487
kivymd.uix.behaviors.hover_behavior kivymd.uix.dropdownitem.dropdownitem
module, 414 module, 217
kivymd.uix.behaviors.magic_behavior kivymd.uix.expansionpanel
module, 405 module, 487
kivymd.uix.behaviors.motion_behavior kivymd.uix.expansionpanel.expansionpanel
module, 402 module, 106
kivymd.uix.behaviors.ripple_behavior kivymd.uix.filemanager
module, 440 module, 487
kivymd.uix.behaviors.rotate_behavior kivymd.uix.filemanager.filemanager
module, 407 module, 134
kivymd.uix.behaviors.scale_behavior kivymd.uix.fitimage
module, 409 module, 488
kivymd.uix.behaviors.state_layer_behavior kivymd.uix.fitimage.fitimage
module, 432 module, 184
kivymd.uix.behaviors.stencil_behavior kivymd.uix.floatlayout
module, 446 module, 36
kivymd.uix.behaviors.toggle_behavior kivymd.uix.gridlayout
module, 411 module, 37
kivymd.uix.behaviors.touch_behavior kivymd.uix.hero
module, 444 module, 48
kivymd.uix.bottomsheet kivymd.uix.imagelist
module, 486 module, 488
kivymd.uix.bottomsheet.bottomsheet kivymd.uix.imagelist.imagelist
module, 326 module, 289
kivymd.uix.boxlayout kivymd.uix.label
module, 64 module, 488
Index 509
KivyMD, Release 2.0.1.dev0
kivymd.uix.label.label kivymd.uix.segmentedbutton
module, 374 module, 489
kivymd.uix.list kivymd.uix.segmentedbutton.segmentedbutton
module, 488 module, 166
kivymd.uix.list.list kivymd.uix.selectioncontrol
module, 143 module, 489
kivymd.uix.menu kivymd.uix.selectioncontrol.selectioncontrol
module, 488 module, 249
kivymd.uix.menu.menu kivymd.uix.slider
module, 114 module, 490
kivymd.uix.navigationbar kivymd.uix.slider.slider
module, 488 module, 334
kivymd.uix.navigationbar.navigationbar kivymd.uix.sliverappbar
module, 391 module, 490
kivymd.uix.navigationdrawer kivymd.uix.sliverappbar.sliverappbar
module, 488 module, 339
kivymd.uix.navigationdrawer.navigationdrawer kivymd.uix.snackbar
module, 88 module, 490
kivymd.uix.navigationrail kivymd.uix.snackbar.snackbar
module, 488 module, 188
kivymd.uix.navigationrail.navigationrail kivymd.uix.stacklayout
module, 346 module, 43
kivymd.uix.pickers kivymd.uix.swiper
module, 489 module, 490
kivymd.uix.pickers.datepicker kivymd.uix.swiper.swiper
module, 489 module, 294
kivymd.uix.pickers.datepicker.datepicker kivymd.uix.tab
module, 272 module, 490
kivymd.uix.pickers.timepicker kivymd.uix.tab.tab
module, 489 module, 359
kivymd.uix.pickers.timepicker.timepicker kivymd.uix.textfield
module, 260 module, 490
kivymd.uix.progressindicator kivymd.uix.textfield.textfield
module, 489 module, 198
kivymd.uix.progressindicator.progressindicatorkivymd.uix.tooltip
module, 177 module, 490
kivymd.uix.recyclegridlayout kivymd.uix.tooltip.tooltip
module, 61 module, 302
kivymd.uix.recycleview kivymd.uix.transition
module, 38 module, 490
kivymd.uix.refreshlayout kivymd.uix.transition.transition
module, 489 module, 196
kivymd.uix.refreshlayout.refreshlayout kivymd.uix.widget
module, 299 module, 63
kivymd.uix.relativelayout kivymd.utils
module, 45 module, 491
kivymd.uix.responsivelayout kivymd.utils.fpsmonitor
module, 46 module, 491
kivymd.uix.screen kivymd.utils.set_bars_colors
module, 66 module, 491
kivymd.uix.screenmanager kivymd_path (in module
module, 62 kivymd.tools.release.update_icons), 484
kivymd.uix.scrollview KV_DIRS (kivymd.tools.hotreload.app.MDApp attribute),
module, 39 471
510 Index
KivyMD, Release 2.0.1.dev0
Index 511
KivyMD, Release 2.0.1.dev0
md_bg_color (kivymd.uix.behaviors.backgroundcolor_behavior.BackgroundColorBehavior
MDBottomAppBar (class in kivymd.uix.appbar.appbar),
attribute), 417 233
md_bg_color (kivymd.uix.button.button.BaseButton at- MDBottomSheet (class in
tribute), 85 kivymd.uix.bottomsheet.bottomsheet), 333
md_bg_color (kivymd.uix.tab.tab.MDTabsPrimary at- MDBottomSheetDragHandle (class in
tribute), 371 kivymd.uix.bottomsheet.bottomsheet), 332
md_bg_color_disabled MDBottomSheetDragHandleButton (class in
(kivymd.uix.appbar.appbar.MDActionTopAppBarButton kivymd.uix.bottomsheet.bottomsheet), 332
attribute), 231 MDBottomSheetDragHandleTitle (class in
md_bg_color_disabled kivymd.uix.bottomsheet.bottomsheet), 332
(kivymd.uix.button.button.BaseButton at- MDBoxLayout (class in kivymd.uix.boxlayout), 65
tribute), 85 MDButton (class in kivymd.uix.button.button), 85
md_bg_color_disabled MDButtonIcon (class in kivymd.uix.button.button), 86
(kivymd.uix.button.button.BaseFabButton MDButtonText (class in kivymd.uix.button.button), 86
attribute), 84 MDCard (class in kivymd.uix.card.card), 163
md_bg_color_disabled MDCardSwipe (class in kivymd.uix.card.card), 163
(kivymd.uix.button.button.MDIconButton MDCardSwipeFrontBox (class in kivymd.uix.card.card),
attribute), 86 166
md_bg_color_disabled MDCardSwipeLayerBox (class in kivymd.uix.card.card),
(kivymd.uix.card.card.MDCard attribute), 166
163 MDCheckbox (class in kivymd.uix.selectioncontrol.selectioncontrol),
md_bg_color_disabled 254
(kivymd.uix.list.list.BaseListItem attribute), MDChip (class in kivymd.uix.chip.chip), 324
150 MDChipLeadingAvatar (class in kivymd.uix.chip.chip),
md_bg_color_disabled 324
(kivymd.uix.navigationrail.navigationrail.MDNavigationRailFabButton
MDChipLeadingIcon (class in kivymd.uix.chip.chip),
attribute), 356 324
md_bg_color_disabled MDChipText (class in kivymd.uix.chip.chip), 324
(kivymd.uix.navigationrail.navigationrail.MDNavigationRailMenuButton
MDChipTrailingIcon (class in kivymd.uix.chip.chip),
attribute), 356 324
md_bg_color_disabled MDCircularLayout (class in kivymd.uix.circularlayout),
(kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButtonItem
67
attribute), 174 MDCircularProgressIndicator (class in
md_bg_color_disabled kivymd.uix.progressindicator.progressindicator),
(kivymd.uix.selectioncontrol.selectioncontrol.MDSwitch 183
attribute), 256 MDDialog (class in kivymd.uix.dialog.dialog), 247
md_icons (in module kivymd.icon_definitions), 25 MDDialogButtonContainer (class in
MDActionBottomAppBarButton (class in kivymd.uix.dialog.dialog), 249
kivymd.uix.appbar.appbar), 232 MDDialogContentContainer (class in
MDActionTopAppBarButton (class in kivymd.uix.dialog.dialog), 248
kivymd.uix.appbar.appbar), 231 MDDialogHeadlineText (class in
MDAdaptiveWidget (class in kivymd.uix), 485 kivymd.uix.dialog.dialog), 248
MDAnchorLayout (class in kivymd.uix.anchorlayout), 60 MDDialogIcon (class in kivymd.uix.dialog.dialog), 248
MDAnimationTransition (class in kivymd.animation), MDDialogSupportingText (class in
465 kivymd.uix.dialog.dialog), 248
MDApp (class in kivymd.app), 22 MDDivider (class in kivymd.uix.divider.divider), 288
MDApp (class in kivymd.tools.hotreload.app), 471 MDDockedDatePicker (class in
MDBadge (class in kivymd.uix.badge.badge), 188 kivymd.uix.pickers.datepicker.datepicker),
MDBaseDatePicker (class in 284
kivymd.uix.pickers.datepicker.datepicker), MDDropDownItem (class in
281 kivymd.uix.dropdownitem.dropdownitem),
MDBaseTimePicker (class in 219
kivymd.uix.pickers.timepicker.timepicker), MDDropDownItemText (class in
269 kivymd.uix.dropdownitem.dropdownitem),
512 Index
KivyMD, Release 2.0.1.dev0
Index 513
KivyMD, Release 2.0.1.dev0
514 Index
KivyMD, Release 2.0.1.dev0
Index 515
KivyMD, Release 2.0.1.dev0
516 Index
KivyMD, Release 2.0.1.dev0
month (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker
on_action_items() (kivymd.uix.appbar.appbar.MDBottomAppBar
attribute), 281 method), 235
MotionBase (class in kivymd.uix.behaviors.motion_behavior),on_active() (kivymd.uix.chip.chip.MDChip method),
402 325
MotionDatePickerBehavior (class in on_active() (kivymd.uix.navigationbar.navigationbar.MDNavigationItem
kivymd.uix.behaviors.motion_behavior), method), 399
404 on_active() (kivymd.uix.navigationrail.navigationrail.MDNavigationRail
MotionDialogBehavior (class in method), 357
kivymd.uix.behaviors.motion_behavior), on_active() (kivymd.uix.progressindicator.progressindicator.MDCircular
404 method), 183
MotionDropDownMenuBehavior (class in on_active() (kivymd.uix.segmentedbutton.segmentedbutton.MDSegmented
kivymd.uix.behaviors.motion_behavior), method), 175
402 on_active() (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox
MotionExtendedFabButtonBehavior (class in method), 256
kivymd.uix.behaviors.motion_behavior), 403 on_active() (kivymd.uix.selectioncontrol.selectioncontrol.MDSwitch
MotionShackBehavior (class in method), 260
kivymd.uix.behaviors.motion_behavior), on_adaptive_height()
404 (kivymd.uix.MDAdaptiveWidget method),
MotionTimePickerBehavior (class in 485
kivymd.uix.behaviors.motion_behavior), on_adaptive_size() (kivymd.uix.MDAdaptiveWidget
404 method), 486
move_changelog() (in module on_adaptive_width() (kivymd.uix.MDAdaptiveWidget
kivymd.tools.release.make_release), 484 method), 485
multiselect (kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButton
on_allow_selection()
attribute), 175 (kivymd.uix.label.label.MDLabel method),
390
N on_am_pm() (kivymd.uix.pickers.timepicker.timepicker.MDBaseTimePicker
name (kivymd.tools.patterns.MVC.Model.database_firebase.DataBase method), 271
attribute), 481 on_anchor() (kivymd.uix.card.card.MDCardSwipe
name (kivymd.tools.patterns.MVC.Model.database_restdb.DataBase method), 165
attribute), 482 on_background_color()
(kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbar
O method), 345
on_background_color_toolbar()
observers (kivymd.tools.patterns.MVC.libs.translation.Translation
attribute), 482 (kivymd.uix.filemanager.filemanager.MDFileManager
method), 142
on__active() (kivymd.uix.navigationrail.navigationrail.MDNavigationRailItemLabel
method), 357 on_cancel() (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicke
on__appbar() (kivymd.uix.sliverappbar.sliverappbar.MDSliverAppbar method), 284
method), 346 on_cancel() (kivymd.uix.pickers.timepicker.timepicker.MDBaseTimePicke
on__drop_down_text() method), 271
on_cancel_selection()
(kivymd.uix.dropdownitem.dropdownitem.MDDropDownItem
method), 220 (kivymd.uix.label.label.MDLabel method),
390
on__opacity() (kivymd.uix.behaviors.motion_behavior.MotionDropDownMenuBehavior
method), 403 on_carousel_index()
on__rotation_angle() (kivymd.uix.tab.tab.MDTabsPrimary method),
373
(kivymd.uix.progressindicator.progressindicator.MDCircularProgressIndicator
method), 183 on_change_screen_type()
(kivymd.uix.responsivelayout.MDResponsiveLayout
on__scale_x() (kivymd.uix.behaviors.motion_behavior.MotionDropDownMenuBehavior
method), 403 method), 48
on_close() (kivymd.uix.expansionpanel.expansionpanel.MDExpansionPan
on__scale_y() (kivymd.uix.behaviors.motion_behavior.MotionDropDownMenuBehavior
method), 403 method), 113
on__x() (kivymd.uix.button.button.MDExtendedFabButton on_close() (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigatio
method), 88 method), 106
on_collapse() (kivymd.uix.button.button.MDExtendedFabButton
Index 517
KivyMD, Release 2.0.1.dev0
518 Index
KivyMD, Release 2.0.1.dev0
Index 519
KivyMD, Release 2.0.1.dev0
520 Index
KivyMD, Release 2.0.1.dev0
Index 521
KivyMD, Release 2.0.1.dev0
522 Index
KivyMD, Release 2.0.1.dev0
Index 523
KivyMD, Release 2.0.1.dev0
S (kivymd.uix.behaviors.state_layer_behavior.StateLayerBehavior
scale_axis (kivymd.uix.scrollview.StretchOverScrollStencil attribute), 433
attribute), 42 segmented_button_opacity_value_disabled_container_active
(kivymd.uix.behaviors.state_layer_behavior.StateLayerBehavior
scale_value_center (kivymd.uix.behaviors.elevation.CommonElevationBehavior
attribute), 431 attribute), 433
segmented_button_opacity_value_disabled_icon
scale_value_center (kivymd.uix.behaviors.scale_behavior.ScaleBehavior
attribute), 411 (kivymd.uix.behaviors.state_layer_behavior.StateLayerBehavior
scale_value_x (kivymd.uix.behaviors.elevation.CommonElevationBehavior attribute), 433
attribute), 431 segmented_button_opacity_value_disabled_line
scale_value_x (kivymd.uix.behaviors.scale_behavior.ScaleBehavior(kivymd.uix.behaviors.state_layer_behavior.StateLayerBehavior
attribute), 411 attribute), 433
segmented_button_opacity_value_disabled_text
scale_value_y (kivymd.uix.behaviors.elevation.CommonElevationBehavior
attribute), 431 (kivymd.uix.behaviors.state_layer_behavior.StateLayerBehavior
scale_value_y (kivymd.uix.behaviors.scale_behavior.ScaleBehaviorattribute), 433
attribute), 411 sel_day (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker
attribute), 283
scale_value_y (kivymd.uix.navigationrail.navigationrail.MDNavigationRailItemLabel
attribute), 356 sel_month (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker
scale_value_z (kivymd.uix.behaviors.elevation.CommonElevationBehavior 283attribute),
attribute), 431 sel_year (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker
scale_value_z (kivymd.uix.behaviors.scale_behavior.ScaleBehaviorattribute), 283
attribute), 411 select_dir_or_file()
ScaleBehavior (class in (kivymd.uix.filemanager.filemanager.MDFileManager
kivymd.uix.behaviors.scale_behavior), 411 method), 142
scrim_alpha_transition select_directory_on_press_button()
(kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawer(kivymd.uix.filemanager.filemanager.MDFileManager
attribute), 105 method), 142
scrim_color (kivymd.uix.dialog.dialog.MDDialog at- select_path (kivymd.uix.filemanager.filemanager.MDFileManager
tribute), 247 attribute), 141
selected (kivymd.uix.navigationdrawer.navigationdrawer.BaseNavigationD
scrim_color (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDrawer
attribute), 103 attribute), 100
selected_color
scrim_color (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker (kivymd.uix.chip.chip.MDChip at-
attribute), 282 tribute), 325
selected_color (kivymd.uix.segmentedbutton.segmentedbutton.MDSegme
scrim_color (kivymd.uix.pickers.timepicker.timepicker.MDBaseTimePicker
attribute), 270 attribute), 174
scrimColor (kivymd.dynamic_color.DynamicColor at- selected_color (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckb
tribute), 35 attribute), 255
scroll (kivymd.effects.stiffscroll.stiffscroll.StiffScrollEffect selected_icon_color
attribute), 450 (kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButt
scroll_cls (kivymd.uix.appbar.appbar.MDBottomAppBar attribute), 176
attribute), 234 selected_segments (kivymd.uix.segmentedbutton.segmentedbutton.MDSe
scroll_friction (kivymd.uix.scrollview.StretchOverScrollStencil attribute), 176
attribute), 42 selection (kivymd.uix.filemanager.filemanager.MDFileManager
scroll_scale (kivymd.uix.scrollview.StretchOverScrollStencil attribute), 142
attribute), 42 selection_button (kivymd.uix.filemanager.filemanager.MDFileManager
scroll_view (kivymd.uix.scrollview.StretchOverScrollStencil attribute), 142
attribute), 42 selector (kivymd.uix.filemanager.filemanager.MDFileManager
search (kivymd.uix.filemanager.filemanager.MDFileManager attribute), 142
attribute), 141 set_active_item() (kivymd.uix.navigationbar.navigationbar.MDNavigat
secondaryColor (kivymd.dynamic_color.DynamicColor method), 400
attribute), 33 set_active_item() (kivymd.uix.navigationrail.navigationrail.MDNavigat
secondaryContainerColor method), 358
(kivymd.dynamic_color.DynamicColor at- set_active_item() (kivymd.uix.tab.tab.MDTabsPrimary
tribute), 33 method), 373
segmented_button_opacity_value_disabled_container set_bars_color (kivymd.uix.appbar.appbar.MDTopAppBar
524 Index
KivyMD, Release 2.0.1.dev0
attribute), 232 86
set_bars_color (kivymd.uix.navigationbar.navigationbar.MDNavigationBar
set_properties_widget()
attribute), 400 (kivymd.uix.button.button.MDFabButton
set_bars_colors() (in module method), 87
kivymd.utils.set_bars_colors), 491 set_properties_widget()
set_calendar_layout_properties() (kivymd.uix.card.card.MDCard method),
(kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker163
method), 283 set_properties_widget()
set_chevron_down() (kivymd.uix.expansionpanel.expansionpanel.MDExpansionPanel
(kivymd.uix.navigationdrawer.navigationdrawer.MDNavigationDr
method), 113 method), 105
set_chevron_up() (kivymd.uix.expansionpanel.expansionpanel.MDExpansionPanel
set_root_active() (kivymd.uix.selectioncontrol.selectioncontrol.MDChe
method), 113 method), 256
set_child_active() (kivymd.uix.selectioncontrol.selectioncontrol.MDCheckbox
set_scale() (kivymd.uix.behaviors.motion_behavior.MotionDropDownMe
method), 256 method), 403
set_chip_bg_color() (kivymd.uix.chip.chip.MDChip set_scale_origin() (kivymd.uix.scrollview.StretchOverScrollStencil
method), 325 method), 42
set_colors() (kivymd.theming.ThemeManager set_screen() (kivymd.uix.responsivelayout.MDResponsiveLayout
method), 17 method), 48
set_current() (kivymd.uix.swiper.swiper.MDSwiper set_selected_widget()
method), 298 (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker
set_error() (kivymd.tools.hotreload.app.MDApp method), 283
method), 472 set_space_in_line()
set_fab_icon() (kivymd.uix.appbar.appbar.MDBottomAppBar (kivymd.uix.textfield.textfield.MDTextField
method), 235 method), 217
set_fab_opacity() (kivymd.uix.appbar.appbar.MDBottomAppBar
set_state() (kivymd.uix.navigationdrawer.navigationdrawer.MDNavigati
method), 235 method), 105
set_hint_text_font_size() set_status_bar_color()
(kivymd.uix.textfield.textfield.MDTextField (kivymd.uix.navigationbar.navigationbar.MDNavigationBar
method), 217 method), 400
set_icon() (kivymd.uix.selectioncontrol.selectioncontrol.MDSwitch
set_target_height()
method), 260 (kivymd.uix.menu.menu.MDDropdownMenu
set_input_date() (kivymd.uix.pickers.datepicker.datepicker.MDModalInputDatePicker
method), 133
method), 285 set_text() (kivymd.uix.textfield.textfield.MDTextField
set_max_text_length() method), 217
(kivymd.uix.textfield.textfield.MDTextField set_text_full_date()
method), 217 (kivymd.uix.pickers.datepicker.datepicker.MDBaseDatePicker
set_menu_pos() (kivymd.uix.menu.menu.MDDropdownMenu method), 283
method), 133 set_texture_color()
set_menu_properties() (kivymd.uix.textfield.textfield.MDTextField
(kivymd.uix.menu.menu.MDDropdownMenu method), 217
method), 133 set_time() (kivymd.uix.pickers.timepicker.timepicker.MDBaseTimePicker
set_opacity() (kivymd.uix.behaviors.motion_behavior.MotionDropDownMenuBehavior
method), 270
method), 403 set_widget() (kivymd.tools.hotreload.app.MDApp
set_opacity_text_button() method), 472
(kivymd.uix.behaviors.motion_behavior.MotionExtendedFabButtonBehavior
shadow_color (kivymd.uix.behaviors.elevation.CommonElevationBehavior
method), 404 attribute), 430
set_pos_hint_text() shadow_offset (kivymd.uix.behaviors.elevation.CommonElevationBehavio
(kivymd.uix.textfield.textfield.MDTextField attribute), 428
method), 217 shadow_radius (kivymd.uix.behaviors.elevation.CommonElevationBehavio
set_properties_widget() attribute), 425
(kivymd.uix.behaviors.state_layer_behavior.StateLayerBehavior
shadow_radius (kivymd.uix.button.button.BaseButton
method), 434 attribute), 85
set_properties_widget() shadow_softness (kivymd.uix.behaviors.elevation.CommonElevationBeha
(kivymd.uix.button.button.MDButton method), attribute), 426
Index 525
KivyMD, Release 2.0.1.dev0
526 Index
KivyMD, Release 2.0.1.dev0
Index 527
KivyMD, Release 2.0.1.dev0
528 Index
KivyMD, Release 2.0.1.dev0
Index 529
KivyMD, Release 2.0.1.dev0
V
Validator (class in kivymd.uix.textfield.textfield), 204
validator (kivymd.uix.textfield.textfield.MDTextField
attribute), 213
value_container_hide_anim_duration
(kivymd.uix.slider.slider.MDSlider attribute),
337
value_container_hide_anim_transition
(kivymd.uix.slider.slider.MDSlider attribute),
337
value_container_show_anim_duration
(kivymd.uix.slider.slider.MDSlider attribute),
336
530 Index