Extremely oversized/large buttons inside Kivy Screen class

Question

For the sake of brevity I'll explain my problem before posing the code. Here it goes:

I have a Screen class in Kivy that holds two widgets, a GridLayout and an Image. The latter is fine, but the buttons are extremely oversized:

And here's my main.py:

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.factory import Factory
from kivy.uix.gridlayout import GridLayout
from kivy.uix.image import Image
from kivy.config import Config
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen, ScreenManager
import configparser

Builder.load_file('kv\MainMain.kv')

#read configurations
config = configparser.RawConfigParser()
config.read('config.ini')

#read config values
width = config.getint('Default', 'MAX_WINDOW_WIDTH')
height = config.getint('Default', 'MAX_WINDOW_HEIGHT')
border = config.getint('Default', 'BORDERLESS')

#apply config values
Config.set('graphics','width', width)
Config.set('graphics', 'height', height)
Config.set('graphics', 'borderless', border)
Config.set('input', 'mouse', 'mouse,multitouch_on_demand')


#create screen manager
class ScreenManager(ScreenManager):
    pass


#create background widget
class BackGround(Image):
    pass


#image buttons
class MainButtons(GridLayout):
    pass



#create main screen:
class MainScreen(Screen):
    pass


#create main app
class MainMainApp(App):
    def build(self):
        return MainScreen()

#register class
Factory.register(MainScreen, cls=MainScreen)

#run
if __name__ == '__main__':
   MainMainApp().run()

And here's my kv file:

<ScreenManager>:
    id: screen_manager

    MainScreen:
        id: main_screen
        name: 'MainScreen'
        manager: screen_manager

    ReadScreen:
        id: read_screen
        name: 'ReadScreen'
        manager: screen_manager


<MainScreen>:

    BackGround:
        id: back_ground
        source: 'images\\app_background.jpg'
        size: root.width, root.height


    MainButtons:
        cols: 1
        pos: root.width / 2 - 100, root.height / 4
        size: 20, 10

        Button:
            id: button_read
            text: "Read"
            on_press: root.callback_read()

        Button:
            id: button_add
            text: "Add"

        Button:
            id: button_manage
            text: "Manage"

I'm really swamped on this one. Thanks for your help.

Answer 1

You can use size_hint for this.

Here is an example The pyhton file:

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

Builder.load_file("my.kv")

class MainButtons(GridLayout):
    pass

class MainScreen(Screen):
    pass


class MainMainApp(App):
    def build(self):
        self.sm = ScreenManager()
        self.sm.add_widget(MainScreen(name="main"))
        return self.sm


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

and kivy file:

<MainScreen>:
    MainButtons:
        cols: 1
        rows: 4
        Label:
            font_size: "40sp"
            text: "Something"

        Button:
            size_hint: (1,0.1)
            text: "Read"

        Button:
            size_hint: (1,0.1)
            text: "Add"

        Button:
            size_hint: (1,0.1)
            text: "Manage"

And output will be:

And if you want the buttons to be smaller in width, you add ´size_hint_x: None´ to your kv file, like this.

<MainScreen>:
    MainButtons:
        cols: 1
        rows: 4
        Label:
            font_size: "40sp"
            text: "Something"

        Button:
            size_hint: (1,0.1)
            size_hint_x:None
            text: "Read"

        Button:
            size_hint: (1,0.1)
            size_hint_x:None
            text: "Add"

        Button:
            size_hint: (1,0.1)
            size_hint_x:None
            text: "Manage"

Output will now be: