KIVYMD Components P-2 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 Snackbar Components

KivyMD's Snackbar component offers a way to display brief messages at the bottom of the screen, following Material Design guidelines. Here's a breakdown of the key components:

Properties:

• text: (str) The message content to be displayed in the Snackbar.
• font_size: (NumericProperty) Controls the font size of the text.
• duration: (NumericProperty) Sets the duration (in seconds) for which the Snackbar will be visible before automatically dismissing. Defaults to 3 seconds.
• auto_dismiss: (bool) Determines if the Snackbar should automatically disappear after the specified duration. Defaults to True.
• bg_color: (ColorProperty) Defines the background color of the Snackbar. Can be set in (r, g, b, a) format or a string representing a color name. Defaults to None (usually inherits theme color).
• buttons: (List) A list of dictionaries containing button configurations. Each dictionary can have the following key. 
• • text: (str) Text displayed on the button.
  • text_color: (ColorProperty) Color of the button text.
  • on_release: (callable) Function to be executed when the button is pressed.
• radius: (NumericProperty) Sets the corner radius of the Snackbar.
• snackbar_animation_dir: (OptionProperty) Controls the animation direction from which the Snackbar enters the screen. Options include 'Bottom' (default), 'Top', 'Left', and 'Right'.
• snackbar_x: (NumericProperty) X position offset of the Snackbar relative to its default position.
• snackbar_y: (NumericProperty) Y position offset of the Snackbar relative to its default position.

Methods:

• dismiss(): Manually dismisses the currently displayed Snackbar.
• open(): Shows the Snackbar.
• on_open(): Event fired when the Snackbar opens.
• on_dismiss(): Event fired when the Snackbar is dismissed.
• on_buttons(): Event fired when a button on the Snackbar is pressed.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' #:import Snackbar kivymd.uix.snackbar.Snackbar MDScreen: MDRaisedButton: text: "Create simple snackbar" on_release: Snackbar(text="This is a snackbar!").open() pos_hint: {"center_x": .5, "center_y": .5} ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD Spinner Components

KivyMD's Spinner component provides a dropdown menu for users to select options, adhering to Material Design aesthetics. Here's a look at its key components:

Properties:

• values: (List) A list of strings representing the options displayed in the dropdown.
• text: (str) The currently selected option displayed on the Spinner itself. (read-only)
• active: (bool) Controls the visibility of the dropdown menu. Set to True to display it, False to hide it. Defaults to True.
• size_hint_x: (NumericProperty) Defines the width of the Spinner relative to its parent.
• hint_text: (str) Optional hint text displayed when no option is selected.
• color: (ColorProperty) Sets the color of the Spinner text. Defaults to the theme color.
• on_select: (callable) Event fired when a new option is selected from the dropdown.

Methods:

• open(): Opens the dropdown menu.
• close(): Closes the dropdown menu.
• select(text): Selects a specific option from the dropdown menu by its text value.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' MDScreen: MDSpinner: size_hint: None, None size: dp(48), dp(48) pos_hint: {'center_x': .5, 'center_y': .5} determinate: True ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD Swiper Components

KivyMD's Swiper component allows you to create a touch-enabled carousel interface for swiping through a collection of elements horizontally. Here's a breakdown of its key components:

Classes:

• MDSwiper: The main Swiper class that manages the overall layout and behavior.
• MDSwiperItem: An individual item displayed within the Swiper. Inherits from BoxLayout and automatically adjusts its size to fit the Swiper.

Properties (MDSwiper):

• items: (List) A list of widget instances representing the content of each swiper item. Can include any Kivy or KivyMD widget.
• items_spacing: (NumericProperty) Defines the spacing (in dp) between each SwiperItem. Defaults to 20dp.
• transition_duration: (NumericProperty) Sets the duration (in seconds) for the swipe animation between items. Defaults to 0.2 seconds.
• size_transition: (StringProperty) Determines the animation type used for resizing SwiperItems during swiping. Options include 'in_quad', 'out_quad' (default), 'in_out_quad', 'in_cubic', etc. Refer to Kivy documentation for animation options.
• size_duration: (NumericProperty) Sets the duration (in seconds) for the size transition animation of SwiperItems. Defaults to 0.2 seconds.
• swipe_transition: (StringProperty) Defines the animation type used for swiping between items. Options include the same as size_transition. Defaults to 'out_quad'.
• swipe_distance: (NumericProperty) Sets the minimum distance (in dp) required for a swipe gesture to register. Defaults to 70dp.
• width_mult: (NumericProperty) A value that affects the width of each SwiperItem. It's multiplied by items_spacing x2 and then subtracted from the window width. Decreasing width_mult increases the width of SwiperItems.
• swipe_on_scroll: (bool) Controls whether swiping is enabled while the Swiper is being scrolled. Defaults to False.

Events (MDSwiper):

• on_swipe(instance, swipe_direction): Triggered when a swipe gesture is detected. swipe_direction is either 'left' or 'right'.
• on_pre_swipe(instance): Fired before a swipe starts.
• on_overswipe_right(instance): Event when the user swipes beyond the rightmost item.
• on_overswipe_left(instance): Event when the user swipes beyond the leftmost item.
• on_swipe_left(instance): Triggered when the user swipes left.
• on_swipe_right(instance): Triggered when the user swipes right.
• on_scroll_start(instance): Event fired when the user starts scrolling the Swiper.
• on_touch_down(instance, touch): Event when the user touches down on the Swiper.
• on_touch_up(instance, touch): Event when the user lifts their finger after touching the Swiper.

Methods (MDSwiper):

• add_widget(widget): Adds a widget as a SwiperItem.
• remove_widget(widget): Removes a widget from the Swiper.
• set_current(index): Sets the currently displayed SwiperItem by its index in the items list.
• get_current_index(): Returns the index of the currently displayed SwiperItem.
• get_current_item(): Returns the widget instance of the currently displayed SwiperItem.
• get_items(): Returns a list of all widget instances currently in the Swiper.
• swipe_left(): Programmatically swipes the Swiper left.
• swipe_right(): Programmatically swipes the Swiper right.

Example:-

from kivymd.app import MDApp from kivy.lang.builder import Builder arya = ''' <MySwiper@MDSwiperItem> FitImage: source: "guitar.png" radius: [15,] MDScreen: MDTopAppBar: id: toolbar title: "MDSwiper" elevation: 8 pos_hint: {"top": 1} MDSwiper: size_hint_y: None height: root.height - toolbar.height - dp(40) y: root.height - self.height - toolbar.height - dp(20) MySwiper: MySwiper: MySwiper: MySwiper: MySwiper: ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

KivyMD Tabs Components

KivyMD's Tabs component allows you to create a tabbed interface within your application, adhering to Material Design guidelines. It enables users to switch between different sections or views of your app by tapping on designated tabs. Here's a breakdown of its key aspects:

Classes:

• MDTabs: The main container that holds all the tabs.
• MDTabsBase: This class acts as a base class that you inherit from when creating your custom tab content.

Properties (MDTabs):

• tab_indicator_color: (ColorProperty) Defines the color of the indicator line that underlines the active tab. Defaults to the theme's primary color.
• tab_bar_height: (NumericProperty) Sets the height (in dp) of the tab bar that displays the tab titles. Defaults to 48dp.
• text_color_normal: (ColorProperty) Defines the color of the tab text when not selected. Defaults to a dark gray.
• text_color_active: (ColorProperty) Sets the color of the tab text when the tab is selected. Defaults to the theme's primary color.
• background_color: (ColorProperty) Defines the background color of the tab bar. Defaults to the theme's background color.

Events (MDTabs):

• on_tab_change(instance, tab, from_tab): Event fired when the user switches between tabs.
  • instance: The MDTabs instance.
  • tab: The newly selected MDTabsBase instance.
  • from_tab: The previously selected MDTabsBase instance (can be None if no tab was selected before).

Creating Tabs:

1. Custom Tab Class: Inherit from MDTabsBase and a Kivy container (like FloatLayout) to create your custom tab content. Define the widgets and layout for your tab's functionality within this class.

2. Adding Tabs to MDTabs: Instantiate your custom tab classes and add them as children to the MDTabs container.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp from kivymd.uix.tab import MDTabsBase from kivymd.uix.floatlayout import MDFloatLayout from kivymd.icon_definitions import md_icons arya = ''' MDBoxLayout: orientation: "vertical" MDTopAppBar: title: "Example Tabs" MDTabs: id: tabs on_tab_switch: app.on_tab_switch(*args) <Tab> MDIconButton: id: icon icon: root.icon icon_size: "48sp" pos_hint: {"center_x": .5, "center_y": .5} ''' class Tab(MDFloatLayout, MDTabsBase): '''Class implementing content for a tab.''' class rahulwebtech(MDApp): icons = list(md_icons.keys())[15:30] def build(self): self.theme_cls.theme_style = "Dark" self.theme_cls.primary_palette = "red" return Builder.load_string(arya) def on_start(self): for tab_name in self.icons: self.root.ids.tabs.add_widget(Tab(icon=tab_name)) def on_tab_switch( self, instance_tabs, instance_tab, instance_tab_label, tab_text ): ''' Called when switching tabs. :type instance_tabs: <kivymd.uix.tab.MDTabs object>; :param instance_tab: <__main__.Tab object>; :param instance_tab_label: <kivymd.uix.tab.MDTabsLabel object>; :param tab_text: text or name icon of tab; ''' count_icon = instance_tab.icon # get the tab icon print(f"Welcome to {count_icon}' tab'") rahulwebtech().run()

KivyMD TapTargetView Components

KivyMD doesn't have a built-in TapTargetView component for highlighting specific views. However, there are alternative approaches to achieve similar functionality in your KivyMD app:

1. Using Custom Widgets and Animations:

   • Create a custom widget that overlays the target view with a dimmed background and a colored circle around the specific area you want to highlight.
   • Implement animations to show and hide this overlay widget. You can use Kivy's built-in animation classes like Animation or Clock for this purpose.
   • Optionally, you can add a small text bubble explaining the functionality of the target view.

2. Third-party Libraries:

• Explore third-party libraries like python-targetview (https://pypi.org/) that offer functionalities specifically for creating tap target overlays. These libraries might integrate well with Kivy and provide additional features like customizable tooltips and positioning options.
• 
  
• 
  
• 3Manual Highlighting:

• Instead of an overlay, you can temporarily change the appearance of the target view itself to indicate it requires interaction. This could involve changing its background color, adding a border, or pulsating with a specific color.

Here are some additional pointers to keep in mind:

• Ensure the highlighting mechanism doesn't obstruct the underlying view's functionality.
• Provide a clear way for users to dismiss the highlight, like tapping outside the highlighted area or on a designated close button.
• Consider using this functionality sparingly, primarily during the initial onboarding process, to avoid overwhelming users.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp from kivymd.uix.taptargetview import MDTapTargetView arya = ''' Screen: MDFloatingActionButton: id: button icon: "plus" pos: 10, 10 on_release: app.tap_target_start() ''' class rahulwebtech(MDApp): def build(self): screen = Builder.load_string(arya) self.tap_target_view = MDTapTargetView( widget=screen.ids.button, title_text="This is an add button", description_text="This is a description of the button", widget_position="left_bottom", ) return screen def tap_target_start(self): if self.tap_target_view.state == "close": self.tap_target_view.start() else: self.tap_target_view.stop() rahulwebtech().run()

KivyMD TextField Components

KivyMD offers two main text field components:

1. MDTextField: This is the core text field component that provides basic text input functionality with Material Design styling.
2. MDTextFieldRound: This component inherits from MDTextField and adds a pre-defined rounded border style to the text field.

Here's a breakdown of their key properties and functionalities:

MDTextField Properties:

• hint_text: (str) Placeholder text displayed when the field is empty.
• text: (str) The current text entered by the user.
• helper_text: (str) Optional text displayed below the text field, often used for providing hints or error messages.
• helper_text_mode: (OptionProperty) Controls how the helper text is displayed. Options include:
  • "on_focus" (default): Shows the helper text only when the field is focused.
  • "persistent": Displays the helper text at all times.
  • "on_error": Shows the helper text as an error message when there's a validation issue.
• required: (bool) Sets whether the text field is mandatory or not. If True, an error message can be displayed through helper_text_mode on validation failure.
• password: (bool) If True, the text field hides the characters as they are typed, similar to a password field.
• disabled: (bool) Disables interaction with the text field if set to True.
• line_color: (ColorProperty) Defines the color of the bottom line under the text field.
• fill_color: (ColorProperty) Sets the color that fills the text field background.
• text_color: (ColorProperty) Defines the color of the text displayed in the field.
• on_text_validate: (callable) Event fired when the user validates the text input (e.g., pressing Enter).

MDTextFieldRound Properties (Inherits from MDTextField):

• radius: (NumericProperty) Controls the corner radius of the rounded border.

Shared Methods:

• focus(): Sets focus to the text field, making it ready for user input.

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' MDScreen: MDTextField: id: text_field_error hint_text: "rahul (press 'Enter')" helper_text: "mistake" helper_text_mode: "on_error" pos_hint: {"center_x": .5, "center_y": .5} size_hint_x: .5 ''' class rahulwebtech(MDApp): def __init__(self, **kwargs): super().__init__(**kwargs) self.screen = Builder.load_string(arya) def build(self): self.theme_cls.theme_style = "Dark" self.theme_cls.primary_palette = "green" self.screen.ids.text_field_error.bind( on_text_validate=self.set_error_message, on_focus=self.set_error_message, ) return self.screen def set_error_message(self, instance_textfield): self.screen.ids.text_field_error.error = True rahulwebtech().run()

KivyMD TimePicker Components

KivyMD provides a class named MDTimePicker for creating a time picker dialog within your application. Here's a breakdown of its key aspects:

Properties:

• time: (ObjectProperty) Represents the currently selected time as a Python datetime.time object. You can use this to get the hour, minute, and optionally seconds (depending on your time format settings).
• hour: (StringProperty) Sets or gets the current hour in 24-hour format (e.g., "14").
• minute: (StringProperty) Sets or gets the current minute (e.g., "30").
• format: (StringProperty) Defines the time format displayed in the picker. Options include "HH:MM" (default), "hh:mm a", etc. ("a" refers to AM/PM).
• min_time: (StrProperty or time object) Sets the minimum allowed time for selection.
• max_time: (StrProperty or time object) Sets the maximum allowed time for selection.
• animation_duration: (NumericProperty) Defines the duration (in seconds) for the opening and closing animations of the time picker dialog. Defaults to 0.2 seconds.
• previous_time: (ObjectProperty) Represents the time that was set before the user made any changes. This can be useful for implementing a "cancel" functionality that reverts to the previous time.

Events:

• on_open(self): Event fired when the time picker dialog opens.
• on_dismiss(self): Event fired when the time picker dialog closes.
• on_save(self): Event triggered when the user selects a time and clicks "OK".

Methods:

• open(self): Opens the time picker dialog.
• dismiss(self): Closes the time picker dialog.
• set_time(self, time): Sets the initial time displayed in the dialog (can be a datetime.time object or a string in the specified format).

Example:-

from kivy.lang import Builder from kivymd.app import MDApp from kivymd.uix.pickers import MDTimePicker arya = ''' MDFloatLayout: MDRaisedButton: text: "Open time picker" pos_hint: {'center_x': .5, 'center_y': .5} on_release: app.show_time_picker() ''' class rahulwebtech(MDApp): def build(self): self.theme_cls.theme_style = "Dark" self.theme_cls.primary_palette = "green" return Builder.load_string(arya) def show_time_picker(self): '''Open time picker dialog.''' time_dialog = MDTimePicker() time_dialog.open() rahulwebtech().run()

KivyMD Tooltip Components

KivyMD tooltips are a handy way to display informative text to users when they hover over, focus on, or tap an element in your application. Here's a breakdown of KivyMD Tooltip components:

Example:-

from kivy.lang import Builder from kivymd.app import MDApp arya = ''' <TooltipMDIconButton@MDIconButton+MDTooltip> MDScreen: TooltipMDIconButton: icon: "language-python" tooltip_text: self.icon pos_hint: {"center_x": .5, "center_y": .5} ''' class rahulwebtech(MDApp): def build(self): return Builder.load_string(arya) rahulwebtech().run()

What it is:

• A KivyMD component that creates a small popup with text.
• Appears when a user interacts with a designated widget (like a button or image).

How to use it:

There are two ways to use tooltips:

1. Inheritance:

   • Create a new class that inherits from both the widget you want the tooltip for (e.g., MDIconButton) and MDTooltip.
   • Set the tooltip_text property to the desired message.

2. Kv language:

   • Define the tooltip within your Kv code using <TooltipMDIconButton@MDIconButton+MDTooltip>.
   • Set the tooltip_text property as you would with any other widget property

Key properties:

• tooltip_text: The text displayed in the tooltip.
• tooltip_bg_color: The background color of the tooltip (defaults to white).
• tooltip_text_color: The color of the text in the tooltip (defaults to black).
• tooltip_font_style: The font style of the text (various options like 'Button', 'H1', etc.).

Events:

• on_enter: Fired when the user enters (hovers over, taps on) the target widget.
• on_leave: Fired when the user leaves the target widget.

Additional points:

• Tooltip behavior differs slightly between mobile and desktop devices. Refer to the KivyMD documentation for specifics.
• You can customize the animation behavior for showing and hiding the tooltip.