Set of widgets for Kivy inspired by Google's Material Design
—
Comprehensive list components and data display widgets for presenting structured information. These components include various list item types, data tables, and specialized display widgets that follow Material Design guidelines for information hierarchy and visual organization.
Main container for organizing list items with Material Design styling.
class MDList:
"""
Material Design list container.
Container widget for organizing list items with consistent spacing
and Material Design styling.
"""
spacing: str | int # Spacing between list items
adaptive_height: bool # Adapt height to content
def add_widget(self, widget):
"""Add list item to the list."""List items that display content in a single line with various configurations.
class OneLineListItem:
"""
Single line list item with text only.
Basic list item displaying only text content.
"""
text: str # Primary text content
theme_text_color: str # Text color theme
divider: str # Divider type: "Full", "Inset", None
class OneLineAvatarListItem:
"""
Single line list item with avatar space.
List item with space reserved for avatar on the left side.
"""
text: str # Primary text content
theme_text_color: str # Text color theme
class OneLineIconListItem:
"""
Single line list item with left icon space.
List item with space reserved for icon on the left side.
"""
text: str # Primary text content
theme_text_color: str # Text color theme
class OneLineRightIconListItem:
"""
Single line list item with right icon space.
List item with space reserved for icon on the right side.
"""
text: str # Primary text content
theme_text_color: str # Text color theme
class OneLineAvatarIconListItem:
"""
Single line list item with both avatar and icon spaces.
List item with spaces for both left avatar and right icon.
"""
text: str # Primary text content
theme_text_color: str # Text color themeList items that display content across two lines with various configurations.
class TwoLineListItem:
"""
Two line list item with primary and secondary text.
List item displaying both primary and secondary text lines.
"""
text: str # Primary text content
secondary_text: str # Secondary text content
theme_text_color: str # Primary text color theme
secondary_theme_text_color: str # Secondary text color theme
class TwoLineAvatarListItem:
"""
Two line list item with avatar space.
Two line list item with space reserved for avatar on the left side.
"""
text: str # Primary text content
secondary_text: str # Secondary text content
class TwoLineIconListItem:
"""
Two line list item with left icon space.
Two line list item with space reserved for icon on the left side.
"""
text: str # Primary text content
secondary_text: str # Secondary text content
class TwoLineRightIconListItem:
"""
Two line list item with right icon space.
Two line list item with space reserved for icon on the right side.
"""
text: str # Primary text content
secondary_text: str # Secondary text content
class TwoLineAvatarIconListItem:
"""
Two line list item with both avatar and icon spaces.
Two line list item with spaces for both left avatar and right icon.
"""
text: str # Primary text content
secondary_text: str # Secondary text contentList items that display content across three lines with various configurations.
class ThreeLineListItem:
"""
Three line list item with primary and secondary text.
List item displaying primary text and multi-line secondary text.
"""
text: str # Primary text content
secondary_text: str # Secondary text content (can span two lines)
theme_text_color: str # Primary text color theme
secondary_theme_text_color: str # Secondary text color theme
class ThreeLineAvatarListItem:
"""
Three line list item with avatar space.
Three line list item with space reserved for avatar on the left side.
"""
text: str # Primary text content
secondary_text: str # Secondary text content
class ThreeLineIconListItem:
"""
Three line list item with left icon space.
Three line list item with space reserved for icon on the left side.
"""
text: str # Primary text content
secondary_text: str # Secondary text content
class ThreeLineRightIconListItem:
"""
Three line list item with right icon space.
Three line list item with space reserved for icon on the right side.
"""
text: str # Primary text content
secondary_text: str # Secondary text content
class ThreeLineAvatarIconListItem:
"""
Three line list item with both avatar and icon spaces.
Three line list item with spaces for both left avatar and right icon.
"""
text: str # Primary text content
secondary_text: str # Secondary text contentSpecialized components that can be added to list items for enhanced functionality.
class ILeftBody:
"""
Interface for left body components in list items.
Defines the interface for components placed in the left area of list items.
"""
class ILeftBodyTouch:
"""
Interface for touchable left body components.
Defines the interface for interactive components in the left area.
"""
class IRightBody:
"""
Interface for right body components in list items.
Defines the interface for components placed in the right area of list items.
"""
class IRightBodyTouch:
"""
Interface for touchable right body components.
Defines the interface for interactive components in the right area.
"""
# Left side components
class IconLeftWidget:
"""Icon widget for left side of list items."""
icon: str # Icon name from md_icons
theme_icon_color: str # Icon color theme
class IconLeftWidgetWithoutTouch:
"""Non-interactive icon widget for left side."""
icon: str # Icon name from md_icons
theme_icon_color: str # Icon color theme
class ImageLeftWidget:
"""Image widget for left side of list items."""
source: str # Image source path
class ImageLeftWidgetWithoutTouch:
"""Non-interactive image widget for left side."""
source: str # Image source path
class CheckboxLeftWidget:
"""Checkbox widget for left side of list items."""
active: bool # Checkbox state
# Right side components
class IconRightWidget:
"""Icon widget for right side of list items."""
icon: str # Icon name from md_icons
theme_icon_color: str # Icon color theme
class IconRightWidgetWithoutTouch:
"""Non-interactive icon widget for right side."""
icon: str # Icon name from md_icons
theme_icon_color: str # Icon color theme
class ImageRightWidget:
"""Image widget for right side of list items."""
source: str # Image source path
class ImageRightWidgetWithoutTouch:
"""Non-interactive image widget for right side."""
source: str # Image source pathComprehensive data table component for displaying structured tabular data.
class MDDataTable:
"""
Material Design data table.
Advanced table widget for displaying structured data with sorting,
selection, and pagination capabilities.
"""
# Data structure
column_data: list # Column definitions: [("Name", width), ...]
row_data: list # Row data: [("value1", "value2", ...), ...]
# Table behavior
sorted_on: str # Column to sort by
sorted_order: str # Sort order: "ASC" or "DSC"
# Selection
use_pagination: bool # Enable pagination
rows_num: int # Number of rows per page
check: bool # Enable row selection checkboxes
# Callbacks
def on_row_press(self, instance_table, instance_row):
"""Called when row is pressed."""
def on_check_press(self, instance_table, current_row):
"""Called when row checkbox is pressed."""Foundation classes for list item implementations.
class BaseListItem:
"""
Base class for all list items.
Provides common functionality and styling for list items.
"""
text: str # Primary text
text_color: list # Text color
font_style: str # Font style
divider: str # Divider style
_txt_left_pad: str # Left text padding
_txt_top_pad: str # Top text padding
_txt_bot_pad: str # Bottom text padding
_num_lines: int # Number of text lines
def on_release(self):
"""Called when list item is released."""from kivymd.uix.list import MDList, OneLineListItem, TwoLineListItem
from kivymd.uix.scrollview import MDScrollView
# Create scrollable list
scroll = MDScrollView()
list_widget = MDList()
# Add single line items
for i in range(5):
item = OneLineListItem(
text=f"Item {i + 1}",
on_release=lambda x, item_text=f"Item {i + 1}": print(f"Clicked: {item_text}")
)
list_widget.add_widget(item)
# Add two line items
for i in range(3):
item = TwoLineListItem(
text=f"Two Line Item {i + 1}",
secondary_text="This is secondary text with additional information",
on_release=lambda x, item_text=f"Two Line Item {i + 1}": print(f"Clicked: {item_text}")
)
list_widget.add_widget(item)
scroll.add_widget(list_widget)from kivymd.uix.list import (
MDList, OneLineAvatarIconListItem,
IconLeftWidget, IconRightWidget
)
# Create list with icons
list_widget = MDList()
# Contact list example
contacts = [
("John Doe", "phone", "email"),
("Jane Smith", "phone", "message"),
("Bob Johnson", "phone", "video-call")
]
for name, left_icon, right_icon in contacts:
item = OneLineAvatarIconListItem(
text=name,
on_release=lambda x, contact_name=name: print(f"Called {contact_name}")
)
# Add left icon (avatar placeholder)
item.add_widget(IconLeftWidget(
icon=left_icon,
theme_icon_color="Primary"
))
# Add right action icon
item.add_widget(IconRightWidget(
icon=right_icon,
theme_icon_color="Primary"
))
list_widget.add_widget(item)from kivymd.uix.datatables import MDDataTable
from kivy.metrics import dp
# Define table structure
data_table = MDDataTable(
size_hint=(0.9, 0.6),
pos_hint={"center_x": 0.5, "center_y": 0.5},
# Column definitions: (name, width_in_dp)
column_data=[
("Name", dp(60)),
("Age", dp(40)),
("City", dp(60)),
("Department", dp(80)),
],
# Row data
row_data=[
("John Doe", "25", "New York", "Engineering"),
("Jane Smith", "30", "San Francisco", "Design"),
("Bob Johnson", "28", "Seattle", "Marketing"),
("Alice Brown", "32", "Boston", "Sales"),
("Charlie Wilson", "27", "Austin", "Engineering"),
],
# Table options
sorted_on="Name",
sorted_order="ASC",
elevation=2,
use_pagination=True,
rows_num=3,
check=True
)
# Handle row selection
def on_row_press(instance_table, instance_row):
print(f"Row pressed: {instance_row.text}")
def on_check_press(instance_table, current_row):
print(f"Row checked: {current_row}")
data_table.bind(on_row_press=on_row_press)
data_table.bind(on_check_press=on_check_press)from kivymd.uix.list import BaseListItem
from kivymd.uix.label import MDLabel
from kivymd.uix.button import MDIconButton
from kivymd.uix.boxlayout import MDBoxLayout
class CustomListItem(BaseListItem):
def __init__(self, title, subtitle, action_icon="more-vert", **kwargs):
super().__init__(**kwargs)
# Create layout
layout = MDBoxLayout(
orientation="horizontal",
adaptive_height=True,
spacing="16dp",
padding=["16dp", "8dp"]
)
# Text content
text_layout = MDBoxLayout(
orientation="vertical",
adaptive_height=True,
size_hint_x=0.8
)
title_label = MDLabel(
text=title,
font_style="Subtitle1",
theme_text_color="Primary",
size_hint_y=None,
height="24dp"
)
subtitle_label = MDLabel(
text=subtitle,
font_style="Body2",
theme_text_color="Secondary",
size_hint_y=None,
height="20dp"
)
text_layout.add_widget(title_label)
text_layout.add_widget(subtitle_label)
# Action button
action_button = MDIconButton(
icon=action_icon,
theme_icon_color="Primary",
size_hint=(None, None),
size=("40dp", "40dp")
)
layout.add_widget(text_layout)
layout.add_widget(action_button)
self.add_widget(layout)
# Usage
custom_item = CustomListItem(
title="Custom Item",
subtitle="This is a custom list item with additional functionality",
action_icon="star"
)Install with Tessl CLI
npx tessl i tessl/pypi-kivymd