uix: new search widget

Author: T-Dynamos

examples/search.py

@@ -0,0 +1,109 @@
+from kivy.lang import Builder
+from kivymd.app import MDApp
+from kivymd.uix.list import MDListItem
+from examples.common_app import CommonApp
+from kivy.properties import StringProperty
+from kivymd.icon_definitions import md_icons
+
+class IconItem(MDListItem):
+    icon = StringProperty()
+    text = StringProperty()
+
+MAIN_KV = """
+#: import images_path kivymd.images_path
+
+<IconItem>
+    divider: True
+    MDListItemLeadingIcon:
+        icon: root.icon
+
+    MDListItemSupportingText:
+        text: root.text
+
+MDScreen:
+    md_bg_color:app.theme_cls.backgroundColor
+    BoxLayout:
+        padding:[dp(10), dp(30), dp(10), dp(10)]
+        orientation:"vertical"
+        
+        MDSearchBar:
+            id: search_bar
+            supporting_text: "Search in text"
+            view_root: root
+            
+            # Search Bar
+            MDSearchBarLeadingContainer:
+                MDSearchLeadingIcon:
+                    icon: "menu"
+                    on_release: app.open_menu(self)
+
+            MDSearchBarTrailingContainer:
+                MDSearchTrailingIcon:
+                    icon:"microphone"
+                MDSearchTrailingAvatar:
+                    source:f"{images_path}/logo/kivymd-icon-128.png"
+            
+            # Search View
+            MDSearchViewLeadingContainer:
+                MDSearchLeadingIcon:
+                    icon:"arrow-left"
+                    on_release: search_bar.close_view()
+
+            MDSearchViewTrailingContainer:
+                MDSearchTrailingIcon:
+                    icon:"window-close"
+
+            MDSearchViewContainer:
+                RecycleView:
+                    id: rv
+                    key_viewclass: 'viewclass'
+                    key_size: 'height'
+
+                    RecycleBoxLayout:
+                        default_size: None, dp(48)
+                        default_size_hint: 1, None
+                        size_hint_y: None
+                        height: self.minimum_height
+                        orientation: 'vertical'
+        Widget:
+
+        BoxLayout:
+            size_hint_y:None
+            height:dp(30)
+            padding:[dp(50), 0]
+            spacing:dp(10)
+            MDLabel:
+                text:"Bar dock"
+                halign:"right"
+            MDSwitch:
+                on_active:search_bar.docked = args[-1]
+"""
+
+class Example(MDApp, CommonApp):
+
+    def build(self):
+        return Builder.load_string(MAIN_KV)
+
+    def on_start(self):
+        self.set_list_md_icons()
+
+    def set_list_md_icons(self, text="", search=False):
+        def add_icon_item(name_icon):
+            self.root.ids.rv.data.append(
+                {
+                    "viewclass": "IconItem",
+                    "icon": name_icon,
+                    "text": name_icon,
+                    "callback": lambda x: x,
+                }
+            )
+
+        self.root.ids.rv.data = []
+        for name_icon in md_icons.keys():
+            if search:
+                if text in name_icon:
+                    add_icon_item(name_icon)
+            else:
+                add_icon_item(name_icon)
+
+Example().run()

kivymd/factory_registers.py

@@ -132,3 +132,12 @@
 register("MDCircularLayout", module="kivymd.uix.circularlayout")
 register("MDHeroFrom", module="kivymd.uix.hero")
 register("MDHeroTo", module="kivymd.uix.hero")
+register("MDSearchBar", module="kivymd.uix.search")
+register("MDSearchTrailingAvatar", module="kivymd.uix.search")
+register("MDSearchTrailingIcon", module="kivymd.uix.search")
+register("MDSearchLeadingIcon", module="kivymd.uix.search")
+register("MDSearchViewContainer", module="kivymd.uix.search")
+register("MDSearchBarLeadingContainer", module="kivymd.uix.search")
+register("MDSearchBarTrailingContainer", module="kivymd.uix.search")
+register("MDSearchViewLeadingContainer", module="kivymd.uix.search")
+register("MDSearchViewTrailingContainer", module="kivymd.uix.search")

kivymd/uix/search/__init__.py

@@ -0,0 +1 @@
+from .search import *

kivymd/uix/search/search.kv

@@ -0,0 +1,73 @@
+<MDSearchTrailingAvatar>:
+    size_hint_x: None
+    width: dp(30)
+
+<MDSearchTrailingIcon>:
+    size_hint: [None, 1]
+    width: dp(24)
+    icon_color: app.theme_cls.onSurfaceColor
+
+<MDSearchLeadingIcon>:
+    size_hint: [None, 1]
+    width: dp(24)
+    icon_color: app.theme_cls.onSurfaceColor
+
+<MDSearchBarTrailingContainer>:
+    size_hint_x: None
+    width: self.minimum_width
+    spacing: dp(16)
+
+<MDSearchBarLeadingContainer>:
+    size_hint_x: None
+    width: self.minimum_width
+    spacing: dp(16)
+
+<MDSearchViewTrailingContainer>:
+    size_hint_x: None
+    width: self.minimum_width
+    spacing: dp(16)
+
+<MDSearchViewLeadingContainer>:
+    size_hint_x: None
+    width: self.minimum_width
+    spacing: dp(16)
+
+<MDSearchViewContainer>:
+    size_hint_y:None
+    height:dp(55)
+    canvas:
+        Color:
+            rgba: app.theme_cls.outlineColor
+        Line:
+            points:
+                [[self.x,self.y+self.height],
+                [self.x+self.width, self.y+self.height]]
+
+<MDSearchWidget>:
+    size_hint:[1,1]
+    MDBoxLayout:
+        id: root_container
+        orientation: 'vertical'
+        md_bg_color: app.theme_cls.surfaceContainerHighColor
+        size_hint: [None, None]
+        orientation: 'vertical'
+        # header
+        BoxLayout:
+            id: header
+            padding: [dp(16), 0]
+            spacing: dp(16)
+            size_hint_y: None
+            height: dp(56)
+            TextInput:
+                id: text_input
+                background_color:[0,0,0,0]
+                foreground_color: app.theme_cls.onSurfaceColor
+                cursor_color:app.theme_cls.outlineColor
+                hint_text_color: app.theme_cls.onSurfaceVariantColor
+                padding: [0, (self.parent.height - self.font_size - dp(3)) / 2]
+                multiline: False
+                font_size: root._font_style["font-size"]
+                on_focus: if args[-1]: root.switch_state("open")
+<MDSearchBar>:
+    size_hint_y: None
+    height: dp(56)