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:-

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:-

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:-

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:-

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:-

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:-

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:-

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:

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

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:-

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]).

KIVYMD Components P-1 with Example

Benefits of Using KivyMD Components:-

Customizability:-

KivyMD ImageList Component

Example:-

KivyMD Label Component

Example:-

KivyMD List Component

Example:-

KivyMD Menu Component

Example:-

KivyMD NavigationRail Component

Example:-

KivyMD ProgressBar Component

Example:-

KivyMD RefreshLayout Component

Example:-

KivyMD ResponsiveLayout Component

Example:-

KivyMD SegmentedControl Component

Example:-

KivyMD Selection Component

Example:-

KivyMD SelectionControls Component

MDCheckbox with group

Example:-

MDSwitch

Example:-

KivyMD SliverAppbar Component

Example:-

You may like these posts

Post a Comment

Contact form