iOS Glass

Added in version 2.0.1.

Classes implements an iOS-style liquid glass effect.

To create a widget with glass effect, you must create a new class that inherits from the IOSGlassBehavior class.

Example

Imperative Python styleDeclarative Python style

from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout

from kivymd.uix.behaviors import IOSGlassBehavior
from kivymd.app import MDApp

KV = '''
MDScreen:

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

    GlassContainer:
        target_background: bg_image
        border_radius: [dp(26), dp(26), dp(26), dp(26)]
        glass_color: [1.0, 1.0, 1.0, 0.18]
        blur_amount: 10.0
        size_hint: None, None
        size: "400dp", "200dp"
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class GlassContainer(IOSGlassBehavior, BoxLayout):
    pass


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


Example().run()

API - kivymd.uix.behaviors.ios.glass_behavior

class kivymd.uix.behaviors.ios.glass_behavior.IOSBaseGlassBehavior

Base behavior class that defines common visual and physical properties for iOS-style glassmorphic UI components, including refraction, beveling, blur, and border radius properties.

lens_power

Magnification power at the center of the lens.

IOSButton(
    lens_power=0.45,
)

IOSButton(
    lens_power=0.15,
)

lens_power is an NumericProperty and defaults to 0.08.

bevel_power

Light refraction power at the bevel/edges.

IOSButton(
    bevel_power=0.55,
)

IOSButton(
    bevel_power=0.15,
)

bevel_power is an NumericProperty and defaults to 0.15.

border_radius

Border radius for the glass corners in the order (Top-Left, Top-Right, Bottom-Right, Bottom-Left).

GlassContainer(
    border_radius=[dp(46), dp(46), dp(26), dp(26)],
)

border_radius is an VariableListProperty and defaults to [dp(12), dp(12), dp(12), dp(12)].

glass_color

Tint color of the glass in (r, g, b, a) format.

GlassContainer(
    glass_color=[1.0, 0.0, 0.0, 0.48],
)

glass_color is an ColorProperty and defaults to [1.0, 1.0, 1.0, 0.15].

blur_amount

Amount of background blur applied inside the glass widget.

GlassContainer(
    blur_amount=20.0,
)

blur_amount is an NumericProperty and defaults to 14.0.

border_opacity

Opacity of the border outline.

border_opacity is an NumericProperty and defaults to 0.6.

class kivymd.uix.behaviors.ios.glass_behavior.IOSGlassBehavior(**kwargs)

Behavior that implements an iOS-style liquid glass effect with blur, refraction, and touch response.

For more information see in the IOSBaseGlassBehavior class documentation.

target_background

Reference to the background widget or layout captured by the glass shader.

class MyScreen(MDScreen):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.widgets = [
            FitImage(source="https://picsum.photos/800/600?random=2"),
            GlassContainer(
                target_background=self,
            ),
        ]

Example

Imperative Python styleDeclarative Python style

from kivy.lang import Builder
from kivy.properties import StringProperty

from kivymd.app import MDApp
from kivymd.uix.button import IOSButton
from kivymd.uix.list import (
    MDListItem,
    MDListItemHeadlineText,
    MDListItemLeadingAvatar,
    MDListItemSupportingText, MDListItemTrailingCheckbox,
)

from faker import Faker  # pip install Faker

KV = '''
<CommonIOSButton>
    size_hint: None, None
    width: "56dp"
    height: "56dp"
    border_radius: [dp(28), dp(28), dp(28), dp(28)]
    glass_color: [1.0, 1.0, 1.0, 0.08]
    blur_amount: 3.0

    IOSIconButton:
        icon: root.icon

MDScreen:

    MDScrollView:
        id: scroll

        MDGridLayout:
            id: grid
            size_hint_y: None
            height: self.minimum_height
            cols: 1

    CommonIOSButton:
        target_background: scroll
        icon: "view-grid"
        x: dp(24)
        y: root.height - (self.height + dp(24))

    CommonIOSButton:
        target_background: scroll
        icon: "check"
        x: root.width - (self.width + dp(24))
        y: root.height - (self.height + dp(24))
'''


class CommonIOSButton(IOSButton):
    icon = StringProperty("blank")


class TestApp(MDApp):
    def on_start(self):
        fake = Faker("en_US")

        for i in range(40):
            bg_color = (0.2, 0.2, 0.2, 0.4) if i % 2 == 0 else (0, 0, 0, 0)
            list_item = MDListItem(
                theme_bg_color="Custom", md_bg_color=bg_color
            )
            leading_avatar = MDListItemLeadingAvatar(
                source=f"https://picsum.photos/800/600?random={i}"
            )
            headline_text = MDListItemHeadlineText(text=fake.name())
            supporting_text = MDListItemSupportingText(text=fake.job())
            trailing_checkbox = MDListItemTrailingCheckbox()

            list_item.add_widget(leading_avatar)
            list_item.add_widget(headline_text)
            list_item.add_widget(supporting_text)
            list_item.add_widget(trailing_checkbox)

            self.root.ids.grid.add_widget(list_item)

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


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

target_background is an ObjectProperty and defaults to None.

on_target_background(instance, value)

Fired when the value of the target_background attribute changes.

on_parent(instance, parent)

Cleanup when removing a widget from the layout.