KIVYMD Components P-1 with Example

KivyMD provides a vast collection of pre-built UI components that follow Google's Material Design guidelines. These components allow you to develop visually appealing and user-friendly applications for various platforms.

Benefits of Using KivyMD Components:-

• Faster Development: Pre-built components save you time compared to building everything from scratch.
• Consistent Design: Ensures your app follows Material Design guidelines for a familiar and intuitive user experience.
• Touch-Friendly Interfaces: Many components are optimized for touch interactions, ideal for mobile app development.

Customizability:-

While KivyMD components adhere to Material Design principles, they offer customization options. You can modify properties like color schemes, fonts, and sizes to match your app's unique look and feel.

KivyMD ImageList Component

KivyMD ImageList is a versatile component that allows you to display a collection of images in a well-organized grid layout within your KivyMD application. Here's a detailed explanation of its functionalities and key aspects:

Functionality:

• Presents a grid of images with optional titles or labels.
• Offers built-in tile classes for customization:
  • MDSmartTile: A simple tile for basic image display.
  • MDSmartTileWithText: A tile that includes space for text below the image (suitable for captions).
  • MDSmartTileWithStar: Provides a container for overlays and headers/footers, allowing for more complex tile designs.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' MDScreen: MDSmartTile: radius: 24 box_radius: [0, 0, 28, 28] box_color: 1, 1, 1, .3 source: "rahulwebtech.jpg" pos_hint: {"center_x": .5, "center_y": .5} size_hint: None, None size: "325dp", "325dp" MDIconButton: icon: "heart-outline" theme_icon_color: "Custom" icon_color: 1, 1, 0, 1 pos_hint: {"center_y": .5} on_release: self.icon = "heart" if self.icon == "heart-outline" else "heart-outline" MDLabel: text: "RAHULWEBTECH" bold: True color: 1, 0, 1, 1 ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD Label Component

 KivyMD Label component, also known as MDLabel, is a fundamental building block for displaying text within your KivyMD user interface. It provides a versatile and customizable way to present information to users.

Functionalities:

• Displays text content.
• Offers various font styles for different design aesthetics (e.g., headings, body text, captions).
• Supports color customization for text and background.
• Allows highlighting and copying text on double-tap (configurable).

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' MDScreen: MDBoxLayout: orientation: "vertical" MDTopAppBar: title: "RAHULWEBTECH" MDLabel: text: "rahulwebtech" ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD List Component

KivyMD's List component, also known as MDList, offers a versatile and efficient way to display scrollable lists of items within your application. It serves as the foundation for various other KivyMD list-based components like OneLineListItem and TwoLineListItem.

Functionalities:

• Creates a vertically scrolling container for displaying multiple list items.
• Integrates seamlessly with other KivyMD list item components for customization.
• Enables selection of list items (optional).
• Supports separation lines between items to enhance readability.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp from kivymd.uix.list import OneLineListItem arya = ''' MDScrollView: MDList: id: rahul ''' class rahulwebtech(MDApp): def build(self): self.theme_cls.theme_style = "Dark" return Builder.load_string(arya) def on_start(self): for i in range(20): self.root.ids.rahul.add_widget( OneLineListItem(text=f"Single-line item {i}") ) rahulwebtech().run()

KivyMD Menu Component

Menu component, also known as MDDropdownMenu, provides a user-friendly way to implement dropdown menus within your KivyMD application. It allows users to access various options or actions without cluttering the main screen interface.

Functionality:

• Creates a dropdown menu that appears when a designated button or widget is clicked.
• Displays a list of menu items with customizable text, icons, and functionality.
• Enables users to select an item, triggering a defined action or callback function.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp from kivymd.uix.menu import MDDropdownMenu arya = ''' MDScreen: MDRaisedButton: id: button text: "PRESS HERE" pos_hint: {"center_x": .5, "center_y": .5} on_release: app.menu.open() ''' class rahulwebtech(MDApp): def __init__(self, **kwargs): super().__init__(**kwargs) self.screen = Builder.load_string(arya) menu_items = [ { "text": f"Item {i}", "viewclass": "OneLineListItem", "on_release": lambda x=f"Item {i}": self.menu_callback(x), } for i in range(10) ] self.menu = MDDropdownMenu( caller=self.screen.ids.button, items=menu_items, width_mult=5, ) def menu_callback(self, text_item): print(text_item) def build(self): return self.screen rahulwebtech().run()

KivyMD NavigationRail Component

KivyMD's NavigationRail component, also known as MDNavigationRail, provides a versatile navigation menu system for your KivyMD applications. It presents a vertical bar on the side of the screen, containing a list of items that act as navigation points between different screens or functionalities within your app.

Functionalities:

• Displays a vertical navigation bar with selectable items.
• Each item can represent a different screen or section of your application.
• Offers options for customization, including icons, labels, and a floating action button (FAB).
• Integrates seamlessly with other KivyMD components for building complex navigation structures.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' MDBoxLayout: MDNavigationRail: MDNavigationRailItem: text: "Python" icon: "language-python" MDNavigationRailItem: text: "JavaScript" icon: "language-javascript" MDNavigationRailItem: text: "CPP" icon: "language-cpp" MDNavigationRailItem: text: "Github" icon: "git" MDScreen: ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD ProgressBar Component

ProgressBar component, also known as MDProgressBar, offers a visual representation of progress during operations within your application. It provides a clear indication to users about the ongoing process.

Functionalities:

• Displays a progress bar that fills up as the process advances.
• Can be determinate (showing a specific progress) or indeterminate (unspecified wait time).
• Offers customization options for appearance and behavior.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' MDBoxLayout: padding: "10dp" MDProgressBar: value: 50 ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD RefreshLayout Component

KivyMD's RefreshLayout component provides a user-friendly way to implement pull-to-refresh functionality within your KivyMD application. This functionality allows users to refresh the content of a list or screen by swiping down from the top.

Here's a breakdown of its functionalities and key aspects:

Functionality:

• Detects a downward swipe gesture initiated at the top of the screen.
• Triggers a callback function when the swipe gesture reaches a certain threshold (refresh distance).
• Provides a visual cue (spinner) during the refresh process.
• Integrates seamlessly with scrolling content like MDList for refreshing list data.

Example:-

from kivy.clock import Clock from kivy.lang import Builder from kivy.factory import Factory from kivy.properties import StringProperty from kivymd.app import MDApp from kivymd.uix.button import MDIconButton from kivymd.icon_definitions import md_icons from kivymd.uix.list import ILeftBodyTouch, OneLineIconListItem from kivymd.theming import ThemeManager from kivymd.utils import asynckivy 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 MDGridLayout: id: box adaptive_height: True cols: 1 ''') class IconLeftSampleWidget(ILeftBodyTouch, MDIconButton): pass class ItemForList(OneLineIconListItem): icon = StringProperty() class rahulwebtech(MDApp): title = 'Example Refresh Layout' screen = None x = 0 y = 15 def build(self): self.screen = Factory.rahulwebtech() 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(self, *args): '''A method that updates the state of your application while the spinner remains on the screen.''' 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) rahulwebtech().run()

KivyMD ResponsiveLayout Component

ResponsiveLayout component provides a mechanism to create user interfaces that adapt their layout based on the screen size of the device. This ensures your application delivers an optimal user experience across various devices, from phones and tablets to desktops.

Here's a detailed explanation of its functionalities and key aspects:

Functionality:

• Tracks the size of the application window.
• Based on the screen size, displays a layout specifically designed for that device category (mobile, tablet, or desktop).
• Requires you to define separate KV files for each layout variation.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp from kivymd.uix.label import MDLabel from kivymd.uix.responsivelayout import MDResponsiveLayout from kivymd.uix.screen import MDScreen arya = ''' <CommonComponentLabel> halign: "center" <MobileView> CommonComponentLabel: text: "Mobile" <TabletView> CommonComponentLabel: text: "Table" <DesktopView> CommonComponentLabel: text: "Desktop" ResponsiveView: ''' class CommonComponentLabel(MDLabel): pass class MobileView(MDScreen): pass class TabletView(MDScreen): pass class DesktopView(MDScreen): pass class ResponsiveView(MDResponsiveLayout, MDScreen): def __init__(self, **kw): super().__init__(**kw) self.mobile_view = MobileView() self.tablet_view = TabletView() self.desktop_view = DesktopView() class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD SegmentedControl Component

SegmentedControl component, also known as MDSegmentedControl, offers a versatile way to implement segmented selectors within your KivyMD application. It allows users to choose one option from a set of mutually exclusive choices, presented as a horizontal bar with clickable segments.

Here's a breakdown of its functionalities and key aspects:

Functionality:

• Displays a horizontal bar with multiple segments representing different options.
• Only one segment can be active at a time, providing a clear selection state.
• Offers customization options for appearance and behavior.
• Triggers a callback function when a segment is selected.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' MDScreen: MDSegmentedControl: pos_hint: {"center_x": .5, "center_y": .5} MDSegmentedControlItem: text: "Male" MDSegmentedControlItem: text: "Female" MDSegmentedControlItem: text: "Both" ''' class rahulwebtech(MDApp): def build(self): self.theme_cls.theme_style = "Dark" self.theme_cls.primary_palette = "Orange" return Builder.load_string(arya) rahulwebtech().run()

KivyMD Selection Component

KivyMD doesn't have a single component named Selection that directly handles general selection functionality. However, KivyMD provides several components that enable selection in different contexts, each with its own strengths:

1. MDCheckbox: This component is ideal for selecting individual items within a list or layout. It offers a checkbox that users can tap to toggle the selection state (on/off) for a specific item.

2. MDCheckbox with group: This approach involves using multiple MDCheckbox components and assigning them to a common group. Only one checkbox within the group can be active at a time, effectively creating a radio-button style selection where users choose a single option.

3. MDSelectionList: This component is specifically designed for selecting items within a list. It provides a visually distinct style for selected items and offers features like selection mode (single or multiple selection) and icon customization.

Choosing the Right Component:

The most suitable component depends on your specific use case:

• Use MDCheckbox for selecting individual items within a non-list context.
• Use MDCheckbox with a group for selecting a single option from a set of choices.
• Use MDSelectionList for selecting items within a scrollable list, with options for single or multiple selections.

Example:-

from kivy.animation import Animation from kivy.lang import Builder from kivy.utils import get_color_from_hex from kivymd.app import MDApp from kivymd.uix.list import TwoLineAvatarListItem arya = ''' <MyItem> text: "rahul" secondary_text: "rahul" _no_ripple_effect: True ImageLeftWidget: source: "rahul.png" MDBoxLayout: orientation: "vertical" MDTopAppBar: id: toolbar title: "Inbox" left_action_items: [["menu"]] right_action_items: [["magnify"], ["dots-vertical"]] md_bg_color: 0, 1, 0, 1 MDBoxLayout: padding: "24dp", "8dp", 0, "8dp" adaptive_size: True MDLabel: text: "Today" adaptive_size: True ScrollView: MDSelectionList: id: selection_list spacing: "12dp" overlay_color: app.overlay_color[:-1] + [.2] icon_bg_color: app.overlay_color on_selected: app.on_selected(*args) on_unselected: app.on_unselected(*args) on_selected_mode: app.set_selection_mode(*args) ''' class MyItem(TwoLineAvatarListItem): pass class rahulwebtech(MDApp): overlay_color = get_color_from_hex("#6042e4") def build(self): return Builder.load_string(arya) def on_start(self): for i in range(10): self.root.ids.selection_list.add_widget(MyItem()) def set_selection_mode(self, instance_selection_list, mode): if mode: md_bg_color = self.overlay_color left_action_items = [ [ "close", lambda x: self.root.ids.selection_list.unselected_all(), ] ] right_action_items = [["trash-can"], ["dots-vertical"]] else: md_bg_color = (0, 0, 0, 1) left_action_items = [["menu"]] right_action_items = [["magnify"], ["dots-vertical"]] self.root.ids.toolbar.title = "Inbox" Animation(md_bg_color=md_bg_color, d=0.2).start(self.root.ids.toolbar) self.root.ids.toolbar.left_action_items = left_action_items self.root.ids.toolbar.right_action_items = right_action_items def on_selected(self, instance_selection_list, instance_selection_item): self.root.ids.toolbar.title = str( len(instance_selection_list.get_selected_list_items()) ) def on_unselected(self, instance_selection_list, instance_selection_item): if instance_selection_list.get_selected_list_items(): self.root.ids.toolbar.title = str( len(instance_selection_list.get_selected_list_items()) ) rahulwebtech().run()

KivyMD SelectionControls Component

MDCheckbox with group

The MDCheckbox component in KivyMD offers a user-friendly way to implement checkboxes within your application's interface. It allows users to toggle the selection state (on/off) for individual items, making it suitable for various selection scenarios.

Key Features and Properties:

• Visual Representation: Displays a square checkbox with a distinct appearance that aligns with KivyMD's Material Design aesthetics.
• Selection State: Users can tap the checkbox to switch between checked (on) and unchecked (off) states.
• Active Property: The active BooleanProperty reflects the current selection state (True for checked, False for unchecked). This property is useful for binding to other UI elements or performing actions based on the checkbox selection.
• Customization: Although offering a default appearance, you can customize the look and feel using properties like:
  • theme_cls: Sets the theme class to control the checkbox's colors and styling based on your application's theme.
  • disabled_color: Defines the color of the checkbox when it's disabled (optional).
  • unselected_color: Sets the color of the checkbox when it's unchecked (optional).
  • selected_color: Defines the color of the checkbox when it's checked (optional).

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' <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 rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

MDSwitch

The MDSwitch component in KivyMD provides a user-friendly way to implement a single on/off toggle within your application's interface. It allows users to switch between two states (enabled/disabled, on/off) and is commonly used for settings, preferences, or enabling/disabling functionalities.

Key Features and Properties:

• Visual Representation: Displays a switch with a track and a thumb element. The thumb's position reflects the current on/off state.
• State Control: Users can tap the switch to change its state between on (enabled) and off (disabled).
• Active Property: The active BooleanProperty reflects the current state of the switch (True for on/enabled, False for off/disabled). This property is useful for binding to other UI elements or performing actions based on the switch state.
• Customization: Although offering a default appearance, you can customize the look and feel using properties like:
  • theme_cls: Sets the theme class to control the switch's colors and styling based on your application's theme.
  • disabled_color: Defines the color of the switch when it's disabled (optional).
  • track_color: Sets the color of the switch track (optional).
  • active_color: Defines the color of the switch thumb when it's on (optional).

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' MDFloatLayout: MDSwitch: pos_hint: {'center_x': .5, 'center_y': .5} ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD SliverAppbar Component

The MDSliverAppbar component in KivyMD offers a versatile way to create scrollable app bars within your application's interface. It allows you to combine the functionalities of a traditional app bar (title, actions) with a scrollable content area, enabling you to display additional information or controls seamlessly.

Example:-

from kivy.lang.builder import Builder from kivymd.app import MDApp from kivymd.uix.card import MDCard arya = ''' <CardItem> size_hint_y: None height: "88dp" padding: "6dp" radius: 12 FitImage: source: "rahul.jpg" radius: root.radius size_hint_x: None width: root.height MDBoxLayout: orientation: "vertical" adaptive_height: True spacing: "8dp" padding: "15dp", 0, 0, 0 pos_hint: {"center_y": .5} MDLabel: text: "rahulwebtech.com" font_style: "H5" bold: True adaptive_height: True MDLabel: text: "rahulwebtech" theme_text_color: "Hint" adaptive_height: True MDScreen: MDSliverAppbar: background_color: "green" MDSliverAppbarHeader: MDRelativeLayout: FitImage: source: "rahulbg.jpg" MDSliverAppbarContent: id: content orientation: "vertical" padding: "10dp" spacing: "10dp" adaptive_height: True ''' class CardItem(MDCard): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.elevation = 3 class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) def on_start(self): for x in range(15): self.root.ids.content.add_widget(CardItem()) rahulwebtech().run()

Key Features and Properties:

• Scrollable Content: The app bar content scrolls vertically, providing more space to display items without cluttering the screen.
• Multiple Use Cases: Suitable for various scenarios like listing categories, showcasing navigation options, or displaying contextual information.
• Flexibility: Combines the familiar app bar elements (title, actions) with a scrollable area for customized content.
• Customization: Offers several properties for tailoring the look and feel:
  • background_color: Sets the background color of the app bar (defaults to None).
  • toolbar_cls: Overrides the default toolbar class (can be set to a custom MDTopAppBar subclass).
  • max_height: Defines the maximum height of the app bar (defaults to Window.height / 2).
  • hide_toolbar: Controls whether to hide the toolbar area when scrolling content (defaults to True).
  • radius: Sets the corner radius for the scrollable content area (defaults to [30]).