ResponsiveLayout

Added in version 1.0.0.

Responsive design is a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes.

The MDResponsiveLayout class does not reorganize your UI. Its task is to track the size of the application screen and, depending on this size, the MDResponsiveLayout class selects which UI layout should be displayed at the moment: mobile, tablet or desktop. Therefore, if you want to have a responsive view some kind of layout in your application, you should have three KV files with UI markup for three platforms.

You need to set three parameters for the MDResponsiveLayout class mobile_view, tablet_view and desktop_view. These should be Kivy or KivyMD widgets.

Usage responsive

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.responsivelayout import MDResponsiveLayout
from kivymd.uix.screen import MDScreen

KV = '''
<CommonComponentLabel>
    halign: "center"


<MobileView>
    CommonComponentLabel:
        text: "Mobile"


<TabletView>
    CommonComponentLabel:
        text: "Table"


<DesktopView>
    CommonComponentLabel:
        text: "Desktop"


ResponsiveView:
'''


class CommonComponentLabel(MDLabel):
    pass


class MobileView(MDScreen):
    pass


class TabletView(MDScreen):
    pass


class DesktopView(MDScreen):
    pass


class ResponsiveView(MDResponsiveLayout, MDScreen):
    def __init__(self, **kw):
        super().__init__(**kw)
        self.mobile_view = MobileView()
        self.tablet_view = TabletView()
        self.desktop_view = DesktopView()


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


Test().run()

Note

Use common components for platform layouts (mobile, tablet, desktop views). As shown in the example above, such a common component is the CommonComponentLabel widget.

Usage responsive with multiple screen

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.responsivelayout import MDResponsiveLayout
from kivymd.uix.screen import MDScreen

KV = '''
<CommonComponentLabel>
    halign: "center"

# -------------------------------- Log In ---------------------------------

<LogInMobileView>
    CommonComponentLabel:
        text: "Log In Mobile"


<LogInTabletView>
    CommonComponentLabel:
        text: "Log In Table"


<LogInDesktopView>
    CommonComponentLabel:
        text: "Log In Desktop"

# ------------------------------- Log Out ---------------------------------

<LogOutMobileView>
    CommonComponentLabel:
        text: "Log Out Mobile"


<LogOutTabletView>
    CommonComponentLabel:
        text: "Log Out Table"


<LogOutDesktopView>
    CommonComponentLabel:
        text: "Log Out Desktop"

# -------------------------------------------------------------------------

MDScreenManager:
    id: manager
    md_bg_color: self.theme_cls.backgroundColor

    LogInResponsiveView:
        name: "login"
        on_touch_down:
            if self.collide_point(args[0].x, args[0].y):                 manager.current = "logout"

    LogOutResponsiveView:
        name: "logout"
        on_touch_down:
            if self.collide_point(args[0].x, args[0].y):                 manager.current = "login"
'''


class CommonComponentLabel(MDLabel):
    pass


# -------------------------------- Log In ---------------------------------

class LogInMobileView(MDScreen):
    pass


class LogInTabletView(MDScreen):
    pass


class LogInDesktopView(MDScreen):
    pass


class LogInResponsiveView(MDResponsiveLayout, MDScreen):
    def __init__(self, **kw):
        super().__init__(**kw)
        self.mobile_view = LogInMobileView()
        self.tablet_view = LogInTabletView()
        self.desktop_view = LogInDesktopView()

# ------------------------------- Log Out ---------------------------------

class LogOutMobileView(MDScreen):
    pass


class LogOutTabletView(MDScreen):
    pass


class LogOutDesktopView(MDScreen):
    pass


class LogOutResponsiveView(MDResponsiveLayout, MDScreen):
    def __init__(self, **kw):
        super().__init__(**kw)
        self.mobile_view = LogOutMobileView()
        self.tablet_view = LogOutTabletView()
        self.desktop_view = LogOutDesktopView()

# -------------------------------------------------------------------------

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


Test().run()

Perhaps you expected more from the MDResponsiveLayout widget, but even Flutter uses a similar approach to creating a responsive UI.

You can also use the commands provided to you by the developer tools to create a project with an responsive design.

API - kivymd.uix.responsivelayout

class kivymd.uix.responsivelayout.MDResponsiveLayout(*args, **kwargs)

Events:

on_change_screen_type

Called when the screen type changes.

mobile_view

Mobile view. Must be a Kivy or KivyMD widget.

mobile_view is an ObjectProperty and defaults to None.

tablet_view

Tablet view. Must be a Kivy or KivyMD widget.

tablet_view is an ObjectProperty and defaults to None.

desktop_view

Desktop view. Must be a Kivy or KivyMD widget.

desktop_view is an ObjectProperty and defaults to None.

on_change_screen_type(*args)

Called when the screen type changes.

on_size(*args) → None

Called when the application screen size changes.

set_screen() → None

Sets the screen according to the type of application screen size: mobile/tablet or desktop view.