CODEWITHSUNDEEP
pythonkivy
Adam Kamil
Adam Kamil

Reputation: 151

Kivy Buttons and Labels size based on display size

I'm trying to figure out how to make my buttons and labels fix perfectly depending on my display size. So if the phone display is different, it will always be in fixed size.

Python Code:

import kivy
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen


class OpeningScreen(Screen):
    pass

class LoginScreen(Screen):
    pass

class SignupScreen(Screen):
    pass

class ScreenManagement(ScreenManager):
    pass


AppKv = Builder.load_file("App.kv")


class MyApp(App):
    def build(self):
        return AppKv


if __name__ == '__main__':
    MyApp().run()

Kv code:

#: import FadeTransition kivy.uix.screenmanager.FadeTransition
#: import hex kivy.utils.get_color_from_hex

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

ScreenManagement:
    transition: FadeTransition()
    OpeningScreen:
    LoginScreen:
    SignupScreen:


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

<OpeningScreen>:
    name: "OpeningScreen"
    canvas:
        Color:
            rgb: 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

    Label:
        text: "Welcome"
        color: 1,1,1,1
        font_size: 45
        size_hint: 0.2,0.1
        pos_hint: {"x":0.40, "top":0.995}

    Button:
        size: 100,75
        on_release: app.root.current = "LoginScreen"
        text: "Login"
        font_size: 50
        color: 1,1,1,1
        background_color: (0,0,0,1)
        background_normal: ""
        background_down: ""
        size_hint: 0.3,0.2
        pos_hint: {"x":0.35, "top":0.7}

    Button:
        size: 100,75
        on_release: app.root.current = "SignupScreen"
        text: "Sign up"
        font_size: 50
        color: 1,1,1,1
        background_color: (0,0,0,1)
        background_normal: ""
        background_down: ""
        size_hint: 0.3,0.2
        pos_hint: {"x":0.35, "top":0.4}

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

<LoginScreen>:
    name: "LoginScreen"
    canvas:
        Color:
            rgb: 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size
    Label:
        text: "Login In"
        color: 0,0,0,1
        font_size: 45
        size_hint: 0.2,0.1
        pos_hint: {"x":0.40, "top":0.995}

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

<SignupScreen>:
    name: "SignupScreen"
    canvas:
        Color:
            rgb: 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size
    Label:
        text: "Sign Up"
        color: 0,0,0,1
        font_size: 45
        size_hint: 0.2,0.1
        pos_hint: {"x":0.40, "top":0.995}

I would really appreciate if anyone could help me with this. I was trying to find out how to do this but I couldn't

Upvotes: 3

Views: 5670

Answers (1)

John Anderson
John Anderson

Reputation: 39092

Button and Label sizes can be set using several different approaches:

  1. Use Kivy Metrics. You can set sizes using dp (for example dp(100)), this is a Density-independent Pixel size. There is also a sp (used similarly) that is Scale-independent Pixels (normally used for font sizes)

  2. Use self.texture_size. You can set sizes using this as size: self.texture_size. This will make your Button and Label widgets just large enough to fit the text in it. You can add some padding by using something like:

    width: self.texture_size[0] + dp(10) height: self.texture_size[1] + dp(10)

  3. Use size_hint. This will ensure that the Button and Label widgets take up the same percentage of your display, regardless of the device.

Don't forget to set size_hint to None, None for the first two above to work.

Upvotes: 3

Related Questions