Skip to content

Instantly share code, notes, and snippets.

@tshirtman
Last active June 23, 2024 01:55
Show Gist options
  • Save tshirtman/cafad15b5e0d6e91081008e2bb83fcf3 to your computer and use it in GitHub Desktop.
Save tshirtman/cafad15b5e0d6e91081008e2bb83fcf3 to your computer and use it in GitHub Desktop.
Making a simple responsive app layout.
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import OptionProperty
from kivy.core.window import Window
from kivy.factory import Factory
KV = '''
#:import A kivy.animation.Animation
<RLabel@Label>:
font_size:
(
sp(20) if app.media in ('XS', 'S') else
sp(40)
)
FloatLayout:
BoxLayout:
orientation: 'vertical'
pos_hint: {'center_x': .5}
padding: dp(20)
size_hint_x: 1 if app.media in ('XS', 'S') else None
width: dp(300) if app.media in ('XS', 'S') else dp(500) if app.media in ('M', 'L') else dp(800)
Header:
Content:
Footer:
Menu:
<Menu@BoxLayout>:
orientation: 'vertical'
size_hint: None, None
pos_hint: {'top': 1}
height: self.minimum_height
width: 100 if app.media in ('XS', 'S') else 200
toggle: app.media in ('XS', 'S', 'M')
hidden: self.toggle and show.state == 'normal'
hidden_ratio: 1
x: -(self.width - show.width) * (self.hidden_ratio or 0)
on_hidden:
A.cancel_all(self, 'x')
A(hidden_ratio=1 if self.hidden else 0, t='out_quad', d=.3).start(self)
MenuToggleButton:
id: show
size_hint_y: None if root.toggle else 0
size_hint_x: None
opacity: 1 if root.toggle else 0
pos_hint: {'right': 1}
text: 'M'
width: dp(20)
MenuButton:
text: 'test'
MenuButton:
text: 'test'
MenuButton:
text: 'test'
MenuButton:
text: 'test'
MenuButton:
text: 'test'
<MenuButton@Button,MenuToggleButton@ToggleButton>:
size_hint_y: None
height:
(
dp(20) if app.media in ('XS', 'S') else
dp(30) if app.media in ('M', 'L') else
dp(40)
)
font_size:
(
sp(20) if app.media in ('XS', 'S') else
sp(40)
)
<Header@Label>:
text: 'Hello world'
size_hint_y: None
height: self.texture_size[1]
font_size:
(
sp(40) if app.media in ('XS', 'S') else
sp(80)
)
<Content@BoxLayout>:
ScrollView:
RLabel:
text: 'text ' * 100
text_size: self.width, None
size_hint_y: None
height: self.texture_size[1]
<Footer@BoxLayout>:
RLabel:
text: app.media
'''
class ResponsiveApp(App):
media = OptionProperty('M', options=('XS', 'S', 'M', 'L', 'XL'))
def build(self):
Window.bind(size=self.update_media)
return Builder.load_string(KV)
def update_media(self, win, size):
width, height = size
self.media = (
'XS' if width < 250 else
'S' if width < 500 else
'M' if width < 1000 else
'L' if width < 1200 else
'XL'
)
if __name__ == "__main__":
ResponsiveApp().run()
@sakku116
Copy link

sakku116 commented Jan 16, 2022

so usefull code, thanks!, i learn something in this code. that i can update value of widget attribute continously with size parameter of window.bind method .
btw, im sorry for my bad english

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment