Set of widgets for Kivy inspired by Google's Material Design
—
Advanced UI components for complex interactions and specialized use cases. These components include date/time pickers, expansion panels, chips, data tables, file managers, and other sophisticated widgets that provide rich functionality beyond basic UI elements.
Date and time selection components with Material Design styling and intuitive interfaces.
class MDDatePicker:
"""
Material Design date picker.
Interactive calendar widget for selecting dates with Material Design
styling and smooth animations.
"""
# Date properties
year: int # Selected year
month: int # Selected month (1-12)
day: int # Selected day
# Date range
min_year: int # Minimum selectable year
max_year: int # Maximum selectable year
min_date: object # Minimum selectable date
max_date: object # Maximum selectable date
# Visual styling
primary_color: str | list # Primary color theme
accent_color: str | list # Accent color theme
selector_color: str | list # Date selector color
text_toolbar_color: str | list # Toolbar text color
text_color: str | list # Calendar text color
text_current_color: str | list # Current date text color
# Callbacks
def on_save(self, instance, value, date_range):
"""
Called when date is saved.
Args:
instance: DatePicker instance
value: Selected date
date_range: Date range (for range selection)
"""
def on_cancel(self, instance, value):
"""Called when date picker is cancelled."""
class MDTimePicker:
"""
Material Design time picker.
Interactive time selection widget with clock interface and
Material Design styling.
"""
# Time properties
hour: int # Selected hour (0-23)
minute: int # Selected minute (0-59)
# Display format
time_format: str # Time format: "12" or "24"
# Visual styling
primary_color: str | list # Primary color theme
accent_color: str | list # Accent color theme
text_color: str | list # Text color
# Callbacks
def on_save(self, instance, time):
"""
Called when time is saved.
Args:
instance: TimePicker instance
time: Selected time as datetime.time
"""
def on_cancel(self, instance, time):
"""Called when time picker is cancelled."""
class MDColorPicker:
"""
Material Design color picker.
Color selection widget with Material Design color palette
and custom color selection capabilities.
"""
# Color selection
type_color: str # Color type: "primary", "accent"
# Callbacks
def on_release(self, instance_color_picker, type_color, selected_color):
"""
Called when color is selected.
Args:
instance_color_picker: ColorPicker instance
type_color: Type of color selected
selected_color: Selected color value
"""
class BaseDialogPicker:
"""
Base class for dialog-based pickers.
Foundation class for picker dialogs with common functionality.
"""
class DatePickerInputField:
"""
Date picker input field.
Text field that opens date picker when focused.
"""
text: str # Current date text
date_format: str # Date display formatCollapsible panels for organizing content in expandable sections.
class MDExpansionPanel:
"""
Material Design expansion panel.
Collapsible container that can expand to reveal additional content
while maintaining a compact collapsed state.
"""
# Content
content: object # Panel content widget
panel_cls: object # Panel header class
# State
is_open: bool # Panel open/closed state
# Animation
opening_transition: str # Opening animation type
opening_time: float # Opening animation duration
closing_transition: str # Closing animation type
closing_time: float # Closing animation duration
def open(self):
"""Open the expansion panel."""
def close(self):
"""Close the expansion panel."""
class MDExpansionPanelOneLine:
"""
Single line expansion panel header.
Panel header with single line of text and expand/collapse icon.
"""
text: str # Header text
secondary_text: str # Secondary text (shown when expanded)
icon: str # Panel icon
class MDExpansionPanelTwoLine:
"""
Two line expansion panel header.
Panel header with primary and secondary text lines.
"""
text: str # Primary header text
secondary_text: str # Secondary header text
icon: str # Panel icon
class MDExpansionPanelThreeLine:
"""
Three line expansion panel header.
Panel header with primary text and multi-line secondary text.
"""
text: str # Primary header text
secondary_text: str # Secondary header text (multi-line)
tertiary_text: str # Tertiary header text
icon: str # Panel icon
class MDExpansionPanelLabel:
"""
Expansion panel text label.
Text label component for expansion panel headers.
"""
text: str # Label text
theme_text_color: str # Text color themeCompact elements that represent inputs, attributes, or actions.
class MDChip:
"""
Material Design chip.
Compact element that represents complex entities like contacts,
tags, or actions in a small format.
"""
# Content
text: str # Chip text
icon: str # Chip icon (optional)
# State
active: bool # Chip active state
selected: bool # Chip selected state
check: bool # Show check mark when selected
# Visual styling
color: str | list # Chip background color
text_color: str | list # Text color
icon_color: str | list # Icon color
check_color: str | list # Check mark color
# Interaction
radius: float # Chip corner radius
height: str # Chip height (e.g., "32dp")
def on_release(self):
"""Called when chip is tapped."""
def on_active(self, instance, active: bool):
"""Called when chip active state changes."""File and directory browser component for file selection and management.
class MDFileManager:
"""
Material Design file manager.
File browser widget for navigating directories and selecting files
with Material Design styling and functionality.
"""
# Navigation
current_path: str # Current directory path
previous: bool # Enable back navigation
# File filtering
ext: list # Allowed file extensions
search: str # Search filter
# Selection
selector: str # Selection mode: "file", "folder", "any"
multiselection: bool # Enable multiple selection
# Visual styling
icon_folder: str # Folder icon
icon_file: str # File icon
# Callbacks
def on_selection(self, selection: list):
"""
Called when files/folders are selected.
Args:
selection (list): List of selected paths
"""
def on_cancel(self):
"""Called when file manager is cancelled."""
# Navigation methods
def show(self, path: str):
"""
Show file manager at specified path.
Args:
path (str): Directory path to display
"""
def back(self):
"""Navigate to parent directory."""
def close(self):
"""Close the file manager."""Backdrop component that reveals hidden content behind the main interface.
class MDBackdrop:
"""
Material Design backdrop.
Component that conceals and reveals content using a back layer
that appears behind the front layer of the interface.
"""
# Layers
back_layer: object # Hidden back layer content
front_layer: object # Main front layer content
# State
open: bool # Backdrop open/closed state
# Animation
opening_transition: str # Opening animation type
closing_transition: str # Closing animation type
duration: float # Animation duration
# Visual styling
backdrop_color: str | list # Backdrop background color
def open_backdrop(self):
"""Open the backdrop to reveal back layer."""
def close_backdrop(self):
"""Close the backdrop to hide back layer."""Informational banner that displays important messages at the top of screens.
class MDBanner:
"""
Material Design banner.
Displays important, persistent information and related optional actions
at the top of a screen.
"""
# Content
text: str # Banner message text
left_action: list # Left action buttons
right_action: list # Right action buttons
# Visual styling
md_bg_color: str | list # Background color
text_color: str | list # Text color
# Behavior
auto_dismiss: bool # Auto dismiss banner
def show(self):
"""Show the banner."""
def hide(self):
"""Hide the banner."""Multi-option selection control with connected segments.
class MDSegmentedControl:
"""
Material Design segmented control.
Multi-option selection control with connected button segments,
allowing users to select from closely related options.
"""
# Options
segment_items: list # List of segment items
# Selection
current_active_segment: object # Currently active segment
# Visual styling
md_bg_color: str | list # Background color
segment_color: str | list # Segment color
def on_segment_switch(self, segment):
"""
Called when segment is switched.
Args:
segment: Selected segment instance
"""
class MDSegmentedControlItem:
"""
Individual segment in segmented control.
Single segment button within a segmented control.
"""
text: str # Segment text
icon: str # Segment icon (optional)
active: bool # Segment active state
def on_release(self):
"""Called when segment is selected."""Lists with selection capabilities for multiple items.
class MDSelectionList:
"""
Material Design selection list.
List component that supports multiple item selection with
checkboxes and selection indicators.
"""
# Selection
selected_mode: bool # Selection mode enabled
selected_items: list # List of selected items
# Visual styling
selection_color: str | list # Selection indicator color
def get_selected_items(self) -> list:
"""
Get list of selected items.
Returns:
list: Selected items
"""
def select_all(self):
"""Select all items in the list."""
def unselect_all(self):
"""Unselect all items in the list."""Swipeable content panels for browsing through multiple views.
class MDSwiper:
"""
Material Design swiper.
Container for multiple panels that can be swiped horizontally
to navigate between different content views.
"""
# Navigation
items_spacing: str # Spacing between swiper items
transition_max: float # Maximum transition distance
transition_min: float # Minimum transition distance
# Indicators
width_mult: float # Width multiplier for indicators
# Callbacks
def on_swipe(self, instance, touch, offset):
"""
Called during swipe gesture.
Args:
instance: Swiper instance
touch: Touch event
offset: Swipe offset
"""
def get_current_item(self):
"""Get currently visible swiper item."""
class MDSwiperItem:
"""
Individual swiper panel.
Single panel within a swiper that contains content.
"""
# Content - add widgets to this item
def on_swipe_left(self):
"""Called when swiped left."""
def on_swipe_right(self):
"""Called when swiped right."""Image tile component for displaying images in grid layouts.
class MDSmartTile:
"""
Smart tile for image lists and grids.
Tile component that displays images with optional overlay
text and actions, commonly used in image galleries.
"""
# Image
source: str # Image source path or URL
# Overlay
text: str # Overlay text
overlap: bool # Text overlaps image
# Visual styling
box_color: str | list # Overlay box color
text_color: str | list # Text color
# Interaction
on_release: object # Release callbackfrom kivymd.uix.pickers import MDDatePicker, MDTimePicker
from kivymd.uix.button import MDRaisedButton
from datetime import date
class MyApp(MDApp):
def show_date_picker(self):
"""Show date picker dialog."""
date_dialog = MDDatePicker(
year=2024,
month=1,
day=15,
primary_color="primary",
accent_color="accent"
)
date_dialog.bind(on_save=self.on_date_save)
date_dialog.open()
def show_time_picker(self):
"""Show time picker dialog."""
time_dialog = MDTimePicker(
primary_color="primary",
accent_color="accent",
time_format="24"
)
time_dialog.bind(on_save=self.on_time_save)
time_dialog.open()
def on_date_save(self, instance, value, date_range):
"""Handle date selection."""
print(f"Selected date: {value}")
def on_time_save(self, instance, time):
"""Handle time selection."""
print(f"Selected time: {time}")from kivymd.uix.expansionpanel import MDExpansionPanel, MDExpansionPanelOneLine
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.label import MDLabel
class MyApp(MDApp):
def build(self):
layout = MDBoxLayout(
orientation="vertical",
adaptive_height=True,
spacing="8dp"
)
# Create expansion panels
panel_data = [
("General Settings", "Configure general application settings"),
("Privacy Settings", "Manage privacy and security options"),
("Notification Settings", "Control app notifications"),
("Advanced Settings", "Advanced configuration options")
]
for title, description in panel_data:
# Create panel content
content = MDBoxLayout(
orientation="vertical",
adaptive_height=True,
padding="16dp"
)
content.add_widget(MDLabel(
text=description,
theme_text_color="Secondary"
))
# Create panel header
panel_header = MDExpansionPanelOneLine(
text=title,
icon="cog"
)
# Create expansion panel
panel = MDExpansionPanel(
content=content,
panel_cls=panel_header,
opening_transition="out_cubic",
opening_time=0.2
)
layout.add_widget(panel)
return layoutfrom kivymd.uix.filemanager import MDFileManager
from kivymd.uix.button import MDRaisedButton
import os
class MyApp(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
# Initialize file manager
self.file_manager = MDFileManager(
exit_manager=self.exit_manager,
select_path=self.select_path,
previous=True,
ext=['.txt', '.py', '.md', '.json'],
search='all'
)
def build(self):
button = MDRaisedButton(
text="Open File Manager",
pos_hint={"center_x": 0.5, "center_y": 0.5},
on_release=self.file_manager_open
)
return button
def file_manager_open(self, instance):
"""Open file manager."""
self.file_manager.show(os.path.expanduser("~"))
def select_path(self, path):
"""Handle file selection."""
print(f"Selected file: {path}")
self.exit_manager()
def exit_manager(self, *args):
"""Close file manager."""
self.file_manager.close()from kivymd.uix.chip import MDChip
from kivymd.uix.boxlayout import MDBoxLayout
class MyApp(MDApp):
def build(self):
layout = MDBoxLayout(
orientation="vertical",
spacing="16dp",
adaptive_height=True,
padding="16dp"
)
# Create different types of chips
chips_data = [
("Python", "language-python", True),
("JavaScript", "language-javascript", False),
("Java", "language-java", False),
("Swift", "language-swift", False),
("Kotlin", "language-kotlin", False)
]
for text, icon, active in chips_data:
chip = MDChip(
text=text,
icon=icon,
active=active,
check=True,
on_release=lambda x, chip_text=text: self.chip_selected(chip_text)
)
layout.add_widget(chip)
return layout
def chip_selected(self, chip_text):
"""Handle chip selection."""
print(f"Chip selected: {chip_text}")from kivymd.uix.swiper import MDSwiper, MDSwiperItem
from kivymd.uix.label import MDLabel
from kivymd.uix.card import MDCard
class MyApp(MDApp):
def build(self):
# Create swiper
swiper = MDSwiper(
items_spacing="20dp",
size_hint_y=0.8,
pos_hint={"center_y": 0.5}
)
# Create swiper items
colors = ["red", "green", "blue", "orange", "purple"]
for i, color in enumerate(colors):
item = MDSwiperItem()
# Create card content for each item
card = MDCard(
md_bg_color=color,
elevation=4,
padding="16dp",
radius=[16, 16, 16, 16],
size_hint=(0.8, 0.8),
pos_hint={"center_x": 0.5, "center_y": 0.5}
)
label = MDLabel(
text=f"Slide {i + 1}",
halign="center",
theme_text_color="Custom",
text_color=[1, 1, 1, 1],
font_style="H4"
)
card.add_widget(label)
item.add_widget(card)
swiper.add_widget(item)
return swiperfrom kivymd.uix.datatables import MDDataTable
from kivymd.uix.button import MDRaisedButton
from kivy.metrics import dp
class MyApp(MDApp):
def build(self):
layout = MDBoxLayout(
orientation="vertical",
spacing="16dp",
padding="16dp"
)
# Create data table
self.data_table = MDDataTable(
size_hint=(1, 0.8),
column_data=[
("Product", dp(80)),
("Category", dp(60)),
("Price", dp(50)),
("Stock", dp(50)),
("Rating", dp(50))
],
row_data=[
("Laptop", "Electronics", "$999", "15", "4.5"),
("Phone", "Electronics", "$699", "23", "4.2"),
("Book", "Education", "$29", "67", "4.8"),
("Chair", "Furniture", "$199", "8", "4.1"),
("Desk", "Furniture", "$399", "5", "4.6")
],
sorted_on="Product",
elevation=2,
use_pagination=True,
rows_num=3,
check=True
)
self.data_table.bind(
on_row_press=self.on_row_press,
on_check_press=self.on_check_press
)
# Add controls
controls = MDBoxLayout(
orientation="horizontal",
spacing="16dp",
adaptive_height=True,
size_hint_y=None,
height="48dp"
)
select_all_btn = MDRaisedButton(
text="Select All",
size_hint_x=0.5,
on_release=self.select_all_rows
)
export_btn = MDRaisedButton(
text="Export Selected",
size_hint_x=0.5,
on_release=self.export_selected
)
controls.add_widget(select_all_btn)
controls.add_widget(export_btn)
layout.add_widget(self.data_table)
layout.add_widget(controls)
return layout
def on_row_press(self, instance_table, instance_row):
"""Handle row press."""
print(f"Row pressed: {instance_row.text}")
def on_check_press(self, instance_table, current_row):
"""Handle row check."""
print(f"Row checked: {current_row}")
def select_all_rows(self, instance):
"""Select all rows."""
# Implementation would select all rows
pass
def export_selected(self, instance):
"""Export selected rows."""
# Implementation would export selected data
print("Exporting selected rows")Install with Tessl CLI
npx tessl i tessl/pypi-kivymd