I am new to Kivy and unsure of how to scale the screen so that if being viewed on a mobile phone or not in full screen, the application scales down to the correct viewing size.
I have added screenshots of what the application currently looks like in full screen and then what happens when it is made smaller.
Any help would be hugely appreciated.
Thanks:)
from kivy import Config
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import StringProperty
from kivy.uix.image import Image
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivymd.theming import ThemableBehavior
from kivymd.uix.navigationdrawer import MDNavigationLayout, MDNavigationDrawer
from kivymd.uix.list import MDList, OneLineAvatarListItem, ILeftBody
from kivy.properties import ObjectProperty
from kivy.uix.widget import Widget
Config.set('input', 'mouse', 'mouse,disable_multitouch')
class DrawerList(ThemableBehavior, MDList, Screen):
pass
class NavLayout(MDNavigationLayout):
pass
class Login(Screen):
nav_drawer = ObjectProperty()
class Nav(Screen):
Login = ObjectProperty()
ScreenManager = ObjectProperty
class Homepage(Screen):
Login = ObjectProperty()
nav_drawer = ObjectProperty()
class AddNewCustomer(Screen):
nav_drawer = ObjectProperty()
class AddNewStaff(Screen):
pass
class ScreenManager(ScreenManager):
Login = ObjectProperty()
class ContentNavigationDrawer(BoxLayout):
pass
class MainApp(MDApp):
def build(self):
# Window.maximize()
# self.theme_cls.theme_style = "Light"
# self.theme_cls.primary_hue = "900"
login = Builder.load_file("login.kv")
return login
if __name__ == "__main__":
MainApp().run()
ScreenManager:
Login:
Homepage:
AddNewCustomer:
Nav:
DrawerList:
<Login>:
name: "login"
MDCard:
size_hint: None, None
size: 700, 800
pos_hint: {"center_x": 0.5, "center_y": 0.5}
elevation: 10
padding: 25
spacing: 25
orientation: 'vertical'
Image:
source: 'images/asteria.png'
size: 100, 200
MDLabel:
id: login
font_size: 40
halign: 'center'
size_hint_y: None
height: self.texture_size[1]
padding_y: 15
MDTextFieldRound:
id: user
hint_text: "username"
icon_right: "account"
size_hint_x: None
width: 200
font_size: 18
pos_hint: {"center_x": 0.5}
MDTextFieldRound:
id: password
hint_text: "password"
icon_right: "eye-off"
size_hint_x: None
width: 200
font_size: 18
pos_hint: {"center_x": 0.5}
password: True
MDRoundFlatButton:
text: "LOGIN"
font_size: 12
pos_hint: {"center_x": 0.5}
on_release:
root.manager.current = "homepage"
root.manager.transition.direction = "left"
MDRoundFlatButton:
text: "CLEAR"
font_size: 12
pos_hint: {"center_x": 0.5}
on_press: app.clear()
Widget:
size_hint_y: None
height: 50
<Nav>:
ScrollView:
MDList:
OneLineListItem:
text: "Add New Customer"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "addNewCustomer"
root.screen_manager.transition.direction = "right"
OneLineListItem:
text: "Add New Staff"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "addNewStaff"
OneLineListItem:
text: "Case List"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "caseList"
OneLineListItem:
text: "Create Case"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.transition.direction = "left"
root.screen_manager.current = "Create Case"
OneLineListItem:
text: "Log Out"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.manager.current = "login"
root.manager.transition.direction = "right"
<Homepage>:
name: "homepage"
Screen:
MDNavigationLayout:
ScreenManager:
id: screen_manager
Screen:
name: "Homepage"
MDLabel:
text: "Welcome Home"
halign: "center"
Screen:
name: "addNewCustomer"
MDLabel:
text: "Add New customer"
halign: "center"
Screen:
name: "addNewStaff"
MDLabel:
text: "Add New Staff"
halign: "center"
Screen:
name: "caseList"
MDLabel:
text: "Case List"
halign: "center"
Screen:
name: "casePool"
MDLabel:
text: "Case Pool"
halign: "center"
Screen:
name: "Create Case"
MDLabel:
text: "Case Title"
font_size: 15
size_hint_x: None
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.875, "center_x": 0.115}
MDTextFieldRound:
id: CaseTitle
hint_text: "Info Here"
icon_right: "Case Title"
size_hint_x: None
width: 275
font_size: 15
pos_hint: {"top": 0.863, "center_x": 0.155}
MDLabel:
text: "Customer"
font_size: 15
size_hint_x: None
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.791, "center_x": 0.115}
MDTextFieldRound:
id: Customer
hint_text: "Info Here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 275
font_size: 14
pos_hint: {"top": 0.779, "center_x": 0.155}
MDLabel:
text: "Customer Forename"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.707, "center_x": 0.115}
MDTextFieldRound:
id: Customer Forename
hint_text: "Info here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 137.5
font_size: 14
pos_hint: {"top": 0.687, "center_x": 0.121}
MDLabel:
text: "Customer Surname"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.707, "center_x": 0.210}
MDTextFieldRound:
id: Customer Forename
hint_text: "Info Here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 137.5
font_size: 14
pos_hint: {"top": 0.687, "center_x": 0.210}
MDLabel:
text: "Alternative email"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.620, "center_x": 0.115}
MDTextFieldRound:
id: Alternative email
hint_text: "Info Here"
mode:"rectangle"
size_hint_x: None
width: 275
font_size: 15
pos_hint: {"top": 0.600, "center_x": 0.155}
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: 'Navigation'
left_action_items: [['menu', lambda x: nav_drawer.set_state('open')]]
right_action_items: [["images/asteria.png", lambda x: None]]
elevation:5
Widget:
MDNavigationDrawer:
id: nav_drawer
Nav:
screen_manager: screen_manager
nav_drawer: nav_drawer
manager: root.manager
