KIVYMD Components 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 Navigation Drower Component

KivyMD Navigation Drawer is a component that provides a slide-out panel for applications. It's a common design element used for navigation menus in mobile apps. Here's a comprehensive look at KivyMD Navigation Drawer:

Functionality:

Creates a hidden panel that slides in from the side of the screen (left or right).
Contains a list of items that typically represent different sections or functionalities within your app.
Selecting an item usually navigates the user to a different screen or view.

Types of Navigation Drawers:

Standard: Slides in from the left or right side of the screen and remains visible until explicitly closed.
Modal: Overlays the entire application content and requires closing the drawer to interact with the main content.

Key Properties:

drawer_type: Defines the type of drawer (standard or modal). Defaults to 'modal'.
status: Represents the current state of the drawer (closed, opening, opened, closing).
open_progress: A value between 0 (closed) and 1 (fully open) indicating the visibility of the drawer.
enable_swiping: Allows opening and closing the drawer with a swipe gesture (defaults to True).
selected_item: The currently selected item in the drawer (if any).

Customization:

You can customize the appearance of the drawer using various properties like:
- scrim_color: Color of the background overlay behind the drawer (modal type).
- item_text_color: Color of the text for items in the drawer.
You can add custom widgets to the drawer content for more complex layouts.

Implementation:

KV Language: Define the Navigation Drawer in your Kv code using MDNavigationDrawer.
Python Code:
- Create a separate class or use the screen manager to handle navigation based on user selections in the drawer.
- Bind events like on_drawer_open and on_item_select to your functions for handling drawer interactions.

Example:-

from kivy.lang import Builder from kivymd.uix.boxlayout import MDBoxLayout from kivymd.app import MDApp rahul = ''' MDScreen: MDNavigationLayout: MDScreenManager: MDScreen: MDTopAppBar: title: "Navigation App Drawer" elevation: 8 pos_hint: {"top": 1} md_bg_color: "red" specific_text_color: "green" left_action_items: [['menu', lambda x: nav_drawer.set_state("open")]] MDNavigationDrawer: id: nav_drawer radius: (0, 18, 18, 0) ContentNavigationDrawer: ''' class ContentNavigationDrawer(MDBoxLayout): pass class rahulapp(MDApp): def build(self): self.theme_cls.theme_style = "Dark" return Builder.load_string(rahul) rahulapp().run()

KivyMD Standard navigation bar Component

KivyMD, the standard navigation bar is a component called MDNavigationBar. It allows you to create a horizontal bar at the top or bottom of your screen for navigation purposes. Here's a detailed explanation of this component:

Functionality:

Provides a tab-like interface for switching between different views or sections within your application.
Users can tap on different items on the bar to navigate.

Components:

MDNavigationItem: This class represents an individual item within the navigation bar. It can contain text labels, icons, or both.
MDNavigationItemLabel: This class displays the text label for an item.
MDNavigationItemIcon: This class displays the icon for an item.

Key functionalities:

Adding items: You can add MDNavigationItem instances to the MDNavigationBar children list to populate the bar with items.
Active Item: The MDNavigationBar keeps track of the currently selected or active item. You can set the active item programmatically or based on user interaction.
Item Events: Each MDNavigationItem fires events like on_press when a user taps on it. You can bind these events to your functions for handling navigation logic.

Customization:

You can control the appearance of the navigation bar using various properties like:
- theme_color: The primary color of the navigation bar.
- background_color: The background color of the navigation bar.
- active_color: The color of the active item.
- text_color: The color of the text labels for items.
- ripple_color: The color of the ripple effect on item tap.

Implementation:

KV Language: Define the MDNavigationBar with its child MDNavigationItem instances in your Kv code.
Python Code:
- Write functions to handle user interaction with the navigation bar items (e.g., switching screens based on selected item).
- Use properties like set_active_item to programmatically control the active item.

Benefits of using Standard Navigation Bar:

Provides a clear and familiar navigation experience for users.
Improves discoverability of different sections within your app.
Offers a space-efficient way to present navigation options.

Example:-

from kivy.lang import Builder

from kivymd.app import MDApp
    
    rahul = '''
    <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
    
    
    MDScreen:
    
        MDNavigationLayout:
    
            MDScreenManager:
    
                MDScreen:
    
                    MDTopAppBar:
                        title: "Navigation App Drawer"
                        elevation: 9
                        pos_hint: {"top": 1}
                        md_bg_color: "red"
                        specific_text_color: "green"
                        left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]
    
            MDNavigationDrawer:
                id: nav_drawer
                radius: (0, 18, 18, 0)
    
                MDNavigationDrawerMenu:
    
                    MDNavigationDrawerHeader:
                        title: "RAHULWEBTECH"
                        title_color: "red"
                        text: "Rahul Bharadwaj"
                        spacing: "6dp"
                        padding: "15dp", 0, 0, "50dp"
    
                    MDNavigationDrawerLabel:
                        text: "Mailbox"
    
                    DrawerClickableItem:
                        icon: "Gmail"
                        right_text: "+99"
                        text_right_color: "yellow"
                        text: "Inbox"
    
                    DrawerClickableItem:
                        icon: "send"
                        text: "Outbox"
    
                    MDNavigationDrawerDivider:
    
                    MDNavigationDrawerLabel:
                        text: "mail1"
    
                    DrawerLabelItem:
                        icon: "information-outline"
                        text: "mail2"
    
                    DrawerLabelItem:
                        icon: "information-outline"
                        text: "mail3"
    '''
    
    
    class arya(MDApp):
        def build(self):
            self.theme_cls.theme_style = "Dark"
            return Builder.load_string(rahul)
    
    
    arya().run()

KivyMD Menu Component

KivyMD's Menu component provides a versatile way to create popup menus in your application. Here's a breakdown of its functionalities and key aspects:

Functionality:

Creates a popup menu that appears when triggered by a specific action (like a button press).
Offers a list of items for users to choose from.
Selection of an item can trigger actions within your code.

Components:

MDMenu: The main component that manages the overall menu functionality.
MDMenuItem: Represents an individual item within the menu. It can contain text labels and optional icons.

Key Properties:

caller: The widget that triggers the menu opening (e.g., a button).
position: Defines the position of the menu relative to the caller widget. Options include 'auto' (automatic placement), 'center', and 'bottom'.
opening_time: Controls the animation duration for opening the menu (defaults to 0.2 seconds).
items: A list of MDMenuItem instances that populate the menu content.

Customization:

You can customize the appearance of the menu using properties like:
- theme_color: The primary color of the menu.
- background_color: The background color of the menu.
- text_color: The color of the text labels for items.

Implementation:

KV Language: Define the MDMenu with its child MDMenuItem instances in your Kv code. You can also associate the menu with a button using the on_release directive.
Python Code:
- Write functions to handle user interaction with the menu items. These functions can be bound to the on_release event of each MDMenuItem.

Additional functionalities:

KivyMD Menu supports different item types for more flexibility:
- MDDropdownTextItem: Basic menu item with text label.
- MDDropdownLeadingIconItem: Item with a leading icon and text label.
- MDDropdownTrailingIconItem: Item with a trailing icon and text label.

Example:-

KivyMD Backdrop Component

Backdrop component offers a unique way to implement layered content with a slide-up reveal mechanism. Here's a comprehensive look at its functionalities and key aspects:

Functionality:

Creates a two-layered layout:
- Back Layer: A background content area that remains mostly static.
- Front Layer: A higher layer that slides up from the bottom, revealing the content placed within.

Components:

MDBackdrop: The main component that manages the overall backdrop functionality.
MDBackdropFrontLayer: The container for the content that slides up in the front layer.
MDBackdropBackLayer (Optional): A container for the back layer content (not mandatory, you can directly add widgets to the main MDBackdrop).

Key functionalities:

Opening and Closing: The front layer can be opened or closed programmatically or through user interaction (like a button press).
Header: You can optionally display a header at the top of the front layer.
Customizable Appearance: Control the look and feel of the backdrop using various properties.

Key Properties:

open: Boolean property that controls the visibility of the front layer (True for open, False for closed).
header_text: Text displayed in the header of the front layer.
header_callback: Function to be called when the user interacts with the header (optional).
back_layer_color: Background color of the back layer.
front_layer_color: Background color of the front layer.
radius: Rounded corner radius for the top corners of the front layer.

Implementation:

KV Language: Define the MDBackdrop with its child components (MDBackdropFrontLayer and optionally MDBackdropBackLayer) in your Kv code.
Python Code:
- Use the open property or methods like open() and close() to control the front layer visibility.
- Bind events like on_open and on_close to functions if you want to execute code when the front layer opens or closes.

Benefits of using Backdrop:

Provides a clear separation between primary and secondary content.
Enables an engaging user experience for revealing additional information or actions.
Offers more flexibility compared to traditional modal dialogs.

Example:-

from kivy.lang import Builder

from kivymd.uix.screen import MDScreen
    from kivymd.app import MDApp
    
    Builder.load_string(
        '''
    
    
    
    <ItemBackdropFrontLayer@TwoLineAvatarListItem>
        icon: "android"
    
        IconLeftWidget:
            icon: root.icon
    
    
    <MyBackdropFrontLayer@ItemBackdropFrontLayer>
        backdrop: None
        text: "Lower the front layer"
        secondary_text: " by 50 %"
        icon: "transfer-down"
        on_press: root.backdrop.open(-Window.height / 2)
        pos_hint: {"top": 1}
        _no_ripple_effect: True
    
    
    <MyBackdropBackLayer@Image>
        size_hint: .8, .8
        source: os.path.join(images_path, "logo", "rahulimage.png")
        pos_hint: {"center_x": .5, "center_y": .6}
    '''
    )
    
    # Usage example of MDBackdrop.
    Builder.load_string(
        '''
    <rahulwebtechBackdrop>
    
        MDBackdrop:
            id: backdrop
            left_action_items: [['menu', lambda x: self.open()]]
            title: "Example Backdrop"
            radius_left: "28dp"
            radius_right: "0dp"
            header_text: "Menu:"
    
            MDBackdropBackLayer:
                MyBackdropBackLayer:
                    id: backlayer
    
            MDBackdropFrontLayer:
                MyBackdropFrontLayer:
                    backdrop: backdrop
    '''
    )
    
    
    class ExampleBackdrop(MDScreen):
        pass
    
    
    class rahulwebtech(MDApp):
        def build(self):
            self.theme_cls.theme_style = "light"
            self.theme_cls.primary_palette = "green"
            return ExampleBackdrop()
    
    
    rahulwebtech().run()

KivyMD Banner Component

Banner component is a versatile tool for displaying informative messages or notifications to users within your application. Here's a breakdown of its functionalities and key aspects:

Functionality:

Creates a temporary on-screen message that appears at the top or bottom of the screen.
Useful for conveying various types of information like success messages, warnings, or errors.
Disappears automatically after a specified duration or can be dismissed manually by the user.

Types of Banners:

Snackbar: A brief message that appears at the bottom of the screen for a short duration.
BottomAppBar Banner: A persistent banner that remains visible at the bottom of the screen, often used for navigation or actions.

Key functionalities:

Customization: You can control the appearance, behavior, and content of the banner.
Text: Set the message text using the text property. It can be a single line or multiple lines depending on the banner type.
Icons: Optionally include an icon to accompany the message using the icon property.
Duration: Define how long the banner should stay visible with the duration property.
Callbacks: Bind functions to events like on_dismiss to execute code when the user dismisses the banner.

Implementation:

KV Language: Define the MDBanner component in your Kv code. Set its properties like text, icon, and specify its position (top or bottom).
Python Code:
- Use the show() method to display the banner programmatically.
- Optionally handle user interaction or banner dismissal events in your code.

Benefits of using Banners:

Provide clear and concise communication with users.
Improve user experience by offering feedback or informative messages.
Less intrusive compared to traditional dialogs.

Example:-

KivyMD Bottom Navigation Component

KivyMD Bottom Navigation Component, combining the strengths of previous responses and addressing any mentioned issues:

KivyMD Bottom Navigation Component

In KivyMD, the MDNavigationBar component allows you to create a horizontal bar at the bottom of your screen for navigation purposes. It provides a familiar tab-like interface for users to switch between different views or sections within your application.

Key Functionalities:

Navigation Tabs: Add multiple MDNavigationItem instances as children of MDNavigationBar to represent different navigation destinations.
Active Item: Track the currently selected or active item using the active_item property. You can set it programmatically or based on user interaction.
Item Selection: Bind the on_press event of each MDNavigationItem to your navigation logic. When a user taps an item, this event is triggered, allowing you to switch screens or views accordingly.

Example:-

from kivy.lang import Builder

from kivymd.app import MDApp

class rahulwebtech(MDApp):

def build(self):
        self.theme_cls.material_style = "M3"
        self.theme_cls.theme_style = "light"
        return Builder.load_string(
            '''
MDScreen:

MDBottomNavigation:
        #panel_color: "black"
        selected_color_background: "green"
        text_color_active: "lightgrey"

MDBottomNavigationItem:
            name: 'screen 1'
            text: 'Mail'
            icon: 'gmail'
            badge_icon: "numeric-10"

MDLabel:
                text: 'Mail'
                halign: 'center'

MDBottomNavigationItem:
            name: 'screen 2'
            text: 'Facebook'
            icon: 'facebokk'
            badge_icon: "numeric-5"

MDLabel:
                text: 'facebook'
                halign: 'center'

MDBottomNavigationItem:
            name: 'screen 3'
            text: 'Google'
            icon: 'google'

MDLabel:
                text: 'google'
                halign: 'center'
'''
        )

rahulwebtech().run()

KivyMD Bottom Sheet Component

In KivyMD, the Bottom Sheet component offers a versatile way to display supplementary content anchored to the bottom of the screen. It's ideal for presenting options, menus, filters, or additional information without completely obstructing the main content.

Key Functionalities:

Two Types: KivyMD provides two main bottom sheet classes:
- MDListBottomSheet: Presents a list of items that users can select.
- MDGridBottomSheet: Displays a grid layout for more complex content arrangements.
Content: You can populate the bottom sheet with various widgets, including labels, buttons, text fields, and more.
Opening and Closing: The bottom sheet can be opened or closed programmatically using functions like open() and close(), or through user interaction (e.g., a button press).

Example:-

from kivy.lang import Builder

from kivymd.toast import toast
    from kivymd.uix.bottomsheet import MDGridBottomSheet
    from kivymd.app import MDApp
    
    arya = '''
    MDScreen:
    
        MDTopAppBar:
            title: 'Example BottomSheet'
            pos_hint: {"top": 1}
            elevation: 4
    
        MDRaisedButton:
            text: "Open grid bottom sheet"
            on_release: app.show_example_grid_bottom_sheet()
            pos_hint: {"center_x": .5, "center_y": .5}
    '''
    
    
    class rahulwebtech(MDApp):
        def build(self):
            return Builder.load_string(arya)
    
        def callback_for_menu_items(self, *args):
            toast(args[0])
    
        def show_example_grid_bottom_sheet(self):
            bottom_sheet_menu = MDGridBottomSheet()
            data = {
                "Google": "google-box",
                "Mail": "mail",
                "instagram": "instagram",
                "Da Cloud": "cloud-upload",
                "video": "video",
            }
            for item in data.items():
                bottom_sheet_menu.add_item(
                    item[0],
                    lambda x, y=item[0]: self.callback_for_menu_items(y),
                    icon_src=item[1],
                )
            bottom_sheet_menu.open()
    
    
    rahulwebtech().run()

KivyMD Color Picker Component

KivyMD's Color Picker component, known as MDColorPicker, provides a user-friendly interface for selecting colors within your application. Here's a detailed breakdown of its functionalities and key aspects:

Functionalities:

Allows users to choose a color from a variety of options.
Offers different color selection methods:
- Hue Saturation Value (HSV): A graphical representation where users can adjust hue (color), saturation (intensity), and value (brightness).
- RGB: Users can directly input Red, Green, and Blue values for the color.
- HEX: Users can enter a hexadecimal color code.
Displays the currently selected color.

Example:-

from typing import Union

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.pickers import MDColorPicker

KV = '''
MDScreen:

MDTopAppBar:
        id: toolbar
        title: "MDTopAppBar"
        pos_hint: {"top": 1}

MDRaisedButton:
        text: "OPEN PICKER"
        pos_hint: {"center_x": .5, "center_y": .5}
        md_bg_color: toolbar.md_bg_color
        on_release: app.open_color_picker()
'''

class rahulwebtech(MDApp):
    def build(self):
        return Builder.load_string(KV)

def open_color_picker(self):
        color_picker = MDColorPicker(size_hint=(0.45, 0.85))
        color_picker.open()
        color_picker.bind(
            on_select_color=self.on_select_color,
            on_release=self.get_selected_color,
        )

def update_color(self, color: list) -> None:
        self.root.ids.toolbar.md_bg_color = color

def get_selected_color(
        self,
        instance_color_picker: MDColorPicker,
        type_color: str,
        selected_color: Union[list, str],
    ):
        '''Return selected color.'''

print(f"Selected color is {selected_color}")
        self.update_color(selected_color[:-1] + [1])

def on_select_color(self, instance_gradient_tab, color: list) -> None:
        '''Called when a gradient image is clicked.'''

rahulwebtech().run()

KivyMD Data Tables Component

DataTables is a powerful component that allows you to display and manage sets of data in a tabular format within your KivyMD application. Here's a comprehensive look at its functionalities and key aspects:

Functionalities:

Presents data in rows and columns, similar to a spreadsheet.
Offers features for sorting, filtering, and pagination to handle large datasets efficiently.
Supports checkboxes for row selection (optional).

Components:

MDDataTable: The main component that manages the overall data table functionality.
Column Definition: You define columns using a list of tuples in the column_data property. Each tuple specifies the column header text and its width (optional).

Key Properties:

column_data: A list of tuples defining column headers and optional widths.
row_data: A list of lists or tuples representing the data for each row (data should match the number of columns).
use_pagination: Enables pagination for large datasets, allowing users to navigate through pages of data (defaults to False).
rows_num: Sets the number of rows displayed per page in pagination mode.
check: Enables checkboxes for row selection (defaults to False).
sorted_on: Tracks the currently sorted column (if any).
sorted_order: Defines the sorting order (ascending or descending) for the sorted column.

Customizations:

You can customize the appearance of the data table using various properties like:
- background_color: Background color of the table.
- background_color_header: Background color of the header row.
- background_color_cell: Background color of data cells.
- background_color_selected_cell: Background color of selected cells (if using checkboxes).

Implementation:

KV Language: Define the MDDataTable component in your Kv code. Set its properties like column_data, row_data, and any desired customization options.
Python Code:
- Optionally, handle user interactions with the data table:
  - Bind events like on_row_press to functions for row selection or editing.
  - Implement sorting logic by manipulating the sorted_on and sorted_order properties.
  - Control pagination functionality by updating the rows_num property and handling pagination events.

Example:-

from kivy.metrics import dp
    from kivy.uix.anchorlayout import AnchorLayout
    
    from kivymd.app import MDApp
    from kivymd.uix.datatables import MDDataTable
    
    
    class rahulwebtech(MDApp):
        def build(self):
            self.theme_cls.theme_style = "Dark"
            self.theme_cls.primary_palette = "Orange"
    
            layout = AnchorLayout()
            data_tables = MDDataTable(
                size_hint=(0.9, 0.6),
                column_data=[
                    ("Column 1", dp(20)),
                    ("Column 2", dp(30)),
                    ("Column 3", dp(50), self.sort_on_col_3),
                    ("Column 4", dp(30)),
                    ("Column 5", dp(30)),
                    ("Column 6", dp(30)),
                    ("Column 7", dp(30), self.sort_on_col_2),
                ],
                row_data=[
                    # The number of elements must match the length
                    # of the `column_data` list.
                    (
                        "1",
                        ("alert", [255 / 256, 165 / 256, 0, 1], "No Signal"),
                        "Astrid: NE shared managed",
                        "Medium",
                        "Triaged",
                        "0:33",
                        "Chase Nguyen",
                    ),
                    (
                        "2",
                        ("alert-circle", [1, 0, 0, 1], "Offline"),
                        "Cosmo: prod shared ares",
                        "Huge",
                        "Triaged",
                        "0:39",
                        "Brie Furman",
                    ),
                    (
                        "3",
                        (
                            "checkbox-marked-circle",
                            [39 / 256, 174 / 256, 96 / 256, 1],
                            "Online",
                        ),
                        "Phoenix: prod shared lyra-lists",
                        "Minor",
                        "Not Triaged",
                        "3:12",
                        "Jeremy lake",
                    ),
                    (
                        "4",
                        (
                            "checkbox-marked-circle",
                            [39 / 256, 174 / 256, 96 / 256, 1],
                            "Online",
                        ),
                        "Sirius: NW prod shared locations",
                        "Negligible",
                        "Triaged",
                        "13:18",
                        "Angelica Howards",
                    ),
                    (
                        "5",
                        (
                            "checkbox-marked-circle",
                            [39 / 256, 174 / 256, 96 / 256, 1],
                            "Online",
                        ),
                        "Sirius: prod independent account",
                        "Negligible",
                        "Triaged",
                        "22:06",
                        "Diane Okuma",
                    ),
                ],
            )
            layout.add_widget(data_tables)
            return layout
    
        def sort_on_col_3(self, data):
            return zip(
                *sorted(
                    enumerate(data),
                    key=lambda l: l[1][3]
                )
            )
    
        def sort_on_col_2(self, data):
            return zip(
                *sorted(
                    enumerate(data),
                    key=lambda l: l[1][-1]
                )
            )
    
    rahulwebtech().run()

KivyMD Date Picker Component

the Date Picker component, known as MDDatePicker, provides a user-friendly interface for selecting dates within your application. Here's a breakdown of its functionalities and key aspects:

Functionalities:

Allows users to choose a date from a calendar view.
Supports selection of a single date or a date range (depending on the mode).
Offers options to set minimum and maximum selectable dates.

Example:-

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.pickers import MDDatePicker

KV = '''
MDFloatLayout:

MDRaisedButton:
        text: "Open date picker"
        pos_hint: {'center_x': .5, 'center_y': .5}
        on_release: app.show_date_picker()
'''

class rahulwebtech(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "Orange"
        return Builder.load_string(KV)

def on_save(self, instance, value, date_range):
        '''
        Events called when the "OK" dialog box button is clicked.

:type instance: <kivymd.uix.picker.MDDatePicker object>;
        :param value: selected date;
        :type value: <class 'datetime.date'>;
        :param date_range: list of 'datetime.date' objects in the selected range;
        :type date_range: <class 'list'>;
        '''

print(instance, value, date_range)

def on_cancel(self, instance, value):
        '''Events called when the "CANCEL" dialog box button is clicked.'''

def show_date_picker(self):
        date_dialog = MDDatePicker()
        date_dialog.bind(on_save=self.on_save, on_cancel=self.on_cancel)
        date_dialog.open()

rahulwebtech().run()

KivyMD Dialog Component

The MDDialog component offers a versatile way to display modal dialogs for various purposes within your application. These dialogs typically require user interaction (confirmation, input, etc.) before the application can proceed.

Functionalities:

Creates a modal window that overlays the main content of your application.
Provides different dialog types:
- Alert: Presents a message with an optional icon and an "OK" button.
- Simple: Offers a message and buttons for user selection.
- Confirmation: Prompts the user for confirmation with "Yes" and "No" buttons.
- Custom: Allows you to define entirely custom content within the dialog.
Supports displaying icons, titles, and content text.
Can include buttons for user actions (e.g., "OK", "Cancel", "Submit").

Example:-

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.button import MDFlatButton
from kivymd.uix.dialog import MDDialog

KV = '''
MDFloatLayout:

MDFlatButton:
        text: "ALERT DIALOG"
        pos_hint: {'center_x': .5, 'center_y': .5}
        on_release: app.show_alert_dialog()
'''

class rahulwebtech(MDApp):
    dialog = None

def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "Orange"
        return Builder.load_string(KV)

def show_alert_dialog(self):
        if not self.dialog:
            self.dialog = MDDialog(
                text="Discard draft?",
                buttons=[
                    MDFlatButton(
                        text="CANCEL",
                        theme_text_color="Custom",
                        text_color=self.theme_cls.primary_color,
                    ),
                    MDFlatButton(
                        text="DISCARD",
                        theme_text_color="Custom",
                        text_color=self.theme_cls.primary_color,
                    ),
                ],
            )
        self.dialog.open()

rahulwebtech().run()

KivyMD DropdownItem Component

The MDDropDownItem class represents a single item within a MDDropDownMenu component. It provides the building block for creating the list of options presented in the dropdown menu.

Key Functionalities:

Defines the text displayed for each item in the dropdown menu.
Optionally includes an icon to visually represent the item.
Can be disabled to prevent user selection.

Properties:

text: String property that specifies the text displayed for the item.
_drop_down_text: Internal property that stores the displayed text (read-only).
font_size: Sets the font size of the item text (defaults to "16sp").
disabled: Boolean property that controls whether the item is selectable (True for disabled, False for enabled).

Example:-

KivyMD ExpansionPanel Component

Absolutely, here's a comprehensive explanation of the KivyMD ExpansionPanel component:

Functionality:

Creates expandable and collapsible sections within your application's interface.
Offers a way to organize and display content in a space-efficient manner, especially for long lists or detailed information.
Users can click on the panel header to expand or collapse the content.

Components:

MDExpansionPanel: The main component that manages the overall expansion panel functionality.
MDExpansionPanelOneLine (or TwoLine, ThreeLine): Defines the style of the header. You can choose from:
- MDExpansionPanelOneLine: Displays a single line of text for the header.
- MDExpansionPanelTwoLine: Displays two lines of text for the header (useful for titles and subtitles).
- MDExpansionPanelThreeLine: Displays three lines of text for the header (suitable for very detailed headers).
content: The content widget that is displayed when the panel is expanded. This can be any Kivy widget or layout.

Key Functionalities:

Opening and Closing: Panels can be opened or closed programmatically using functions like open() and close() or through user interaction (clicking the header).
Header: You can customize the header text using properties like text and optionally display an icon with the icon property.
State: The panel can be in either an "open" or "closed" state.
Events: The MDExpansionPanel component fires events like on_open and on_close when the panel's state changes.

Example:-

import os

from kivy.lang import Builder
    
    from kivymd.app import MDApp
    from kivymd.uix.boxlayout import MDBoxLayout
    from kivymd.uix.expansionpanel import MDExpansionPanel, MDExpansionPanelThreeLine
    from kivymd import images_path
    
    KV = '''
    <Content>
        adaptive_height: True
    
        TwoLineIconListItem:
            text: "(050)-123-45-67"
            secondary_text: "Mobile"
    
            IconLeftWidget:
                icon: 'phone'
    
    
    MDScrollView:
    
        MDGridLayout:
            id: box
            cols: 1
            adaptive_height: True
    '''
    
    
    class Content(MDBoxLayout):
        '''Custom content.'''
    
    
    class rahulwebtech(MDApp):
        def build(self):
            return Builder.load_string(KV)
    
        def on_start(self):
            for i in range(10):
                self.root.ids.box.add_widget(
                    MDExpansionPanel(
                        icon=os.path.join(images_path, "logo", "kivymd-icon-128.png"),
                        content=Content(),
                        panel_cls=MDExpansionPanelThreeLine(
                            text="Text",
                            secondary_text="Secondary text",
                            tertiary_text="Tertiary text",
                        )
                    )
                )
    
    
    rahulwebtech().run()

KivyMD FileManager Component

File Manager component, also known as MDFileManager, provides a powerful and user-friendly way to browse and manage local files and directories within your KivyMD application. Here's a breakdown of its functionalities and key aspects:

Functionalities:

Displays a hierarchical view of the file system, allowing users to navigate through directories.
Lists files and folders within the current directory.
Provides options for various file management tasks:
- Selecting files and directories.
- Opening files (if supported by your application).
- Saving files (if supported by your application).

Example:-

import os

from kivy.core.window import Window
    from kivy.lang import Builder
    
    from kivymd.app import MDApp
    from kivymd.uix.filemanager import MDFileManager
    from kivymd.toast import toast
    
    
    arya = '''
    MDBoxLayout:
        orientation: "vertical"
    
        MDTopAppBar:
            title: "MDFileManager"
            left_action_items: [["menu", lambda x: None]]
            elevation: 3
    
        MDFloatLayout:
    
            MDRoundFlatIconButton:
                text: "Open manager"
                icon: "folder"
                pos_hint: {"center_x": .5, "center_y": .5}
                on_release: app.file_manager_open()
    '''
    
    
    class rahulwebtech(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 = "light"
            self.theme_cls.primary_palette = "green"
            return Builder.load_string(arya)
    
        def file_manager_open(self):
            self.file_manager.show(os.path.expanduser("~"))  # output manager to the screen
            self.manager_open = True
    
        def select_path(self, path: str):
            '''
            It will be called when you click on the file name
            or the catalog selection button.
    
            :param path: path to the selected directory or file;
            '''
    
            self.exit_manager()
            toast(path)
    
        def exit_manager(self, *args):
            '''Called when the user reaches the root of the directory tree.'''
    
            self.manager_open = False
            self.file_manager.close()
    
        def events(self, instance, keyboard, keycode, text, modifiers):
            '''Called when buttons are pressed on the mobile device.'''
    
            if keyboard in (1001, 27):
                if self.manager_open:
                    self.file_manager.back()
            return True
    
    
    rahulwebtech().run()

KivyMD FitImage Component

KivyMD FitImage component offers a convenient way to display images within your KivyMD application, ensuring they maintain their aspect ratio while fitting within the allocated space. Here's a detailed breakdown of its functionalities and key aspects:

Functionality:

Displays an image while preserving its original aspect ratio.
Stretches the image horizontally or vertically to fill the widget box.
Clips the image if necessary to fit within the designated area.

Example:-

KivyMD Hero Component

Hero component facilitates visually appealing transitions between screens within your application. It's also known as MDHeroFrom and provides a way to animate a widget from one screen to another, creating a smooth and engaging user experience.

Example:-

from kivy.lang import Builder

from kivymd.app import MDApp
    
    arya = '''
    MDScreenManager:
    
        MDScreen:
            name: "screen 1"
            md_bg_color: "lightblue"
    
            MDHeroFrom:
                id: hero_from
                tag: "hero"
                size_hint: None, None
                size: "130dp", "130dp"
                pos_hint: {"top": .98}
                x: 24
    
                FitImage:
                    source: "rahulimage.png"
                    size_hint: None, None
                    size: hero_from.size
    
            MDRaisedButton:
                text: "Move Hero To Screen 2"
                pos_hint: {"center_x": .5}
                y: "36dp"
                on_release:
                    root.current_heroes = ["hero"]
                    root.current = "screen B"
    
        MDScreen:
            name: "screen 2"
            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}
    
            MDRaisedButton:
                text: "Move Hero To Screen 1"
                pos_hint: {"center_x": .5}
                y: "36dp"
                on_release:
                    root.current_heroes = ["hero"]
                    root.current = "screen 1"
    '''
    
    
    class rahulwebtech(MDApp):
        def build(self):
            return Builder.load_string(arya)
    
    
    rahulwebtech().run()

Functionality:

Creates a shared element transition effect between KivyMD screens.
An element (widget) designated as the "hero" animates from its origin on one screen to its destination on another screen.
Supports smooth animation for various widget types.