CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-kivymd

Set of widgets for Kivy inspired by Google's Material Design

Pending
Overview
Eval results
Files

advanced.mddocs/

Advanced Components

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.

Capabilities

Date and Time Pickers

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 format

Expansion Panels

Collapsible 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 theme

Chips

Compact 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 Manager

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

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."""

Banner

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."""

Segmented Control

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."""

Selection Lists

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."""

Swiper

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."""

Smart Tile

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 callback

Usage Examples

Date and Time Pickers

from 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}")

Expansion Panels

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 layout

File Manager

from 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()

Chips

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}")

Swiper with Content

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 swiper

Data Table Integration

from 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

docs

advanced.md

animations.md

application.md

buttons.md

dialogs.md

index.md

layouts.md

lists.md

navigation.md

text-input.md

tile.json