iOS Dropdown

iOS Dropdown#

Anatomy#

Example#

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDScreen:

    FitImage:
        id: bg_image
        source: "https://picsum.photos/800/600?random=1"

    IOSLiquidDropdownContainer:
        id: dropdown_container
        caller: trigger_btn
        menu: menu_btn

        IOSButton:
            id: trigger_btn
            size_hint: None, None
            size: dp(56), dp(56)
            border_radius: [dp(28)] * 4
            target_background: bg_image
            pos_hint: {"center_x": 0.5, "center_y": 0.65}
            on_release: dropdown_container.toggle_dropdown()

            IOSIconButton:
                icon: "filter-variant"
                theme_icon_color: "Custom"
                icon_color: "white"

        IOSButton:
            id: menu_btn
            adaptive_size: True
            target_background: bg_image
            border_radius: [dp(22)] * 4
            on_release: dropdown_container.toggle_dropdown()

            IOSButtonText:
                text: "IOS Button"
                theme_text_color: "Custom"
                text_color: "white"
'''


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


if __name__ == "__main__":
    LiquidGlassDropdownDemo().run()

from kivy.metrics import dp

from kivymd.app import MDApp
from kivymd.uix.behaviors import IOSLiquidDropdownContainer
from kivymd.uix.button import IOSButton, IOSIconButton, IOSButtonText
from kivymd.uix.fitimage import FitImage
from kivymd.uix.screen import MDScreen


class LiquidGlassDropdownDemo(MDApp):
    def build(self):
        bg_image = FitImage(
            id="bg_image",
            source="https://picsum.photos/800/600?random=1",
        )
        dropdown_container = IOSLiquidDropdownContainer()

        trigger_btn = IOSButton(
            IOSIconButton(
                icon="filter-variant",
                theme_icon_color="Custom",
                icon_color="white",
            ),
            size_hint=[None, None],
            size=[dp(56), dp(56)],
            border_radius=[dp(28)] * 4,
            target_background=bg_image,
            pos_hint={"center_x": 0.5, "center_y": 0.65},
        )
        trigger_btn.bind(
            on_release=lambda x: dropdown_container.toggle_dropdown()
        )

        menu = IOSButton(
            IOSButtonText(
                text="IOS Button",
                theme_text_color="Custom",
                text_color="white",
            ),
            adaptive_size=True,
            border_radius=[dp(22)] * 4,
            target_background=bg_image,
        )
        menu.bind(
            on_release=lambda x: dropdown_container.toggle_dropdown()
        )

        dropdown_container.widgets = [
            trigger_btn,
            menu,
        ]
        dropdown_container.caller = trigger_btn
        dropdown_container.menu = menu

        return MDScreen(
            bg_image,
            dropdown_container,
        )


if __name__ == "__main__":
    LiquidGlassDropdownDemo().run()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/dropdown-behavior-example.gif

Menu example#

from kivy.lang import Builder
from kivy.properties import ListProperty, ObjectProperty

from kivymd.app import MDApp
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.list import (
    MDListItem,
    MDListItemHeadlineText,
    MDListItemLeadingIcon,
    MDListItemSupportingText,
)

KV = '''
<ListLayout>
    orientation: "vertical"
    adaptive_height: True
    spacing: dp(4)


MDScreen:

    FitImage:
        id: bg_image
        source: "https://picsum.photos/800/600?random=1"

    IOSLiquidDropdownContainer:
        id: dropdown_container
        caller: trigger_btn
        menu: menu_box

        IOSButton:
            id: trigger_btn
            size_hint: None, None
            size: dp(56), dp(56)
            border_radius: [dp(28), dp(28), dp(28), dp(28)]
            target_background: bg_image
            pos_hint: {"center_x": 0.5, "center_y": 0.65}
            on_release: dropdown_container.toggle_dropdown()

            IOSIconButton:
                icon: "filter-variant"
                theme_icon_color: "Custom"
                icon_color: "white"

        MDBoxLayout:
            id: menu_box
            size_hint: None, None
            size: dp(400), dp(200)
            orientation: "vertical"
            padding: dp(16)
            spacing: dp(10)
            border_radius: [dp(32), dp(32), dp(32), dp(32)]

            MDScrollView:
                do_scroll_x: False
                bar_width: 0

                ListLayout:
                    dropdown_container: dropdown_container
'''


class ListLayout(MDBoxLayout):
    dropdown_container = ObjectProperty(allownone=True)
    items_data = ListProperty([
        ("account-circle-outline", "My Profile", "Account settings"),
        ("message-text-outline", "Messages", "Notifications and chats"),
        ("heart-outline", "Favorites", "Saved items"),
        ("cog-outline", "Settings", "App preferences"),
        ("logout-variant", "Log Out", "End current session"),
    ])

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.generate_items()

    def generate_items(self):
        self.clear_widgets()

        for icon, title, subtitle in self.items_data:
            item = MDListItem(
                MDListItemLeadingIcon(
                    icon=icon,
                    theme_icon_color="Custom",
                    icon_color=[1, 1, 1, 0.9],
                ),
                MDListItemHeadlineText(
                    text=title,
                    theme_text_color="Custom",
                    text_color=[1, 1, 1, 1],
                ),
                MDListItemSupportingText(
                    text=subtitle,
                    theme_text_color="Custom",
                    text_color=[1, 1, 1, 0.6],
                ),
                theme_bg_color="Custom",
                md_bg_color=[0, 0, 0, 0],
            )

            item.bind(on_release=self._on_item_release)
            self.add_widget(item)

    def _on_item_release(self, instance):
        if self.dropdown_container:
            self.dropdown_container.toggle_dropdown()


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


if __name__ == "__main__":
    LiquidGlassDropdownDemo().run()

from kivy.metrics import dp
from kivy.properties import ObjectProperty

from kivymd.app import MDApp
from kivymd.uix.behaviors import IOSLiquidDropdownContainer
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.button import IOSButton, IOSIconButton
from kivymd.uix.fitimage import FitImage
from kivymd.uix.list import (
    MDListItem,
    MDListItemHeadlineText,
    MDListItemLeadingIcon,
    MDListItemSupportingText,
)
from kivymd.uix.screen import MDScreen
from kivymd.uix.scrollview import MDScrollView


class ListLayout(MDBoxLayout):
    dropdown_container = ObjectProperty()

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        items_data = [
            ("account-circle-outline", "My Profile", "Account settings"),
            ("message-text-outline", "Messages", "Notifications and chats"),
            ("heart-outline", "Favorites", "Saved items"),
            ("cog-outline", "Settings", "App preferences"),
            ("logout-variant", "Log Out", "End current session"),
        ]

        self.orientation = "vertical"
        self.adaptive_height = True
        self.spacing = dp(4)

        widgets = []
        for icon, title, subtitle in items_data:
            item = MDListItem(
                MDListItemLeadingIcon(
                    icon=icon,
                    theme_icon_color="Custom",
                    icon_color=[1, 1, 1, 0.9],
                ),
                MDListItemHeadlineText(
                    text=title,
                    theme_text_color="Custom",
                    text_color=[1, 1, 1, 1],
                ),
                MDListItemSupportingText(
                    text=subtitle,
                    theme_text_color="Custom",
                    text_color=[1, 1, 1, 0.6],
                ),
                theme_bg_color="Custom",
                md_bg_color=[0, 0, 0, 0],
            )

            if self.dropdown_container:
                item.bind(
                    on_release=lambda x: self.dropdown_container.toggle_dropdown()
                )

            widgets.append(item)

        self.widgets = widgets


class MenuScreen(MDScreen):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        bg_image = FitImage(
            source="https://picsum.photos/800/600?random=1",
        )
        dropdown_container = IOSLiquidDropdownContainer()

        trigger_btn = IOSButton(
            IOSIconButton(
                icon="filter-variant",
                theme_icon_color="Custom",
                icon_color="white",
            ),
            size_hint=[None, None],
            size=[dp(56), dp(56)],
            border_radius=[dp(28)] * 4,
            target_background=bg_image,
            pos_hint={"center_x": 0.5, "center_y": 0.65},
        )
        trigger_btn.bind(
            on_release=lambda x: dropdown_container.toggle_dropdown()
        )

        menu = MDBoxLayout(
            MDScrollView(
                ListLayout(
                    dropdown_container=dropdown_container,
                ),
                do_scroll_x=False,
                bar_width=0,
            ),
            size_hint=[None, None],
            size=[dp(400), dp(200)],
            orientation="vertical",
            padding=dp(16),
            spacing=dp(10),
        )
        menu.border_radius = [dp(32)] * 4

        dropdown_container.widgets = [
            trigger_btn,
            menu,
        ]
        dropdown_container.caller = trigger_btn
        dropdown_container.menu = menu

        self.widgets = [
            bg_image,
            dropdown_container,
        ]


class LiquidGlassDropdownDemo(MDApp):
    def build(self):
        return MenuScreen()


if __name__ == "__main__":
    LiquidGlassDropdownDemo().run()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/dropdown-behavior-menu-example.gif

API - `kivymd.uix.behaviors.ios.dropdown_behavior`#

class kivymd.uix.behaviors.ios.dropdown_behavior.IOSLiquidDropdownBehavior(*args, **kwargs)#

Behavior class responsible for orchestrating the liquid metaball transition, shader uniform synchronization, and wobble dynamics between a trigger button and a dropdown menu.

For more information see in the IOSBaseGlassBehavior class documentation.

direction#

Direction in which the dropdown menu expands relative to the caller button.

Available options: ‘bottom’, ‘top’, ‘left’, ‘right’, ‘bottom-left’, ‘bottom-right’, ‘top-left’, ‘top-right’.

direction is an OptionProperty and defaults to ‘bottom’.

spacing#

Gap between the trigger button and the dropdown menu.

spacing is a NumericProperty and defaults to dp(12).

open_transition#

Easing curve transition type for the expansion animation.

open_transition is a StringProperty and defaults to ‘out_cubic’.

open_duration#

Total time in seconds required to fully expand the dropdown menu.

open_duration is a NumericProperty and defaults to 0.6.

close_transition#

Easing curve transition type for the collapse animation.

close_transition is a StringProperty and defaults to ‘in_out_cubic’.

close_duration#

Total time in seconds required to collapse back into the trigger button.

close_duration is a NumericProperty and defaults to 0.45.

viscosity#

Maximum smooth-minimum blending factor (k) controlling the liquid neck stretch.

viscosity is a NumericProperty and defaults to dp(100).

is_open#

State flag indicating whether the dropdown menu is currently open.

is_open is a BooleanProperty and defaults to False.

btn_fade_out_transition#

Easing curve transition for hiding trigger button on open.

btn_fade_out_transition is a StringProperty and defaults to ‘out_quad’.

btn_fade_in_transition#

Easing curve transition for restoring trigger button on close.

btn_fade_in_transition is a StringProperty and defaults to ‘in_quad’.

menu_fade_in_transition#

Easing curve transition for revealing dropdown menu content on open completion.

menu_fade_in_transition is a StringProperty and defaults to ‘out_quad’.

menu_fade_out_transition#

Easing curve transition for hiding dropdown menu content on close.

menu_fade_out_transition is a StringProperty and defaults to ‘out_quad’.

k_ramp_up_transition#

Easing curve transition for increasing viscosity (k).

k_ramp_up_transition is a StringProperty and defaults to ‘out_quad’.

k_ramp_down_transition#

Easing curve transition for collapsing viscosity (k).

k_ramp_down_transition is a StringProperty and defaults to ‘in_cubic’.

on_open(*args) → None#: Default event handler fired when expansion animation finishes.

on_close(*args) → None#: Default event handler fired when collapse animation finishes.

on_parent(instance, parent)#: Cleanup when removing a widget from the layout.

on_touch_down(touch)#

on_touch_move(touch)#

on_touch_up(touch)#

update_menu_position(*args) → None#: Dynamically repositions the dropdown menu relative to the trigger button based on direction and properties.

toggle_dropdown() → None#: Toggle between open and close states.

open() → None#: Triggers liquid expansion sequence: stretches metaball neck, triggers pinch-off wobble impulse, and reveals content upon completion.

close() → None#: Triggers liquid collapse sequence: hides menu UI immediately, pulls liquid body back into trigger button, and restores original UI state.

class kivymd.uix.behaviors.ios.dropdown_behavior.IOSLiquidDropdownContainer(*args, **kwargs)#

Container handling liquid drop transition logic.

For more information see in the DeclarativeBehavior and IOSLiquidDropdownBehavior and FloatLayout and MDAdaptiveWidget class documentation.

caller#

A widget trigger (button) that initiates the droplet animation.

caller is a ObjectProperty and defaults to None.

menu#

Drop-down menu.

menu is a ObjectProperty and defaults to None.

on_touch_down(touch)#

Receive a touch down event.

Parameters:

touch: MotionEvent class: Touch received. The touch is in parent coordinates. See relativelayout for a discussion on coordinate systems.

Returns:

bool If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree.